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

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.

Text graphic with the slogan: 'Ease, scale, and flexibility to let your creativity drive innovation'.

Collage with a working team, a developer at the computer, code and symbols for time and documentation. Symbolizes collaboration and software development.

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.

Image shows a product page for ground pepper with an 'Add to cart' button. A code example is overlaid showing the function to add the product to the shopping cart. A notification confirms that the item has been successfully added. A small image of a developer is also visible.

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.

Website with summer trends, shows pictures of a girl outdoors and a group of people by the pool. Caption reads 'Fresh ideas for hot summer days'.

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.

A team of developers working on computers. Logos of React, Svelte and Astro are arranged around the central image, symbolizing different web development frameworks.

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:

Image montage shows a developer, code on a screen and a 'Hello World! message. A large, central symbol with the number 1 overlays the elements.

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.

Image montage shows a website, code on a screen and colored UI elements. A large, central symbol with the number 2 overlays the elements.

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.

Image montage shows a user interface, logos of Astro, React and Svelte, as well as code for installing packages. A large, central symbol with the number 3 overlays the elements.

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?

Three smiling people at a table, one holding a smartphone, laptop on the table. Scene shows joy and cooperation.

Quick and easy entry

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.

Close-up of hands typing on a laptop keyboard.

When is more knowledge required?

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.”