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.
Arrow navigation (Individual styling)
Layout type
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
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.
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.