Shopware Composable Frontends

The toolkit for advanced and rapid storefront development

Explore our cutting-edge SDK for building custom frontends. Evolve the way you work and create unrivaled shopping experiences with the smartest suite of tools.

Talk to our experts

Customisable

Stable

Cloud First

Perform at the pace of your ideas

Headless

Liberate your frontend from your backend. Iterate and innovate faster. Define a fully custom frontend stack based on your specific business requirements.

Composable

Reinvent the shopping experience without reinventing the wheel. Use battle-tested functionalities to compose parts of your online store where you require them.

Cloud ready

Make it effortless. Let Shopware handle your hosting with automatic software updates and maintenance while you focus on growing your business.

App supported

All plugin-/app-system based apps that offer functionality via the API are supported. This API functionality is accessible through the API client, as well as via Vue.js composables.

Implement your ideas faster. Shopware Composable Frontends provides a simple set of Javascript APIs and Vue.js components. Build your frontends from scratch and have full ownership over your tech stack without any updates liabilities.

The cookbook will tell you exactly how to integrate Shopware features into your custom storefront, for example a wish list or the blog. With the API client and the composables, you don’t need to figure out how it all works, it just does.

The API client is an independent TypeScript library, not even bound to Vue.js. Use it in any JavaScript / Node.js based project. Use it with React, Svelte or just vanilla JavaScript. Start on a greenfield and just drop ecommerce functionalities where you want them.

Want to reuse our implementation of Shopping Experiences in your custom frontend? Go ahead – Shopware’s CMS is headless. Or would you rather use your own headless CMS? No problem, Composable Frontends has its capabilities bundled in a way that lets you integrate your CMS with ease.

From zero to hero frontends

How you set up your project determines the deployment process. Choose where you want to start – greenfield or with an existing project. With Shopware Composable Frontends, you have three options:

You can start off with a blank template, which is just an empty Nuxt.js application that has the Shopware Composable Frontends dependencies installed. Nuxt.js is a “meta” framework on top of Vue.js that adds features for routing and for file handling.

Alternatively, you can use the demo store template which is a reference implementation. It comes with most Shopware features and it’ll show you a preview of your frontend. Use the demo store template as a blueprint for your project or just as inspiration and a reference point.

The third option is starting with an existing JavaScript Node.js project, pulling in Composable Frontends as a JavaScript dependency, and installing it into your project. For example, the Astro starter template is using Composable Frontends in a project not based on Vue.js and showcases the versatility of the framework.

What knowledge do you need for Shopware Composable Frontends?

If you’re no stranger to Vue.js and know how to build applications in Javascript, you’ll be able to understand our in-depth documentation and get started with Composable Frontends right away. You don’t need specific Shopware knowledge and there's very little you need to learn about the SDK itself. Of course you need to understand which composables to use in order to build your frontend, but our getting started guides have got your back. There are no frameworks, no sugar, and no syntax you need to know of.

If your goal is to build an entire online store with Shopware Composable Frontends, you should have experience with the intricacies of Nuxt.js or your chosen framework. You need to understand how to solve challenges such as routing, data and state, caching, or any other advanced topics.

Dive deep into the tech

Why did we create Composable Frontends? How exactly does it differ to the Shopware PWA? And for which projects should you use it? Find out in this interview with Niklas Dzösch (Shopware Developer Evangelist) and Dominic Klein (Manager Developer Experience).

“Composable Frontends enables developers to leverage Shopware features in composable technology stacks. We understand that the frontend developer ecosystem changes quickly and is driven by constant improvement and innovation. That is why we aren’t forcing you to use any technology, but leave the choice up to you. At the same time we'll provide bite-sized examples that make sure you hit the ground running. Composable Frontends is the future-proof framework for building custom frontends with Shopware.”