Theming has always been the cornerstone of storefront personalization in Shopware. With version 6.7, the platform introduced a fundamental shift in how themes are processed, making customization faster, more maintainable, and entirely compiler-free. Gone are the days of fighting SASS compilation pipelines, webpack configurations, and outdated asset managers. Instead, Shopware 6.7 leverages modern CSS custom properties, native browser theming, and a streamlined CLI workflow. In this guide, we’ll walk through creating a fully functional custom theme from scratch, following the latest architectural patterns introduced in 6.7 and beyond.

Understanding the New Theming Architecture

Shopware 6.7 replaced the legacy SASS-based theme engine with a CSS-first approach. Theme variables are now defined using standard CSS custom properties (e.g., --sw-color-primary). These variables cascade through the storefront, allowing dynamic updates without recompilation. The build process no longer requires Node.js or a SASS compiler; instead, it uses native CSS parsing and optimization via your CLI. This means faster iteration cycles, better developer experience, and full compatibility with modern browser features.

The shift also simplifies variable inheritance. Core theme files continue to define base variables, and your custom theme simply overrides them at the root level. When you update a setting in the admin panel, Shopware injects the new value into :root and triggers a lightweight DOM reflow, keeping the storefront responsive and performant.

Step 1: Plugin Structure & Registration

Themes are still delivered as plugins, but 6.7 enforces a stricter folder convention. Run the built-in command to scaffold your theme:

bin/console theme:create MyStorefront/CustomTheme

Navigate into the generated plugin directory. The critical path is now Resources/storefront/theme/_base. Your final structure should resemble:

CustomTheme/
├── CustomTheme.php
└── Resources/
    └── storefront/
        └── theme/
            └── _base/
                ├── custom.css
                └── theme.json

In CustomTheme.php, extend Shopware\Core\Theming\ThemePlugin and register your assets. In 6.7+, this method expects standard CSS paths rather than compiled bundles:

<?php declare(strict_types=1);

namespace MyStorefront\CustomTheme;

use Shopware\Core\Theming\ThemePlugin;

class CustomTheme extends ThemePlugin
{
    public function getCssFiles(): array
    {
        return [
            ['src' => 'files/theme/_base/custom.css', 'media' => 'screen'],
        ];
    }
}

Step 2: Admin Configuration via theme.json

Modern theming relies heavily on admin-configurable settings. Version 6.7 introduced theme.json as the official schema for exposing control panel fields. Create this file inside _base/ to define colors, typography, and layout toggles:

{
    "meta": {
        "author": "Your Name",
        "description": "Custom theme built for Shopware 6.7"
    },
    "settings": {
        "primaryColor": {
            "type": "color",
            "label": "Primary Brand Color",
            "default": "#ff5722"
        },
        "headingFont": {
            "type": "text",
            "label": "Heading Font Family",
            "default": "\"Poppins\", sans-serif"
        },
        "enableFluidWidth": {
            "type": "boolean",
            "label": "Use Fluid Container Widths",
            "default": false
        }
    }
}

When saved, Shopware automatically maps these values to corresponding CSS custom properties. You don’t need manual PHP wiring anymore; the framework handles the bridge between the admin UI and your stylesheet.

Step 3: Writing Upgrade-Safe CSS

With SASS compilation removed, you write pure CSS that leverages calc(), clamp(), and native variables. Your custom.css should start by defining a root-level variable block that mirrors your admin settings:

:root {
    --sw-color-primary: var(--primaryColor);
    --sw-font-heading: var(--headingFont);
}

.sw-header-main-navigation,
.product-card--price {
    color: var(--sw-color-primary);
    font-family: var(--sw-font-heading);
}

/* Fluid typography example */
.hero-title {
    font-size: clamp(1.75rem, 2vw + 1rem, 3rem);
}

/* Conditional layout based on boolean setting */
{% if enableFluidWidth %}
.container--main {
    max-width: 100%;
    padding-inline: 2rem;
}
{% endif %}

Note that Shopware’s core theme continues to provide base variables like --sw-color-primary. Override them deliberately and test in multiple viewports. Avoid inline styles or hardcoding values—stick to the variable inheritance chain. When using dynamic Twig conditions inside CSS (as shown above), ensure they are wrapped in {% if %} blocks within the .css file itself; Shopware 6.7 parses these natively during build time.

Step 4: Build Pipeline & Deployment

Once your files are in place, run the new build command:

bin/console theme:build --theme-id=your-theme-uuid
bin/console theme:compile
bin/console cache:clear

The theme:build step validates your CSS, resolves variable dependencies, and generates optimized assets without a Node.js environment. The theme:compile step ensures all storefront instances pick up the new variables correctly across cached templates. In production, always run these commands after deployment and verify asset timestamps using bin/console theme:info.

Step 5: Admin UI Integration & Testing

Navigate to Storefront → Themes in your admin panel. Select your custom theme and apply it. The settings panel will now display the fields you defined earlier. Save changes, and Shopware will inject the variables into the base template without page reloads thanks to its dynamic asset loader. Use the built-in preview mode to verify responsiveness, contrast ratios, and component hierarchy before going live.

When debugging theme issues in 6.7+, inspect :root variables directly in the browser DevTools. Look for cascade conflicts using the Styles pane, and filter by your plugin’s namespace. If a variable isn’t applying, check that your custom.css loads after core stylesheets and that no vendor overrides are forcing !important on related properties.

Conclusion & Pro Tips

Creating a custom theme in Shopware 6.7 is no longer a compile-heavy ordeal. By embracing CSS custom properties, leveraging admin-configurable settings via theme.json, and following the new plugin structure, you gain full control over storefront aesthetics while maintaining upgrade compatibility. Always test variable overrides across core components, avoid direct DOM manipulation via JS in themes, and document your color/typography scale for client handoff. The modern theming engine in 6.7+ not only accelerates development but also aligns storefront personalization with contemporary web standards, ensuring your stores remain fast, accessible, and future-proof.