As project maintainers, we’re excited to share that Composable Frontends now provides a first-class scaffolding and theming system built on Nuxt Layers. Shopware developers can spin up performant, SEO-ready, and extensible storefronts faster, without copy-pasting templates or reinventing core UI patterns. The goal: lower setup costs and deliver a more consistent, predictable developer experience.
Our demo, with an example candle store, shows this in practice by using two new homepage templates: a base template that defines structure and conventions, and a child template that focuses on customization and variation. This inheritance model enables layout logic reuse, targeted overrides, and long-term maintainability.
The template includes a new, structured design tokens system built on UnoCSS, which provides consistent, semantic color tokens that are easy to customize and maintain. The system follows a semantic naming convention aligned with Material Design 3 principles, organized into categories that reflect their purpose rather than their appearance. Colors use a category-variant-modifier pattern:
Category: The color's purpose (brand, surface, states, outline)
Variant: Specific use case (primary, secondary, success, error)
Modifier: State or context (hover, pressed, on-*, container)
Beyond the new templates, our work also includes:
core pages out of the box: Checkout, PDP, PLP, Account, Registration
shared components: product cards, filters, sliders, cart items, galleries (as Nuxt Layers)
sensible defaults: SSR, multilingual, SEO, and caching “just work”
clean extensibility: adapt without forking
Furthermore, the new Composable Frontends template includes a new, structured design tokens system built on UnoCSS. This provides consistent, semantic color tokens that are easy to customize and maintain. The system follows a semantic naming convention aligned with Material Design 3 principles, organized into categories that reflect their purpose rather than their appearance.
Why this matters
It is important to mention that earlier versions of our frontend approach intentionally avoided a deep inheritance model. At that time, we wanted storefronts to be fully owned by the agency or merchant. Copying the base and working independently reduced hidden upgrade constraints and avoided tight coupling to framework internals.
As projects became more complex and more teams started working across multiple storefronts, the downsides of this approach became clearer. We saw more duplication, higher onboarding effort, and more inconsistencies between implementations.
Today, the ecosystem is more mature. Tools like Nuxt Layers have been stable and widely used since mid-2024. This gives us better building blocks to introduce structured inheritance in a flexible way. The goal is not to lock projects into a rigid system, but to provide a shared foundation that teams can extend or replace when needed.
There's more to come
Our demo is part of a broader Theme Layer effort that's still evolving as we learn from real usage. APIs and structure may still change. We hope you'll check it out, review the setup, and share your feedback at this GitHub issue about what works, what’s confusing, and what’s missing.
