Skip to content

Shopping Experiences

Shopping Experiences

This guide will discuss how to use and customize Shopping Experiences in your Shopware Frontends project.

How it works

Shopping Experiences are implemented as a dedicated package that you can install in your project.

If your project is based on the Demo Store Template, that package is already installed. If you are using a custom template, follow the instructions in Install the package first.

Install the package

The @shopware-pwa/cms-base package provides an implementation of all default CMS components in Shopware's Shopping Experiences. It uses Tailwind.css syntax for styling. You will now use it to render a content page.

First of all, add the package to your project:

npm install -D @shopware-pwa/cms-base

Next, you need to register all components in its components/public directory globally. How to do it, depends on your environment. However, the package also comes with a nuxt module which does that for you. So in any Nuxt application, you can just add if to the modules section of your Nuxt config file:

/* nuxt.config.ts */

export default defineNuxtConfig({
  /* ... */
- modules: [/* ... */, "@shopware-pwa/nuxt3-module"],
+ modules: [/* ... */, "@shopware-pwa/cms-base"],

How to build Pages, Elements and Blocks?

See the buliding chapter about CMS.