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"
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-n2Sizing 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 h1Top 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 h4Top 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"
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-primarySizing 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-resetTop 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-resetTop 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"
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-resetTop 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
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-n2Top 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"
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:
containerTop 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
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"
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.
Last updated
