Layout type
Field type:
Select
Available values:
• Off (default)
• Peek
• Overflow
• Peek and overflow
Example value:Off (default)
Path to the configuration:
Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Design"
Technical name:twt-product-slider-overflow-design
Controls whether the neighbouring products are partially visible next to the product slider.
Off: Shopware standard, the products end at the container edge.
Peek: The neighbouring products are partially visible inside the container.
Overflow: The neighbouring products extend beyond the container.
Peek and overflow: Both combined.
Tip: You can set a different layout type on individual CMS blocks using a CSS class. More on this under Product slider with overflow.
Cropped products
Field type:
Select
Available values:
• Normal
• Dimmed
Example value:Dimmed
Path to the configuration:
Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Basic configuration"
Technical name:twt-product-slider-overflow-neighbour
Only applies to layout types with peek or overflow.
Dimmed: The cropped neighbouring products are shown with reduced opacity and are not clickable. As soon as a product is fully visible, it becomes clickable again. Keyboard navigation moves the focused product into view.
Crop width @Desktop (>=992px)
Field type:
Number field
Example value:30
Path to the configuration:
Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Basic configuration"
Technical name:twt-product-slider-overflow-size
Width of the visible part of the neighbouring products, in pixels. Only applies to layout types with peek.
Default: 30
Crop width @Mobile (<992px)
Field type:
Number field
Example value:20
Path to the configuration:
Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Basic configuration"
Technical name:twt-product-slider-overflow-size-mobile
Width of the visible part of the neighbouring products on smaller viewports, in pixels.
Default: 20
Spacing between products
Field type:
Number field
Example value:30
Path to the configuration:
Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Basic configuration"
Technical name:twt-product-slider-gutter
Space between the product boxes in the product slider, in pixels. Applies to all viewports.
Default: 30
Vertical position (Navigation arrows)
Field type:
Select
Available values:
• 30 %
• 35 %
• 40 %
• 45 %
• 50 % (default)
Example value:50 % (default)
Path to the configuration:
Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Basic configuration"
Technical name:twt-product-slider-controls-vertical-position
Height of the navigation arrows, measured from the top of the product box. A smaller value moves them up towards the middle of the product image, e.g. when the text below the image takes up a lot of space.
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
In the tab "Content" you can configure all sliders globally, see Sliders.
Arrow navigation (Individual styling)
Layout type
Field type:
Select
Available values:
• Rectangle (default)
• Square/Circle
• Arrow (no area)
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
Corner type
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
rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners
Uses a predefined radius for round corners.
Shadow
Field type:
Select
Available values:
• none (default)
• subtle
• strong
Example value:none (default)
Path to the configuration:
Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Arrow navigation (Individual styling)"
Technical name:twt-product-slider-controls-shadow
Shadow of the navigation arrows, one step stronger on hover. Has no effect with the layout type "Arrow (no area)".
Hover effect
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
Text colour
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
Border colour
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
Background colour
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
Text colour @hover
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
Border colour @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
Background colour @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
Product image
Background colour
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
Background colour of procuct images in product boxes of shopping experience sliders.