Border
Border, border colours and glow of the topseller box, at rest and on hover.
Border
Field type:
Select
Available values:
• none
• Border colour
• Border with gradient
• Border with gradient (animated)
Example value:none
Path to the configuration:
Tab "Listing pages" => Block "Product box 'Topseller'" => Section "Border"
Technical name:twt-product-box-topseller-border
Select how top sellers (products with the Shopware option "Highlight product") are highlighted in the listing.
Border colour: Border in the border colour.
Border with gradient: Gradient from the border colour to the border colour @hover.
Border with gradient (animated): The gradient rotates around the box. If "Reduce motion" is active in the operating system, it stands still.
On hover, the border shows the border colour @hover.
The highlighting also applies if the top seller badge is hidden.
Border colour
Field type:
Colour picker
Example value:#e67e22
Path to the configuration:
Tab "Listing pages" => Block "Product box 'Topseller'" => Section "Border"
Technical name:twt-product-box-topseller-border-color
Colour of the border, the first colour of the gradient. Also colours the glow.
Border colour @hover
Field type:
Colour picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Listing pages" => Block "Product box 'Topseller'" => Section "Border"
Technical name:twt-product-box-topseller-border-color-hover
Colour of the border and the glow on hover. With "Border with gradient" it is also the second colour of the gradient.
Glow
Field type:
Select
Available values:
• no
• yes
Example value:no
Path to the configuration:
Tab "Listing pages" => Block "Product box 'Topseller'" => Section "Border"
Technical name:twt-product-box-topseller-glow
Lets the box glow in the border colour (coloured shadow), on hover in the border colour @hover. Replaces the drop shadow of the product box for top sellers.
Background
Background colour of its own for the topseller box, at rest and on hover.
Background
Field type:
Select
Available values:
• like product box
• Background colour
Example value:like product box
Path to the configuration:
Tab "Listing pages" => Block "Product box 'Topseller'" => Section "Background"
Technical name:twt-product-box-topseller-background
Gives top sellers their own background colour, on hover the background colour @hover.
Background colour
Field type:
Colour picker
Example value:#fef7f2
Path to the configuration:
Tab "Listing pages" => Block "Product box 'Topseller'" => Section "Background"
Technical name:twt-product-box-topseller-background-color
Background colour of the top seller box. Only applies to background "Background colour".
Background colour @hover
Field type:
Colour picker
Example value:#f0f7fa
Path to the configuration:
Tab "Listing pages" => Block "Product box 'Topseller'" => Section "Background"
Technical name:twt-product-box-topseller-background-color-hover
Background colour of the top seller box on hover. Only applies to background "Background colour".