--- title: 'Storefront: Customization | Shopware Community Hub' description: >- Learn how to customize the Shopware storefront using translations, theme assets, theme inheritance, SCSS styling, Twig templates, focused Playwright… canonical_url: 'https://hub.shopware.com/learn/course/storefront-customization' --- # Storefront: Customization # Storefront: Customization This course builds on your existing storefront fundamentals and focuses on how real storefront customization is structured in Shopware projects. This course explores how translations, theme configuration, inheritance, assets, and extension mechanisms work together. You will learn how Shopware resolves storefront resources, how styling decisions are structured, and how to extend the storefront safely without breaking maintainability. Throughout the course, you will move from configuration and structure (snippets, assets, inheritance) to controlled customization (SCSS overrides, Bootstrap best practices), then to a practical campaign customization and a focused Playwright verification, and finally to more advanced patterns (custom Twig extensions and compile-time SCSS injection). By the end of this course, you will not only know how to customize the storefront, but also how to structure your changes in a scalable and maintainable way. - Understand how storefront themes are structured and how inheritance affects templates, styles, scripts, assets, and configuration. - Customize the storefront using translations, theme assets and maintainable styling patterns (SCSS variables, CSS variables, Bootstrap mixins and utilities). - Verify a storefront customization with a focused Playwright end-to-end test. - Apply extension points such as Twig extensions and SCSS variable injection during compilation. ## Learning Units ## Units - [Storefront: Working With Translations](/learn/unit/storefront-working-with-translations): Learn how to create, use, and override storefront snippets. Render translations safely in Twig templates and pass translated strings to storefront JavaScript. - [Storefront: Theme Assets](/learn/unit/storefront-theme-assets): Learn how to manage theme assets, such as images, icons, and thumbnails, how they are delivered in themes and plugins, and how to use them in Twig and SCSS. - [Storefront: Theme Inheritance](/learn/unit/storefront-theme-inheritance): Learn how Shopware theme inheritance works and how to configure parent and child themes, inheritance order, and configuration inheritance using theme.json. - [Storefront: Styling With SCSS and Bootstrap](/learn/unit/storefront-styling-with-scss-and-bootstrap): Learn how to override Bootstrap and Shopware styling using SCSS variables, CSS variables, and mixins, and apply Bootstrap best practices for maintainable… - [Storefront: Twig Patterns and Context Handling](/learn/unit/storefront-twig-patterns-and-context-handling): Explore Twig patterns and Shopware-specific Twig helpers to build robust and maintainable storefront templates. - [Storefront: Practical Lab – Campaign-Based Product Styling](/learn/unit/storefront-practical-lab-campaign-based-product-styling): Implement campaign-based storefront styling in a theme plugin using a product custom field as a toggle and theme configuration for flexible SCSS variables. - [Storefront: Practical Lab – Verifying Campaign Styling With Playwright](/learn/unit/storefront-practical-lab-verifying-campaign-styling-with-playwright): Verify campaign-based storefront customizations with small Playwright tests that check whether the expected campaign elements are rendered in the listing and… - [Storefront: Extending Twig and SCSS Configuration](/learn/unit/storefront-extending-twig-and-scss-configuration): Learn how to create custom Twig extensions and inject SCSS variables into Shopware’s theme compilation.