Shopware 6 Theme Development: SCSS, Twig Overrides, and Storefront Customizations

Shopware 6 themes are built on Bootstrap 5 with a clever Twig override system. Instead of copying and modifying files, you only override the specific parts that need to change, making themes maintainable and upgrade-safe.

Theme structure: A theme is a special plugin implementing ThemeInterface with a theme.json defining SCSS entry points, JS entry points, and configurable variables exposed in the Admin theme editor.

SCSS customization: Override Bootstrap and Shopware SCSS variables in your theme's SCSS files. The theme.json style array controls the compilation order using the @Storefront placeholder — files before it can override variables, files after it add custom styles.

Twig overrides: Use sw_extends (not the standard Twig extends) with block overrides. The parent() call renders the original block content, so you can wrap or extend rather than replace. The theme view hierarchy in theme.json determines override priority.

Storefront JS plugins: Shopware has its own plugin system for frontend interactivity. Extend the Plugin class, register it via PluginManager, and activate it with data-* attributes in Twig templates.

Remember: always run bin/console theme:compile after SCSS changes, and bin/console cache:clear after template changes.