Recreating category Shopping Experiences of the demoshops
In this tutorial you will learn how to recreate the category Shopping Experience of the ThemeWare® Demoshops.
Last updated
Was this helpful?
In this tutorial you will learn how to recreate the category Shopping Experience of the ThemeWare® Demoshops.
Last updated
Was this helpful?
This tutorial is divided into 4 sections, these correspond to the categories in our demoshops: , und .
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.
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.
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
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.
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
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.
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.
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.
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.
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
Now configure the element in this block.
Add your desired headline (e.g. "Current Highlights") via the text editor.
Choose a centered text alignment
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
Now configure the element in this block.
Product assignment: manual
Products: Select the desired products here
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.
Now configure the new section for the banner element.
Section name: SEO text
Sizing mode: Boxed content
Background colour: #fff
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
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.
Switch via the main navigation to the section "Content" => "Shopping Experiences".
Select the landing page of the corresponding category and edit it.
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
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.
Switch via the main navigation to the section "Contents" => "Shopping Experiences".
Choose the landing page of the corresponding category and edit it.
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
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.
Switch via the main navigation to the section "Content" => "Shopping Experiences".
Select the landing page of the corresponding category and edit it.
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
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.
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.
Now configure the new section for the banner element.
Section name: SEO text
Sizing mode: Boxed content
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
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.
Note: The text colour is automatically generated with the SCSS function based on the background colour. If the result isn't ideal, just change the text colour manually.
