# Recreating category Shopping Experiences of the demoshops This tutorial is divided into 4 sections, these correspond to the categories in our demoshops: [Mountain air & Adventure](#mountain-air-and-adventure), [Cooking pleasure & Provence](#cooking-pleasure-and-provence) und [Craft & Tradition](#craft-and-tradition). ## Mountain air & Adventure ### Element "Banner with Text" ![Default text element as overlay banne](/files/V1dt608ATS84CkplBjLF) #### Step 1: Editing Shopping Experience * Switch via the main navigation to the section "Contents" => "Shopping Experiences". * Select the landing page of the corresponding category and edit it. * Add a new section "**Full width**" above the existing section. #### Step 1.1: Settings of the section Now configure the new section for the banner element. * **Section name**: Teaser * **CSS classes**: `twt-custom-cms-element-overlay-primary twt-mt-n2` * **Sizing mode**: Full width * **Background image**: Place the desired motif with a width of at least 1920px * **Image mode**: Cover > **Tip**: Depending on the theme, you can replace the CSS class "twt-custom-cms-element-overlay-primary" with "twt-custom-cms-element-overlay-secondary" in the section. {% hint style="info" %} **Note**: The text colour is automatically generated with the SCSS [color-contrast](https://getbootstrap.com/docs/5.2/helpers/color-background/) function based on the background colour. If the result isn't ideal, just change the text colour manually. {% endhint %} {% hint style="info" %} **Note**: Please find more ThemeWare® CSS classes in the article [ThemeWare® CSS classes for Shopping Experiences](/knowledge-base/tutorials/shopping-experiences/themeware-css-classes-for-shopping-experiences.md). {% endhint %} #### Step 1.2: Creating a block * Select "**Text**" as the block category and insert the block named "**Text**" to the new section using drag and drop. * Now click onto the block you just added and the block settings will open on the right. Do the following settings: * **Block name**: Category text * **CSS classes**: `container h1` * **Top margin**: 50px * **Bottom margin**: 0px * **Left margin**: 0px * **Right margin**: 0px #### Step 1.3: Configuring element(s) of the block Now configure the element in this block. * Click onto the link "**Data mapping**" on the top right above the image upload field * Select the option "**category.name**" in the dropdown. #### Step 1.4: Creating a block * Select "**Text**" as the block category and insert the block named "**Text**" to the new section using drag and drop. * Now click onto the block you just added and the block settings will open on the right. Do the following settings: * **Block name**: Category description * **CSS classes**: `container h4` * **Top margin**: 0px * **Bottom margin**: 100px * **Left margin**: 0px * **Right margin**: 0px #### Step 1.5: Configuring element(s) of the block Now configure the element in this block. * Click onto the link "**Data Mapping**" in the upper right above the image upload field. * Select the option "**category.description**" in the dropdown. #### Step 1.6: Settings of the section For moving the listing a bit above the banner now configure the section with the listing element. * **CSS classes**: `twt-mt-n9 position-relative` Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where appropriate. ### Element "Highlights-Slider" ![Highlights-Slider](/files/grbnbeEuWVDxXjTmtfu6) #### Step 1: Editing the Shopping Experience * Switch via the main navigation to "Content" => "Shopping Experiences". * Select the landing page of the corresponding category and edit it. * Add a new section "**Full width**" above the existing section. #### Step 1.1: Settings of the section Now configure the new section for the banner element. * **Section name**: Highlights slider * **CSS classes**: `twt-mt-n7 twt-pt-9 bg-primary` * **Sizing mode**: Boxed content > **Tip**: Depending on the theme, you can replace the CSS class "bg-primary" by " bg-secondary" in the section. #### Step 1.2: Creating a block * Select "**Text**" as the block category and insert the block named "**Text**" to the new section using drag and drop. * Now click onto the block you just added and the block settings will open on the right. Do the following settings here: * **Block name**: Headline * **Background colour**: transparent or rgba(0, 0, 0, 0) * **CSS classes**: `container twt-cms-block-reset` * **Top margin**: 20px * **Bottom margin**: 20px * **Left margin**: 0px * **Right margin**: 0px #### Step 1.3: Configuring element(s) of the block Now configure the element in this block. * Add your desired headline (e.g. "Current Highlights") via the text editor. * Choose a centered text alignment #### Step 1.4: Creating a block * Select "**Commerce**" as the block category and insert the block named "**Product Slider**" to the new section using drag and drop. * Now click onto the block you just added and the block settings will open on the right. Do the following settings: * **Block name**: Product slider * **Background colour**: transparent or rgba(0, 0, 0, 0) * **CSS classes**: `twt-cms-block-reset` * **Top margin**: 10px * **Bottom margin**: 50px * **Left margin**: 0px * **Right margin**: 0px #### Step 1.5: Configuring element(s) of the block Now configure the element in this block. * **Product assignment**: manual * **Products**: Select the desired products here ### Element "SEO text" ![CMS element with customised SEO text](/files/eDOD9CjCYpFWAj4X1O5z) #### Step 1: Editing the Shopping Experience * Switch via the main navigation to the section "Content" => "Shopping Experiences". * Choose the landing page of the corresponding category and edit it. * Add a new section "**Full width**" above the existing section. #### Step 1.1: Settings of the section Now configure the new section for the banner element. * **Section name**: SEO text * **Sizing mode**: Boxed content * **Background colour**: #fff #### Step 1.2: Creating a block * Choose "**Text**" as the block category and insert the block named "**Text**" into the new section using drag and drop. * Now click onto the block you just added and the block settings will open on the right. Do the following settings here: * **Block name**: SEO-Text * **Background colour**: #fff * **CSS classes**: `twt-cms-block-reset` * **Top margin**: 50px * **Bottom margin**: 50px * **Left margin**: 0px * **Right margin**: 0px #### Step 1.3: Configuring element(s) of the block Now configure the element in this block. * Add your desired SEO text for the corresponding category via the text editor. Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where appropriate. ## Cooking pleasure & Provence ![Headline above sidebar navigation](/files/hI0W2kdudfVCmss5PKEf) ### Element "Headline above sidebar navigation" #### Step 1: Editing the Shopping Experience * Switch via the main navigation to the section "Content" => "Shopping Experiences". * Select the landing page of the corresponding category and edit it. #### Step 1.1: Creating a block * Choose "**Text**" as the block category and insert the block named "**Text**" to the existing section using drag and drop. * Now click onto the block you just added and the block settings will open on the right. Do the following settings here: * General * **Block name**: Headline * Layout (unfold area below) * **CSS classes**: `twt-cms-element-sidebar-headline twt-mt-2 twt-mb-n2` * **Top margin**: 0px * **Bottom margin**: 0px * **Left margin**: 0px * **Right margin**: 0px #### Step 1.2: Configuring element(s) of the block Now configure every single element in this block. * Add the text navigation using the text editor. Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where appropriate. Now the display image assigned to a category and the corresponding description are automatically loaded into the CMS element. ### Element "SEO text" ![CMS element with customised SEO text](/files/AfKDgKtkMiSNdThGOCu6) #### Step 1: Editing the Shopping Experience * Switch via the main navigation to the section "Contents" => "Shopping Experiences". * Choose the landing page of the corresponding category and edit it. #### Step 1.1: Creating a block * Select "**Text**" as the block category and insert the the block named "**Text**" to the existing section using drag and drop. * Now click onto the block you just added and the block settings will open on the right. Do the following settings here: * General * **Block name**: SEO text * **Background colour**: #fff * Layout (unfold area below) * **CSS classes**: `container` * **Top margin**: 30px * **Bottom margin**: 30px * **Left margin**: 0px * **Right margin**: 0px #### Step 1.2: Configuring element(s) of the block Now configure the element in this block. * Use the text editor to add your desired SEO text for the appropriate category. Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where applicable. ## Craft & Tradition ![CMS element with category text and image](/files/llbMWGDViWbZ2stSX0Nx) ### Element "Category text/image" #### Step 1: Editing the Shopping Experience * Switch via the main navigation to the section "Content" => "Shopping Experiences". * Select the landing page of the corresponding category and edit it. #### Step 1.1: Creating a block * Select "**Text & Image**" as the block category and add the block named "**Two columns, boxed image & text**" to the existing section using drag & drop. * Now click on the block you just added, and the block settings will open on the right. Do the following settings here: * General * **Block name**: Category text * Layout (unfold area below) * **Top margin**: 20px * **Bottom margin**: 20px * **Left margin**: 0px * **Right margin**: 0px #### Step 1.2: Configuring element(s) of the block Now configure each element in this block. * Element on the left, image * Click on the link "**Data mapping**" on the top right above the image upload field * Choose the option "**category.media**" from the dropdown list. * **Display mode**: Cover * **Minimum height**: 190px * Element on the right, text * Click on the link "**Data mapping**" on the top right above the image upload field * Choose the option "**category.description**" from the dropdown list. Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where appropriate. Now the display image assigned to a category and the corresponding description will be automatically loaded into the CMS element. ### Element "SEO text" ![CMS element with customised SEO text](/files/AfKDgKtkMiSNdThGOCu6) #### Step 1: Editing the Shopping Experience * Switch via the main navigation to the section "Contents" => "Shopping Experiences". * Choose the landing page of the corresponding category and edit it. * Add a new section "**Full width**" above the existing section. #### Step 1.1: Settings of the section Now configure the new section for the banner element. * **Section name**: SEO text * **Sizing mode**: Boxed content #### Step 1.2: Creating a block * Select "**Text**" as the block category and add the block named "**Text**" to the new section using drag and drop. * Now click onto the block you just added and the block settings will open on the right. Do the following settings here: * **Block name**: SEO text #### Step 1.3: Configuring element(s) of the block Now configure the element in this block. * Add the desired SEO text for the corresponding category using the text editor. Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where appropriate. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/recreating-category-shopping-experiences-of-the-demoshops.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.