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/cms-base-layer 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/cms-base-layer

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/nuxt-module"],
+ modules: [/* ... */, "@shopware/cms-base-layer"],
});

3D / spatial media support

Shopping Experiences also support 3D models (GLB format) in image elements, image galleries, and the Spatial Viewer block. The 3D viewer is loaded on demand to keep the default bundle small. See Working with Images — 3D and spatial media for setup instructions.

How to build Pages, Elements and Blocks?

BUILDGING > CMS

See the buliding chapter about CMS.