Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Field type: Select
Available values: • Navigation (default) • Buttons
Example value:
Navigation (default)
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Basic configuration"
Technical name:
twt-pagination-style
Navigation Default layout with combined buttons.
Buttons Layout with separated buttons.
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-color
Field type: Color picker
Example value:
#bcc1c7
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-border-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-background-color
Field type: Color picker
Example value:
darken($sw-color-brand-primary, 15%)
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-hover-color
Field type: Color picker
Example value:
#bcc1c7
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-hover-border-color
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-hover-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-active-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-active-border-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-active-background-color
Field type: Color picker
Example value:
#798490
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-disabled-color
Field type: Color picker
Example value:
#bcc1c7
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-disabled-border-color
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Colour configuration"
Technical name:
twt-pagination-disabled-background-color
Field type: Select
Available values: • not rounded • rounded corners (default) • round corners
Example value:
rounded corners (default)
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Layout type: Navigation"
Technical name:
twt-pagination-corner-type
Field type: Select
Available values: • not rounded • rounded corners • round corners • Pill
Example value:
rounded corners
Path to the configuration: Tab "Content" => Block "Pagination" => Section "Layout type: Buttons"
Technical name:
twt-pagination-buttons-corner-type
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Field type: Select
Available values: • default • rounded corners • round corners
Example value:
round corners
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Basic configuration"
Technical name:
twt-product-badges-corner-type
rounded corners Uses the configuration "Border radius". (see "Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Field type: Number field
Example value:
16
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Basic configuration"
Technical name:
twt-product-badges-font-size
Field type: Select
Available values: • Show stock above/below the threshold • Always show stock
Example value:
Show stock above/below the threshold
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"
Technical name:
twt-product-badges-stock-badge-mode
Field type: Number field
Example value:
10
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"
Technical name:
twt-product-badges-stock-badge-threshold-lowstock
Field type: Number field
Example value:
500
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"
Technical name:
twt-product-badges-stock-badge-threshold-highstock
Field type: Select
Available values: • default • default, contrast • default, light • individual coloration
Example value:
default
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"
Technical name:
twt-product-badges-stock-badge-coloration
Field type: Color picker
Example value:
#f1c40f
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"
Technical name:
twt-product-badges-stock-badge-background-color
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"
Technical name:
twt-product-badges-stock-badge-icon-show
Field type: Select
Available values: • default • default, contrast • default, light • individual coloration
Example value:
default
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Sold badge"
Technical name:
twt-product-badges-sold-badge-coloration
Field type: Color picker
Example value:
#e74c3c
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Sold badge"
Technical name:
twt-product-badges-sold-badge-background-color
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Sold badge"
Technical name:
twt-product-badges-sold-badge-icon-show
Field type: Select
Available values: • default • default, contrast • default, light • individual coloration
Example value:
default
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Free shipping badge"
Technical name:
twt-product-badges-shipping-free-badge-coloration
Field type: Color picker
Example value:
#4aa3df
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Free shipping badge"
Technical name:
twt-product-badges-shipping-free-badge-background-color
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Free shipping badge"
Technical name:
twt-product-badges-shipping-free-badge-icon-show
Field type: Select
Available values: • % (default) • -25 % • 25 % saved • -35 € • 35 € saved
Example value:
% (default)
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Discount badge"
Technical name:
twt-product-badges-discount-badge-type
Field type: Select
Available values: • 0.12 (default) • 0.1 • 0
Example value:
0.12 (default)
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Discount badge"
Technical name:
twt-product-badges-discount-badge-round
Field type: Select
Available values: • default • default, contrast • default, light • individual coloration
Example value:
default
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Discount badge"
Technical name:
twt-product-badges-discount-badge-coloration
Field type: Color picker
Example value:
#e74c3c
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Discount badge"
Technical name:
twt-product-badges-discount-badge-background-color
Field type: Select
Available values: • default • default, contrast • default, light • individual coloration
Example value:
default
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Topseller badge"
Technical name:
twt-product-badges-topseller-badge-coloration
Field type: Color picker
Example value:
#f1c40f
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Topseller badge"
Technical name:
twt-product-badges-topseller-badge-background-color
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: Topseller badge"
Technical name:
twt-product-badges-topseller-badge-icon-show
Field type: Select
Available values: • default • default, contrast • default, light • individual coloration
Example value:
default
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: New badge"
Technical name:
twt-product-badges-new-badge-coloration
Field type: Color picker
Example value:
#2ecc71
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: New badge"
Technical name:
twt-product-badges-new-badge-background-color
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Content" => Block "Product badges" => Section "Badge: New badge"
Technical name:
twt-product-badges-new-badge-icon-show
Choose when the badge is shown: only around the threshold or always.
A badge is displayed for products with a lower stock level.
A badge is displayed for products with a higher stock level.
default: Default badge colour of Shopware 6 with white text colour.
default, light: Light shade of the default badge colour with a sufficiently high-contrast text colour.
default, contrast: Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.
individual coloration: Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
Note: This configuration relates to the coloration "individual coloration".
For sufficient contrast with white text, we recommend #a06b00.
To edit the icon please use the following snippet: twt.extension.stockBadge.lowStock.icon resp. twt.extension.stockBadge.highStock.icon
default: Default badge colour of Shopware 6 with white text colour.
default, light: Light shade of the default badge colour with a sufficiently high-contrast text colour.
default, contrast: Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.
individual coloration: Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
Note: This configuration relates to the coloration "individual coloration".
For sufficient contrast with white text, we recommend #e52427.
To edit the icon please use the following snippet: twt.extension.soldBadge.icon
default: Default badge colour of Shopware 6 with white text colour.
default, light: Light shade of the default badge colour with a sufficiently high-contrast text colour.
default, contrast: Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.
individual coloration: Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
Note: This configuration relates to the coloration "individual coloration".
For sufficient contrast with white text, we recommend #008199.
To edit the icon please use the following snippet: twt.extension.shippingFreeBadge.icon
Round the value either up or down (1.5 to 2).
default: Default badge colour of Shopware 6 with white text colour.
default, light: Light shade of the default badge colour with a sufficiently high-contrast text colour.
default, contrast: Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.
individual coloration: Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
Note: This configuration relates to the coloration "individual coloration".
For sufficient contrast with white text, we recommend #e52427.
default: Default badge colour of Shopware 6 with white text colour.
default, light: Light shade of the default badge colour with a sufficiently high-contrast text colour.
default, contrast: Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.
individual coloration: Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
Note: This configuration relates to the coloration "individual coloration".
For sufficient contrast with white text, we recommend #a06b00.
To edit the icon please use the following snippet: twt.extension.topsellerBadge.icon
default: Default badge colour of Shopware 6 with white text colour.
default, light: Light shade of the default badge colour with a sufficiently high-contrast text colour.
default, contrast: Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.
individual coloration: Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
Note: This configuration relates to the coloration "individual coloration".
For sufficient contrast with white text, we recommend #00892d.
To edit the icon please use the following snippet: twt.extension.newBadge.icon
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Content" => Block "Offcanvas navigation" => Section "Currencies menu"
Technical name:
twt-offcanvas-nav-currencies-menu-text-show
Note: Below 320px window width only the icon is displayed.
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Content" => Block "Offcanvas navigation" => Section "Language menu"
Technical name:
twt-offcanvas-nav-languages-menu-text-show
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Content" => Block "Offcanvas navigation" => Section "Service menu [Pro Edition]"
Technical name:
twt-offcanvas-nav-service-menu-show
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Content" => Block "Offcanvas navigation" => Section "Service menu [Pro Edition]"
Technical name:
twt-offcanvas-nav-service-menu-icon-show
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Content" => Block "Offcanvas navigation" => Section "Service menu [Pro Edition]"
Technical name:
twt-offcanvas-nav-service-menu-text-show
Field type: Select
Available values: • default • Header colours • individual colours (coming soon...)
Example value:
default
Path to the configuration: Tab "Content" => Block "Offcanvas navigation" => Section "Dropdowns"
Technical name:
twt-offcanvas-nav-dropdown-coloration
Note: Below 320px window width only the icon is displayed.
Shopware has removed the service menu in the header with version 6.5 and provides this only as "Footer Service Navigation". With this configuration, you can display the "Footer Service Navigation" in the offcanvas navigation again.
The navigation itself must be assigned in the Sales Channel.
To edit or translate the label please use the following snippet: header.indexLinkService
Note: Below 320px window width only the icon is displayed.
Note: Below 320px window width only the icon is displayed.
Field type: Select
Available values: • don't show • show (default)
Example value:
don't show
Path to the configuration: Tab "Content" => Block "Breadcrumb"
Technical name:
twt-breadcrumb-show-home
Field type: Select
Available values: • don't show • show (default)
Example value:
show (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb"
Technical name:
twt-breadcrumb-show-cms-shop-pages
Field type: Select
Available values: • don't show • show (default)
Example value:
show (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb"
Technical name:
twt-breadcrumb-show-cms-landing-pages
Field type: Select
Available values: • don't show • show (default)
Example value:
show (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb"
Technical name:
twt-breadcrumb-show-cms-category-pages
Field type: Select
Available values: • don't show • show (default)
Example value:
show (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb"
Technical name:
twt-breadcrumb-show-cms-product-pages
Field type: Select
Available values: • Links (default) • Links with background colour • Buttons
Example value:
Links (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Basic configuration"
Technical name:
twt-breadcrumb-style
Field type: Select
Available values: • Chevron (default) • Double chevron • Arrow • Slash • Dot • Pipe • Dash
Example value:
Chevron (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Basic configuration"
Technical name:
twt-breadcrumb-separator-style
Field type: Select
Available values: • don't show (default) • Show home icon • Show home link • Show text ("You are here:") • Show text and home icon • Show text and home link
Example value:
don't show (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Basic configuration"
Technical name:
twt-breadcrumb-further-information
Field type: Color picker
Example value:
#444444
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-text-color
Field type: Color picker
Example value:
#444444
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-link-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-link-active-color
Field type: Color picker
Example value:
#444444
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-divider-color
Field type: Color picker
Example value:
#bcc1c7
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-buttons-border-color
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-buttons-background-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-buttons-border-color-active
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-buttons-background-color-active
Field type: Select
Available values: • no (default) • yes • on hover only • at rest only
Example value:
no (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Typography"
Technical name:
twt-breadcrumb-links-underline
Field type: Select
Available values: • no container styling (default) • ThemeWare® CMS styling • Custom container styling
Example value:
no container styling (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-container-styling
Field type: Select
Available values: • not rounded • rounded corners (default) • round corners
Example value:
rounded corners (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-container-corner-type
Field type: Select
Available values: • Container-Max-Width (Full-width-boxed) • 100% (Full-width)
Example value:
Container-Max-Width (Full-width-boxed)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-width
Field type: Number field
Example value:
10
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-margin-top
Field type: Number field
Example value:
10
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-margin-bottom
Field type: Number field
Example value:
1
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-padding-top-bottom
Field type: Number field
Example value:
1
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-padding-left-right
Field type: Select
Available values: • align left • align center • align right
Example value:
align left
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-justify-content
Field type: Color picker
Example value:
rgba(0, 0, 0, 0)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container → Container styling: Custom container styling"
Technical name:
twt-breadcrumb-border-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container → Container styling: Custom container styling"
Technical name:
twt-breadcrumb-border-top-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container → Container styling: Custom container styling"
Technical name:
twt-breadcrumb-border-bottom-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container → Container styling: Custom container styling"
Technical name:
twt-breadcrumb-background-color
Field type: Select
Available values: • not rounded • rounded corners • round corners
Example value:
rounded corners
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Layout type: Links in coloured box"
Technical name:
twt-breadcrumb-list-corner-type
Field type: Color picker
Example value:
#bcc1c7
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Layout type: Links in coloured box"
Technical name:
twt-breadcrumb-border-color-list
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Layout type: Links in coloured box"
Technical name:
twt-breadcrumb-background-color-list
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Layout type: Buttons"
Technical name:
twt-breadcrumb-buttons-separator-show
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Layout type: Buttons"
Technical name:
twt-breadcrumb-buttons-border-show
Field type: Select
Available values: • not rounded • rounded corners • round corners
Example value:
rounded corners
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Layout type: Buttons"
Technical name:
twt-breadcrumb-buttons-corner-type
Links Links and separators.
Links with background colour Links and separators with a coloured background.
Buttons Links as buttons, without separators.
To edit or translate the text "You are here:" please use the following snippet: twt.breadcrumb.furtherInformation
To edit or translate the text "Home link" please use the following snippet: general.homeLink
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Underline breadcrumb links so that clickable entries are clearly differentiated from non-clickable structural pages, thus improving accessibility.
Note: Only applies to layout types "Links" and "Links in coloured box". Button styles are not affected.
This configuration can be overwritten by the accessibility configuration "Underline links" in the Tab "Others" => Block "Accessibility" => Section "Layout".
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Set the sizing mode of the breadcrumb container on CMS pages for the basic layout "Full-width-boxed".
Set the margin top for the breadcrumb container on CMS pages.
Set the margin bottom for the breadcrumb container on CMS pages.
Set the padding top/bottom for the breadcrumb container on CMS pages.
If you use a background colour, '15' is a reasonable value.
Set the padding left/right for the breadcrumb container on CMS pages.
If you use a background colour, '20' is a reasonable value.
Select the desired horizontal alignment.
left Items are positioned at the beginning of the container.
right Items are positioned at the end of the container.
center Items are positioned at the center of the container.
space-between Items are positioned with space between them.
space-around Items are positioned with space before, between, and after them.
Set the border colour for the breadcrumb container.
Set the top border colour for the breadcrumb container.
Only used if this colour value differs from the border colour.
Set the bottom border colour for the breadcrumb container.
Only used if this colour value differs from the border colour.
Set the background colour for the breadcrumb container.
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Set the border colour for the breadcrumb.
Used for layout types with background colour.
Set the background colour for the breadcrumb.
Used for layout types with background colour.
Select whether the separator icon should be displayed in the breadcrumb.
Select whether a border should be displayed around the buttons.
You can configure the colour of the border below.
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Field type: Select
Available values: • Rectangle (default) • Square/Circle
Example value:
Rectangle (default)
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:
twt-base-slider-controls-style
In the "Shopping Experiences" tab, you can individually configure various sliders.
Field type: Select
Available values: • not rounded • rounded corners (default) • round corners
Example value:
rounded corners (default)
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:
twt-base-slider-controls-corner-type
Field type: Select
Available values: • no effect (default) • fade in
Example value:
fade in
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:
twt-base-slider-controls-hover-type
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:
twt-base-slider-controls-color
Field type: Color picker
Example value:
transparent
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:
twt-base-slider-controls-border-color
Field type: Color picker
Example value:
transparent
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:
twt-base-slider-controls-background-color
Field type: Color picker
Example value:
$sw-color-brand-secondary
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:
twt-base-slider-controls-color-hover
Field type: Color picker
Example value:
darken($twt-base-slider-controls-border-color, 10%)
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:
twt-base-slider-controls-border-color-hover
Field type: Color picker
Example value:
darken($twt-base-slider-controls-background-color, 7.5%)
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:
twt-base-slider-controls-background-color-hover
Field type: Select
Available values: • Rectangle • Square/Circle (default)
Example value:
Square/Circle (default)
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:
twt-base-slider-navigation-dots-style
Field type: Select
Available values: • not rounded • rounded corners • round corners (default)
Example value:
round corners (default)
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:
twt-base-slider-navigation-dots-type
Field type: Select
Available values: • default • scale up • stroke • fill in • dot stroke
Example value:
default
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:
twt-base-slider-navigation-dots-hover-type
Field type: Select
Available values: • align left • align right • align center (default)
Example value:
align center (default)
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:
twt-base-slider-navigation-dots-alignment
Field type: Color picker
Example value:
#bcc1c7
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:
twt-base-slider-navigation-dots-background-color
Field type: Color picker
Example value:
#798490
Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:
twt-base-slider-navigation-dots-background-color-active
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Field type: Select
Available values: • Shopware default • ThemeWare®
Example value:
Shopware default
Path to the configuration: Tab "Content" => Block "Offcanvas (Cart & navigation)"
Technical name:
twt-offcanvas-layout-type
Select how offcanves elements (e.g. cart od navigation) are displayed.
In the "Shopware" layout type offcanves elements behave as shipped.
In the "ThemeWare®" layout type, the elements are given, for example, an margin around and rounded corners.
Field type: Number field
Example value:
10
Path to the configuration: Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Basic configuration"
Technical name:
twt-offcanvas-margin
Field type: Number field
Example value:
3
Path to the configuration: Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Basic configuration"
Technical name:
twt-offcanvas-border-radius
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.5)
Path to the configuration: Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Colour configuration"
Technical name:
twt-offcanvas-backdrop-color
Field type: Number field
Example value:
0
Path to the configuration: Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Colour configuration"
Technical name:
twt-offcanvas-backdrop-effect-blur
Select the margin around offcanvas elements.
Note: This setting is only applied if the "ThemeWare®" display mode is selected.
Select the border radius of offcanvas elements.
Note: This setting is only applied if the "ThemeWare®" display mode is selected.
Select the desired background colour of the backdrop.
Enter the desired strength for the blur effect of the overlay (backdrop).
Field type: Select
Available values: • don't show • show (default)
Example value:
show (default)
Path to the configuration: Tab "Content" => Block "Cookie permission"
Technical name:
twt-cookie-permission-show
Field type: Select
Available values: • Banner: bottom (default) • Banner: top • Card: bottom right • Modal: bottom (with overlay) • Modal: bottom right (with overlay) • Modal: centered (with overlay) • Modal: top (with overlay)
Example value:
Banner: bottom (default)
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Basic configuration"
Technical name:
twt-cookie-permission-position
Field type: Number field
Example value:
10
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Basic configuration"
Technical name:
twt-cookie-permission-padding
Field type: Text field
Example value:
0 0 30px
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Basic configuration"
Technical name:
twt-cookie-permission-box-shadow
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.2)
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Basic configuration"
Technical name:
twt-cookie-permission-box-shadow-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.5)
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Basic configuration"
Technical name:
twt-cookie-permission-overlay-color
Field type: Number field
Example value:
0
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Basic configuration"
Technical name:
twt-cookie-permission-overlay-effect-blur
Field type: Number field
Example value:
40
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Basic configuration"
Technical name:
twt-cookie-permission-top
Field type: Number field
Example value:
25
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Basic configuration"
Technical name:
twt-cookie-permission-left
Field type: Number field
Example value:
40
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Basic configuration"
Technical name:
twt-cookie-permission-bottom
Field type: Number field
Example value:
25
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Basic configuration"
Technical name:
twt-cookie-permission-right
Field type: Select
Available values: • Container-Max-Width (Full-width-boxed) • 100% (Full-width)
Example value:
Container-Max-Width (Full-width-boxed)
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Layout type: 'Banner: bottom (default)' and 'Banner: top'"
Technical name:
twt-cookie-permission-width
Field type: Text field
Example value:
260
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Layout type: 'Card: bottom right'"
Technical name:
twt-cookie-permission-max-width
Field type: Color picker
Example value:
#555555
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Colour configuration"
Technical name:
twt-cookie-permission-color
Field type: Color picker
Example value:
#cccccc
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Colour configuration"
Technical name:
twt-cookie-permission-border-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Colour configuration"
Technical name:
twt-cookie-permission-background-color
Field type: Color picker
Example value:
$sw-border-color
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Colour configuration"
Technical name:
twt-cookie-permission-deny-btn-background-color
Field type: Color picker
Example value:
$sw-color-brand-secondary
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Colour configuration"
Technical name:
twt-cookie-permission-configuration-btn-background-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Cookie permission" => Section "Colour configuration"
Technical name:
twt-cookie-permission-accept-all-btn-background-color
CSS box-shadow Property (e.g. '0 0 30px').
Select the desired background colour of the overlay (backdrop).
Layout type:
Modal with overlay
Enter the desired value for the blur effect of the overlay (backdrop).
Layout type:
Modal with overlay
Layout type:
Modal: top (with overlay)
Currently not in use.
Layout type:
Card: bottom right
Modal: bottom (with overlay)
Modal: bottom right (with overlay)
Layout type:
Card: bottom right
Modal: bottom right (with overlay)
Select the sizing mode of the "Cookie permission".
Layout type:
Banner: bottom (default)
Banner: top
Layout type:
Card: bottom right
The "Deny" button should not use a striking color.
Field type: Select
Available values: • not rounded • rounded corners (default) • round corners
Example value:
rounded corners (default)
Path to the configuration: Tab "Content" => Block "Scroll up button" => Section "Basic configuration"
Technical name:
twt-scroll-up-corner-type
Field type: Text field
Example value:
1px 2px 6px
Path to the configuration: Tab "Content" => Block "Scroll up button" => Section "Basic configuration"
Technical name:
twt-scroll-up-box-shadow
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.3)
Path to the configuration: Tab "Content" => Block "Scroll up button" => Section "Basic configuration"
Technical name:
twt-scroll-up-box-shadow-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Content" => Block "Scroll up button" => Section "Colour configuration"
Technical name:
twt-scroll-up-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Scroll up button" => Section "Colour configuration"
Technical name:
twt-scroll-up-border-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Scroll up button" => Section "Colour configuration"
Technical name:
twt-scroll-up-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Content" => Block "Scroll up button" => Section "Colour configuration"
Technical name:
twt-scroll-up-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Scroll up button" => Section "Colour configuration"
Technical name:
twt-scroll-up-border-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Content" => Block "Scroll up button" => Section "Colour configuration"
Technical name:
twt-scroll-up-background-color-hover
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.