Storefront
The Storefront is the customer-facing layer of Shopware. When building a plugin, you extend the Storefront to:
- Add new pages or endpoints
- Modify templates and layouts
- Inject dynamic data
- Add JavaScript behavior
- Customize styling and assets
This section follows a practical development workflow and mirrors the folder structure inside /storefront.
How to use this section
Most Storefront customizations follow this sequence:
- Add or extend a controller
- Render or override a template
- Inject data into the page
- Enhance behavior with JavaScript
- Apply styling and assets
Start with the /controllers folder and move downward as needed.
Section structure
Advanced
Infrastructure and optimization topics.
- Add caching to custom controller
- Add cookie to manager
- Reacting to cookie consent changes
- Remove unnecessary JavaScript plugin
Controllers
Create new routes and pages, or extend existing ones.
- Add custom controller
- Add custom page
- Add custom pagelet
- Add data to a storefront page
- Add Dynamic Content via AJAX Calls
How-to
Feature-specific examples and focused use-cases.
- Add custom captcha
- Add custom sorting for product listing
- Add listing filters
- Use media thumbnails
- Use nested line items
- Using a modal window
- Using custom fields in storefront
- Using the datepicker plugin
JavaScript
Extend or override frontend behavior.
- Add custom JavaScript
- Add JavaScript as script tag
- Fetch data dynamically
- Override existing JavaScript
- React to JavaScript events
- Storefront Plugins and Helper Reference
Styling and assets
Control appearance and resources.
- Add custom assets
- Add custom styling
- Add icons
- Add SCSS variables
- Add SCSS variables via subscriber
- Add translations
Templates
Override or extend Twig templates and layout blocks.
Next steps
- After modifying Storefront code, rebuild your assets
- Visit the Composable Frontends guide when building headless frontends instead of extending the default Storefront