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.
Liberate your frontend from your backend. Iterate and innovate faster. Define a fully custom frontend stack based on your specific business requirements.
Reinvent the shopping experience without reinventing the wheel. Use battle-tested functionalities to compose parts of your online store where you require them.
Make it effortless. Let Shopware handle your hosting with automatic software updates and maintenance while you focus on growing your business.
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.
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.
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.
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.”
shopware AG, Manager Developer Experience
"We chose Composable Frontends over the Shopware default storefront for a number of reasons. With the flexibility and customization options offered by Composable Frontends, we can create truly unique and tailored solutions. Additionally, the framework allows for a more modular and scalable approach to ecommerce development – composable commerce. Think about connecting a third-party headless CMS or your email marketing platform in a flexible and composable way. I believe this is crucial for businesses that are looking to grow and evolve over time."
Ecommerce Developer,
kippie.nl
"Why we love working with Composable Frontends? Because the frontend tech-stack matches our developers' skills far better than the Shopware default storefront. We also like having maximum flexibility with regards to frontend development as every project is a highly individual process. Thanks to the headless architecture, core updates are much easier. We only have to think about API breaks and not about changes in the storefront. Plus we can use Shopware for specific tasks only as other systems are easily integrated without writing code. The headless architecture also brings a strong, clearly defined boundary between the frontend and backend. In addition, we can leverage modern tooling and frontend features. We work much faster when developing performant individual storefronts in the short term and maintaining them in the long term."
Lead Frontend Engineer,
mothership GmbH
"At dasistweb® we prioritize the adoption of Shopware Composable Frontends, which incorporates key aspects such as Tailwind.css, composable architecture, and frontend decoupling. By leveraging these features, we aim to deliver high-quality results to our customers with faster time-to-market and reduced maintenance efforts in the long run. We remain committed to utilizing the latest technologies and methodologies within Composable Frontends to offer our clients an exceptional service."
CEO,
dasistweb GmbH
With Shopware PWA we want to enable developers to build ecommerce websites with a clear division between client and server, allowing merchants to obtain a higher level of flexibility and scalability in custom ecommerce projects. Find more details here.
Recently, we announced that we are working on a project called “Frontends”. This blog post deals with the What, Why, and How.
You already heard about the new Shopware Frontends? It uses the headless approach known from the administration area of Shopware. In general Shopware provides an admin API, the sync API and the store API.
shopcast.fm
shopcast.fm
Ramona Schwering, Vuejs Amsterdam 2023
To find out more about Shopware, please get in touch. We look forward to hearing from you!
Trusted by
Get to know Shopware inside out. To request your custom product demo, fill in the form and we'll be in touch to book your appointment.
Let us guide you through the heart and soul of our ecommerce solutions.
Learn about Shopware's integrated features live in action.
Discuss your challenges and receive instant feedback to your questions.
