Shopware 6 theme development differs from most e-commerce platform theming because it combines three layers: Twig template inheritance for HTML structure, SCSS with Bootstrap 5 for styles, and webpack-bundled JavaScript via Shopware’s own Storefront plugin system. Understanding how these three layers interact is the prerequisite for effective custom theme work.

The Storefront theme — Shopware’s built-in default — is the recommended parent for all custom Shopware 6 theme development projects. Never modify Storefront files directly. Instead, create a child theme plugin that overrides only the specific templates and styles you need to change. This keeps your changes upgrade-safe and easy to maintain.

Shopware 6 theme development — Twig override system, SCSS compilation pipeline, and asset deployment workflow by CodeAtoZ

A Shopware 6 theme development project is structured as a plugin. The key difference from a regular plugin is the theme.json file at the plugin root, which declares the directory as a theme and exposes configuration to the Admin panel. Without theme.json, Shopware treats the directory as a regular plugin and skips the theme compilation pipeline.

• src/Resources/theme.json — theme manifest with configurable fields
• src/Resources/views/storefront/ — Twig template overrides
• src/Resources/app/storefront/src/scss/ — SCSS entry point and variables
• src/Resources/app/storefront/src/js/ — JavaScript Storefront plugins
• src/Resources/app/storefront/dist/ — compiled assets (generated, not committed)

Shopware 6 theme development uses a block override system built on Twig’s template inheritance. Every Storefront template is broken into named blocks — you override only the specific blocks you need to change. The {% sw_extends %} tag (not standard Twig {% extends %}) ensures Shopware’s multi-layer inheritance chain is preserved, allowing plugins and themes to stack their overrides correctly.

{# views/storefront/page/product-detail/index.html.twig #}
{% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}

{% block page_product_detail_buy_form %}
  {# Prepend custom badge above the buy form #}
  {% if page.product.customFields.custom_badge %}
    <div class="custom-product-badge">
      {{ page.product.customFields.custom_badge }}
    </div>
  {% endif %}
  {{ parent() }}
{% endblock %}

The Storefront theme is built on Bootstrap 5. All Shopware 6 theme development SCSS work starts by overriding Bootstrap variables in a _variables.scss file before the Storefront base SCSS is imported. This gives you control over colours, typography, spacing, and breakpoints without duplicating styles.

// app/storefront/src/scss/base.scss
// 1. Override Bootstrap variables BEFORE importing Storefront
$primary: #2563EB;
$body-bg: #ffffff;
$font-family-base: 'Inter', sans-serif;

// 2. Import Storefront base (picks up your variable overrides)
@import "~vendor/shopware/storefront/Resources/app/storefront/src/scss/base";

// 3. Add your custom component styles
@import "components/header";
@import "components/product-card";

Shopware’s JavaScript layer uses a custom plugin system based on classes extending Plugin from src/plugin-system/plugin.class. In Shopware 6 theme development, you register JS plugins for DOM elements using the PluginManager. Shopware automatically initialises registered plugins when their selector element appears in the DOM.

All JS is bundled via webpack during bin/console theme:compile. The entry point is app/storefront/src/main.js. For development, the watch-storefront.sh script provides hot module replacement. Consult the Shopware JS plugin documentation and the Bootstrap 5 Sass customisation guide and the Shopware theme development reference for the full lifecycle API.

Stores requiring more complex frontend architecture — such as Vue.js components in the Admin or headless frontends via the WooCommerce REST API — may benefit from a broader review of Shopware 6 theme development options with our Shopware development team.