import{_ as e}from"./chunks/plugin-vue_export-helper.BCo6x5W8.js";import{c as a,a as s,b as t,r as i,o as n}from"./chunks/runtime-core.esm-bundler.Xt1Ml84y.js";const o=JSON.parse('{"title":"Shopping Experiences","description":"","frontmatter":{"head":[["meta",{"name":"og:title","content":"Shopping Experiences"}],["meta",{"name":"og:description","content":"This guide will discuss how to use and customize Shopping Experiences in your Shopware Frontends project."}],["meta",{"name":"og:image","content":"https://frontends-og-image.vercel.app/Shopping%20Experiences?fontSize=150px"}]],"nav":{"position":20}},"headers":[{"level":2,"title":"How it works","slug":"how-it-works","link":"#how-it-works","children":[]},{"level":2,"title":"Install the package","slug":"install-the-package","link":"#install-the-package","children":[]},{"level":2,"title":"How to build Pages, Elements and Blocks?","slug":"how-to-build-pages-elements-and-blocks","link":"#how-to-build-pages-elements-and-blocks","children":[]}],"relativePath":"framework/shopping-experiences.md","filePath":"framework/shopping-experiences.md"}');const l=e({name:"framework/shopping-experiences.md"},[["render",function(e,o,l,p,r,h){const c=i("PageRef");return n(),a("div",null,[o[0]||(o[0]=s('

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:

bash
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:

diff
/* nuxt.config.ts */\n\nexport default defineNuxtConfig({\n  /* ... */\n- modules: [/* ... */, "@shopware/nuxt-module"],\n+ modules: [/* ... */, "@shopware/cms-base-layer"],\n});

How to build Pages, Elements and Blocks? ​

',12)),t(c,{page:"../getting-started/cms/",title:"BUILDGING > CMS",sub:"See the buliding chapter about CMS."})])}]]);export{o as __pageData,l as default};