All pages
Powered by GitBook
1 of 15

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Configuration

Basic configuration


Layout type

Field type: Select

Available values: • Shopware • ThemeWare® • ThemeWare® "Buttons" (Beta)

Example value: ThemeWare®

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Basic configuration"

Technical name: twt-filter-panel-layout-type

Shopware: This layout type uses Shopware's default filters and is not modified by ThemeWare®. (HC-Architecture®)

ThemeWare®: This layout type is the classic ThemeWare® style for Shopware 6.

ThemeWare® "Buttons": This layout type is in a testing phase, feel free to give it a try.

Colour configuration


Field type: Color picker

Example value: #333333

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-filter-panel-toggle-btn-color


Field type: Color picker

Example value: #eeeeee

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-filter-panel-toggle-btn-border-color


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-filter-panel-toggle-btn-background-color


Field type: Color picker

Example value: #000000

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-filter-panel-toggle-btn-color-hover


Field type: Color picker

Example value: #666666

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-filter-panel-toggle-btn-border-color-hover


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-filter-panel-toggle-btn-background-color-hover


Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-filter-panel-toggle-btn-color-expanded


Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-filter-panel-toggle-btn-border-color-expanded


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-filter-panel-toggle-btn-background-color-expanded


Field type: Select

Available values: • normal (default) • compact

Example value: compact

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (in the sidebar)"

Technical name: twt-filter-panel-spacing-sidebar


Field type: Color picker

Example value: #eeeeee

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (in the sidebar)"

Technical name: twt-filter-panel-item-dropdown-border-color-sidebar


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (in the sidebar)"

Technical name: twt-filter-panel-item-dropdown-background-color-sidebar


Field type: Number field

Example value: 20

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"

Technical name: twt-filter-panel-content-padding-top


Field type: Number field

Example value: 1

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"

Technical name: twt-filter-panel-content-padding-right


Field type: Number field

Example value: 1

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"

Technical name: twt-filter-panel-content-padding-bottom


Field type: Number field

Example value: 20

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"

Technical name: twt-filter-panel-content-padding-left


Field type: Text field

Example value: 1px solid

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"

Technical name: twt-filter-panel-content-border


Field type: Color picker

Example value: #eeeeee

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"

Technical name: twt-filter-panel-content-border-color


Field type: Color picker

Example value: #eeeeee

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"

Technical name: twt-filter-panel-content-background-color


Field type: Color picker

Example value: #eeeeee

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"

Technical name: twt-filter-panel-item-dropdown-border-color


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"

Technical name: twt-filter-panel-item-dropdown-background-color


Field type: Select

Available values: • don't show • show

Example value: don't show

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Headline (in the sidebar)"

Technical name: twt-sidebar-filter-headline-show


Field type: Number field

Example value: 0

Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Headline (in the sidebar)"

Technical name: twt-sidebar-filter-headline-margin-bottom

Text colour (Filter button)

Border colour (Filter button)

Background colour (Filter button)

Text colour (Filter button) @hover

Border colour (Filter button) @hover

Background colour (Filter button) @hover

Text colour (Filter button) @expanded

Border colour (Filter button) @expanded

Background colour (Filter button) @expanded

Filter (in the sidebar)

Panel spacing

normal: The filters are individual elements with a small gap between them.

compact: The gaps between the filters are removed so that they are displayed as a single block.

Border colour (Dropdown)

Background colour (Dropdown)

Filter (above the content)

Padding top (Filter panel)

Padding right (Filter panel)

Padding bottom (Filter panel)

Padding left (Filter panel)

Border top/bottom (Filter panel)

Border-top/-bottom colour (Filter panel)

Background colour (Filter panel)

Border colour (Dropdown)

Background colour (Dropdown)

Headline (in the sidebar)

Show filter headline

To edit or translate the headline please use the following snippet: listing.filterTitleText

Margin bottom [px]

Image slider (Category "Images")

Configuration


Individual styling

Field type: Select

Available values: • don't use (default) • use individual styling

Example value: don't use (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")"

Technical name: twt-product-slider-controls-individual


Field type: Select

Available values: • Rectangle (default) • Square/Circle

Example value: Rectangle (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-product-slider-controls-style


Field type: Select

Available values: • not rounded • rounded corners (default) • round corners

Example value: rounded corners (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-product-slider-controls-corner-type


Field type: Select

Available values: • no effect (default) • fade in

Example value: fade in

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-product-slider-controls-hover-type


Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-product-slider-controls-color


Field type: Color picker

Example value: transparent

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-product-slider-controls-border-color


Field type: Color picker

Example value: transparent

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-product-slider-controls-background-color


Field type: Color picker

Example value: $sw-color-brand-secondary

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-product-slider-controls-color-hover


Field type: Color picker

Example value: darken($twt-product-slider-controls-border-color, 10%)

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-product-slider-controls-border-color-hover


Field type: Color picker

Example value: darken($twt-product-slider-controls-background-color, 7.5%)

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-product-slider-controls-background-color-hover


Field type: Color picker

Example value: rgba(0, 0, 0, 0)

Path to the configuration: Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Product image"

Technical name: twt-cms-element-product-box

In the tab "Content" you can configure all sliders globally.

Arrow navigation (Individual styling)

Layout type

Corner type

rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners Uses a predefined radius for round corners.

Hover effect

Text colour

Border colour

Background colour

Text colour @hover

Border colour @hover

Background colour @hover

Product image

Background colour

Background colour of procuct images in product boxes of shopping experience sliders.

Shopping Experiences

You can find more information about the CMS extensions from ThemeWare® in the following article:

CMS extensions

Instructions and CSS classes for Shopping Experiences can be found in the ThemeWare® Knowledge Base:

Configuration

Basic configuration


Layout type

Field type: Select

Available values: • Shopware • ThemeWare® • ThemeWare® "Buttons" (Beta)

Example value: ThemeWare®

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Basic configuration"

Technical name: twt-category-navigation-layout-type

Shopware: This layout type uses Shopware's default filters and is not modified by ThemeWare®. (HC-Architecture®)

ThemeWare®: This layout type is the classic ThemeWare® style for Shopware 6.

ThemeWare® "Buttons": This layout type is in a testing phase, feel free to give it a try.

Headline


Show "Category navigation" headline

Field type: Select

Available values: • don't show • show

Example value: don't show

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Basic configuration"

Technical name: twt-category-navigation-headline-show


Field type: Number field

Example value: 0

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Headline"

Technical name: twt-category-navigation-headline-margin-bottom


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-category-navigation-box-background-color


Field type: Color picker

Example value: #eeeeee

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-category-navigation-box-border-color


Field type: Color picker

Example value: #eeeeee

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-category-navigation-border-color


Field type: Color picker

Example value: #000000

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Colour configuration"

Technical name: twt-category-navigation-accent-color


Field type: Color picker

Example value: #111111

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

Technical name: twt-category-navigation-link-color


Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

Technical name: twt-category-navigation-link-color-hover


Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

Technical name: twt-category-navigation-link-color-active


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

Technical name: twt-category-navigation-link-background-color


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

Technical name: twt-category-navigation-link-background-color-hover


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

Technical name: twt-category-navigation-link-background-color-active

To edit or translate the headline please use the following snippet: twt.listing.navigation.title

Margin bottom [px]

Colour configuration

Background colour (Navigation)

Border colour (Navigation)

Border colour

Accent colour

Links

Text colour

Text colour @hover

Text colour @active

Background colour

Background colour @hover

Background colour @active

Category navigation (Category "Sidebar")

Product filter (Category "Sidebar")

Image gallery (Category "Images")

Two columns, boxed image & text (Category "Text & images")

Configuration


Individual styling

Field type: Select

Available values: • don't use (default) • use individual styling

Example value: use individual styling

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")"

Technical name: twt-gallery-slider-controls-individual


Field type: Select

Available values: • Rectangle (default) • Square/Circle

Example value: Rectangle (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-gallery-slider-controls-style


Field type: Select

Available values: • not rounded • rounded corners (default) • round corners

Example value: rounded corners (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-gallery-slider-controls-corner-type


Field type: Select

Available values: • no effect (default) • fade in

Example value: no effect (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-gallery-slider-controls-hover-type


Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-gallery-slider-controls-color


Field type: Color picker

Example value: transparent

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-gallery-slider-controls-border-color


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-gallery-slider-controls-background-color


Field type: Color picker

Example value: $sw-color-brand-secondary

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-gallery-slider-controls-color-hover


Field type: Color picker

Example value: darken($twt-gallery-slider-controls-border-color, 10%)

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-gallery-slider-controls-border-color-hover


Field type: Color picker

Example value: darken($twt-gallery-slider-controls-background-color, 7.5%)

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-gallery-slider-controls-background-color-hover


Field type: Select

Available values: • align left • align right • align center (default)

Example value: align center (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Dots navigation (Individual styling)"

Technical name: twt-gallery-slider-navigation-dots-alignment

In the tab "Content" you can configure all sliders globally.

Arrow navigation (Individual styling)

Layout type

Corner type

rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners Uses a predefined radius for round corners.

Hover effect

Text colour

Border colour

Background colour

Text colour @hover

Border colour @hover

Background colour @hover

Dots navigation (Individual styling)

Horizontal alignment

Product slider (Category "Commerce")

All types (Shop pages, Landing pages, Listing pages, Product pages)

Configuration

Category image


Position @Phone (<768px)

Field type: Select

Available values: • above category text • below category text

Example value: above category text

Path to the configuration: Tab "Shopping Experiences" => Block "Two columns, boxed image & text (Category "Text & images")" => Section "Category image"

Technical name: twt-cms-block-image-position-mobile


Field type: Select

Available values: • align left • align right

Example value: align left

Path to the configuration: Tab "Shopping Experiences" => Block "Two columns, boxed image & text (Category "Text & images")" => Section "Category image"

Technical name: twt-cms-block-image-position-desktop


Field type: Number field

Example value: 16

Path to the configuration: Tab "Shopping Experiences" => Block "Two columns, boxed image & text (Category "Text & images")" => Section "Category text"

Technical name: twt-cms-block-image-font-size


Field type: Select

Available values: • align top • align center • align bottom

Example value: align top

Path to the configuration: Tab "Shopping Experiences" => Block "Two columns, boxed image & text (Category "Text & images")" => Section "Category text"

Technical name: twt-cms-block-image-align-items

Position @Tablet/Desktop (≥768px)

Category text

Font size

Item alignment

Configuration


Individual styling

Field type: Select

Available values: • don't use (default) • use individual styling

Example value: don't use (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")"

Technical name: twt-image-slider-controls-individual


Field type: Select

Available values: • Rectangle (default) • Square/Circle

Example value: Rectangle (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-style


Field type: Select

Available values: • not rounded • rounded corners (default) • round corners

Example value: rounded corners (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-corner-type


Field type: Select

Available values: • no effect (default) • fade in

Example value: fade in

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-hover-type


Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-color


Field type: Color picker

Example value: transparent

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-border-color


Field type: Color picker

Example value: transparent

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-background-color


Field type: Color picker

Example value: $sw-color-brand-secondary

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-color-hover


Field type: Color picker

Example value: darken($twt-image-slider-controls-border-color, 10%)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-border-color-hover


Field type: Color picker

Example value: darken($twt-image-slider-controls-background-color, 7.5%)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-background-color-hover


Field type: Select

Available values: • align left • align right • align center (default)

Example value: align center (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Dots navigation (Individual styling)"

Technical name: twt-image-slider-navigation-dots-alignment

In the tab "Content" you can configure all sliders globally.

Arrow navigation (Individual styling)

Layout type

Corner type

rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners Uses a predefined radius for round corners.

Hover effect

Text colour

Border colour

Background colour

Text colour @hover

Border colour @hover

Background colour @hover

Dots navigation (Individual styling)

Horizontal alignment

Configuration

Basic configuration


Load ThemeWare® CMS styling (CMS landing pages)

Field type: Select

Available values: • no • yes

Example value: yes

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling"

Technical name: twt-cms-layout-adjustments-landing-pages

If active, a predefined and configurable (container) styling for Shopping Experience blocks is loaded on pages of the type "Landing page".

This only applies to Shopping Experience sections in "Boxed content" sizing mode.


Field type: Select

Available values: • no • yes

Example value: yes

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling"

Technical name: twt-cms-layout-adjustments-category-pages


Field type: Select

Available values: • no • yes

Example value: yes

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling"

Technical name: twt-cms-layout-adjustments-product-pages


Field type: Select

Available values: • no • yes

Example value: yes

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling"

Technical name: twt-cms-layout-adjustments-shop-pages


Field type: Select

Available values: • no • yes

Example value: yes

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling" => Section "Basic configuration"

Technical name: twt-cms-section-boxed-sidebar-combined


Field type: Number field

Example value: 1

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling" => Section "Basic configuration"

Technical name: twt-cms-section-boxed-margin-top-home


Field type: Number field

Example value: 20

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling" => Section "Basic configuration"

Technical name: twt-cms-section-boxed-margin-top


Field type: Number field

Example value: 20

Path to the configuration: Tab "Shopping Experiences" => Block "All types (Shop pages, Landing pages, Listing pages, Product pages)" => Section "CMS section"

Technical name: twt-cms-section-boxed-padding-left-right


Field type: Number field

Example value: 1

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling" => Section "CMS section"

Technical name: twt-cms-section-margin-bottom


Field type: Number field

Example value: 20

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling" => Section "CMS section"

Technical name: twt-cms-section-padding-top-bottom


Field type: Color picker

Example value: rgba(0, 0, 0, 0)

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling" => Section "CMS section"

Technical name: twt-cms-section-background-color


Field type: Color picker

Example value: #eeeeee

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling" => Section "CMS block"

Technical name: twt-cms-section-boxed-border-color


Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Shopping Experiences" => Block "ThemeWare® CMS styling" => Section "CMS block"

Technical name: twt-cms-section-boxed-background-color


Field type: Select

Available values: • none • fade in • fade in down • fade in left • fade in right • fade in up • zoom in

Example value: none

Path to the configuration: Tab "Shopping Experiences" => Block "All types (Shop pages, Landing pages, Listing pages, Product pages)" => Section "CSS scroll animations"

Technical name: twt-cms-animations-name


Field type: Select

Available values: • none • bounce in • bounce in down • bounce in left • bounce in right • bounce in up • fade in • fade in down • fade in left • fade in right • fade in up

Example value: none

Path to the configuration: Tab "Shopping Experiences" => Block "All types (Shop pages, Landing pages, Listing pages, Product pages)" => Section "CSS scroll animations"

Technical name: twt-cms-animations-name-headlines

Load ThemeWare® CMS styling (CMS listing pages)

If active, a predefined and configurable (container) styling for Shopping Experience blocks is loaded on pages of the type "Category page".

This only applies to Shopping Experience sections in "Boxed content" sizing mode.

Load ThemeWare® CMS styling (CMS product pages)

If active, a predefined and configurable (container) styling for Shopping Experience blocks is loaded on pages of the type "Product page".

This only applies to Shopping Experience sections in "Boxed content" sizing mode.

Load ThemeWare® CMS styling (CMS shop pages)

If active, a predefined and configurable (container) styling for Shopping Experience blocks is loaded on pages of the type "Shop page".

This only applies to Shopping Experience sections in "Boxed content" sizing mode.

ThemeWare® CMS styling

Combine sidebar sections (CMS pages)

Applies the ThemeWare® CMS styling to the entire sidebar container and not to the individual CMS blocks inside this container.

Margin top (CMS content) (Home page)

Margin top of the CMS content in Shopping Exprericences on the home page.

Margin top (CMS content)

Margin top of the CMS content in Shopping Exprericences.

Outer spacing left/right @Phone (<576px)

Margin bottom (CMS section)

Padding top/bottom (CMS section)

Background colour (CMS section)

Background colour for CMS sections.

Border colour (CMS block)

Border colour for CMS blocks in "Boxed content" size mode.

Background colour (CMS block)

Background colour for CMS blocks in "Boxed content" size mode.

CSS scroll animations

CSS scroll animation (CMS blocks)

Select a CSS animation for CMS blocks of your Shopping Experiences. Assign the class 'twt-cms-animation' to the corresponding blocks.

CSS scroll animation (Headlines in CMS blocks)

Select a CSS animation for headlines in CMS blocks of your Shopping Experiences. Assign the class 'twt-cms-animation' to the corresponding blocks.

Shopping Experiences | ThemeWare® Knowledge Baseknowledge.themeware.design
ThemeWare® Knowledge Base => Shopping Experiences
Logo