Recreating category Shopping Experiences of the demoshops

In this tutorial you will learn how to recreate the category Shopping Experience of the ThemeWare® Demoshops.

This tutorial is divided into 4 sections, these correspond to the categories in our demoshops: Mountain air & Adventure, Cooking pleasure & Provence und Craft & Tradition.

Mountain air & Adventure

Element "Banner with Text"

Default text element as overlay banne

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.

Note: The text colour is automatically generated with the SCSS color-contrast function based on the background colour. If the result isn't ideal, just change the text colour manually.

Note: Please find more ThemeWare® CSS classes in the article ThemeWare® CSS classes for Shopping Experiences.

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

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

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

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

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

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

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.