Basic configuration
Layout type
Field type:
Select
Available values:
• Border colour (default)
• Drop shadow
Example value:Border colour (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-layout-type
Hover effect
Field type:
Select
Available values:
• default
• Scale up
• Slide up
Example value:default
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-hover-type
Apply hover effect to sliders
Field type:
Select
Available values:
• no
• yes
Example value:no
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-hover-apply
Text alignment
Field type:
Select
Available values:
• align left
• align center
• align right
Example value:align center
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-text-align
Show product description
Field type:
Select
Available values:
• don't show
• show (default)
Example value:show (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Content"
Technical name:twt-product-box-description-show
Select whether or not the abbreviated product description from Shopware should be displayed. This applies to the 'Standard' layout type.
You can also specify the viewport size at which the product description should be displayed and whether the ThemeWare® short description should be used instead.
Show product description from...
Field type:
Select
Available values:
• always show (default)
• don't show
• Phone (landscape) (≥576px)
• Tablet (portrait) (≥768px)
• Tablet (landscape) (≥992px)
• Desktop (≥1200px)
• Desktop (≥1400px)
Example value:Phone (landscape) (≥576px)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Content"
Technical name:twt-product-box-description-breakpoint
Select the viewport from which the product description or ThemeWare® short description should be displayed.
This applies to the 'Standard' layout type.
Use short description
Field type:
Select
Available values:
• don't show
• show
Example value:don't show
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Content"
Technical name:twt-product-box-short-description-show
A short description will be shown instead of the description.
The short description can be added via a custom field in the corresponding product.
Show variant characteristics
Field type:
Select
Available values:
• don't show
• show (default)
Example value:show (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-variant-characteristics-show
Show product number
Field type:
Select
Available values:
• don't show
• show
• per layout type
Example value:don't show
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-ordernumber-show
Show product number (or order number) in the product box.
To edit or translate the label please use the following snippet: twt.listing.ordernumberLabel
per layout type:
Use separate configuration fields for all 3 layout types in the "Product box (Layout type...)" sections.
Show manufacturer
Field type:
Select
Available values:
• don't show
• show
• per layout type
Example value:don't show
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-manufacturer-show
Show manufacturer (name) in the product box.
To edit or translate the label please use the following snippet: twt.listing.manufacturerLabel
per layout type:
Use separate configuration fields for all 3 layout types in the "Product box (Layout type...)" sections.
Slot above the product name
Field type:
Select
Available values:
• don't show (default)
• Product number
• Teaser text (custom field)
• Manufacturer
• Variant count
Example value:don't show (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Content"
Technical name:twt-product-box-slot-above
Shows one additional element above the product name.
Product number: the product number.
Teaser text: a short free text you maintain per product (custom field "Teaser text").
Manufacturer: the manufacturer name.
Variant count: a hint like "+ 7 variations" on parent products with variants.
Works independently of the "Show product number" / "Show manufacturer" options.
To edit or translate these texts please use the following snippets: twt.listing.ordernumberPrefix (product number prefix), twt.listing.variantCount (variant count).
Slot below the product name
Field type:
Select
Available values:
• don't show (default)
• Product number
• Teaser text (custom field)
• Manufacturer
• Variant count
Example value:don't show (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Content"
Technical name:twt-product-box-slot-below
Shows one additional element below the product name. Same sources as "Slot above the product name".
Show price unit
Field type:
Select
Available values:
• don't show
• show (default)
Example value:show (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-price-unit-show
With this configuration you can hide the price per unit (Basic unit) if it is not relevant for your shop.
Note: You can find more information about the basic price calculation in the Shopware documentation.
Show cheapest price
Field type:
Select
Available values:
• don't show
• show (default)
Example value:show (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-cheapest-price-show
Show list price
Field type:
Select
Available values:
• don't show
• show (default)
Example value:show (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-list-price-price-show
Show list price percentage
Field type:
Select
Available values:
• don't show
• show (default)
Example value:show (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-list-price-percentage-show
Show action buttons (Buy button / Details button)
Field type:
Select
Available values:
• don't show
• show (default)
Example value:show (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:twt-product-box-action-buy-btn-show
Hover effect (Buy button / Details button)
Field type:
Select
Available values:
• no effect (default)
• slide up (no longer recommended)
• slide up (NEW)
• slide down
• fade in
Example value:no effect (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Action buttons (Buy / Details button)"
Technical name:twt-product-box-action-buy-btn-hover
Note: No effect on touch devices – there the action buttons stay permanently visible.
Layout and responsive improvements
Compact product boxes
Field type:
Select
Available values:
• no
• yes
Example value:yes
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Layout and responsive improvements"
Technical name:twt-product-box-compact-layout
Use this configuration to display product boxes more compactly than usual.
Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.
Colour configuration
Border colour
Field type:
Color picker
Example value:#cccccc
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Colour configuration"
Technical name:twt-product-box-border-color
Border colour @hover
Field type:
Color picker
Example value:#008490
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Colour configuration"
Technical name:twt-product-box-border-color-hover
Background colour
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Colour configuration"
Technical name:twt-product-box-background-color
Background colour of the product box.
Background colour @hover
Field type:
Color picker
Example value:#f7f7f7
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Colour configuration"
Technical name:twt-product-box-background-color-hover
Background colour of the product box when hovering.
Drop shadow
Drop shadow
Field type:
Select
Available values:
• no shadow (default)
• individual shadow
• Small shadow (Bootstrap)
• Regular shadow (Bootstrap)
• Larger shadow (Bootstrap)
• Level 1 (ThemeWare®)
• Level 2 (ThemeWare®)
• Level 3 (ThemeWare®)
• Level 4 (ThemeWare®)
• Level 5 (ThemeWare®)
Example value:Level 1 (ThemeWare®)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Drop shadow"
Technical name:twt-product-box-box-shadow-type
Drop shadow (individual)
Field type:
Text field
Example value:0 5px 10px
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Drop shadow"
Technical name:twt-product-box-box-shadow
Shadow colour (individual)
Field type:
Color picker
Example value:rgba(0, 0, 0, 0.075)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Drop shadow"
Technical name:twt-product-box-box-shadow-color
Drop shadow @hover
Field type:
Select
Available values:
• no shadow (default)
• individual shadow
• Small shadow (Bootstrap)
• Regular shadow (Bootstrap)
• Larger shadow (Bootstrap)
• Level 1 (ThemeWare®)
• Level 2 (ThemeWare®)
• Level 3 (ThemeWare®)
• Level 4 (ThemeWare®)
• Level 5 (ThemeWare®)
Example value:Level 3 (ThemeWare®)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Drop shadow"
Technical name:twt-product-box-box-shadow-type-hover
Drop shadow @hover (individual)
Field type:
Text field
Example value:0 10px 20px
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Drop shadow"
Technical name:twt-product-box-box-shadow-hover
Shadow colour @hover (individual)
Field type:
Color picker
Example value:rgba(0, 0, 0, 0.15)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Drop shadow"
Technical name:twt-product-box-box-shadow-color-hover
Product image
Layout type
Field type:
Select
Available values:
• default
• full-width
Example value:default
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product image"
Technical name:twt-product-box-image-layout-type
Hover effect
Field type:
Select
Available values:
• no effect
• reduce opacity
• scale image
• crossfade images (Custom field)
Example value:scale image
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product image"
Technical name:twt-product-box-image-hover-type
crossfade images (Custom field)
If active, the cover media is replaced by the ThemeWare® custom field "Hover image" on mouseover.
Note: Extensions that modify the product image can affect the option "crossfade imagse". In this case, just use a different hover effect.
Height
Field type:
Text field
Example value:200
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product image"
Technical name:twt-product-box-image-height
Changes the image height for CMS elements with the layout type "Standard" and "Minimal content".
The layout type "Big image" already has a larger image height of 332px.
default: 200
Display mode
Field type:
Select
Available values:
• default
• cover
• contain
Example value:default
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product image"
Technical name:twt-product-box-image-object-fit
none
The image is not resized.
cover
The image is sized to maintain its aspect ratio while filling the element's entire content box.
contain
The image is sized to maintain its aspect ratio while fitting within the element's content box. The object will be clipped to fit.
Image alignment
Field type:
Select
Available values:
• align top
• align center
• align bottom
Example value:align center
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product image"
Technical name:twt-product-box-image-align-items
This configuration field currently no longer has a function. We are checking whether this will be adapted or removed with an upcoming update.
Background colour
Field type:
Color picker
Example value:rgba(0, 0, 0, 0)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product image"
Technical name:twt-product-box-image-background-color
Background colour of product images in product boxes of listings.
Icon buttons (Wishlist / Quickview button)
Icon colour
Field type:
Color picker
Example value:#4a545b
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Icon buttons (Wishlist / Quickview button)"
Technical name:twt-product-box-wishlist-button-color
Here you can configure the icon colour for the wishlist button
Background colour
Field type:
Color picker
Example value:#f9f9f9
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Icon buttons (Wishlist / Quickview button)"
Technical name:twt-product-box-wishlist-button-background-color
Here you can configure the background colour for the wishlist button
Hover effect
Field type:
Select
Available values:
• always visible (default)
• reveal on hover
Example value:always visible (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Icon buttons (Wishlist / Quickview button)"
Technical name:twt-product-box-icon-buttons-hover
Applies together to the wishlist and Quickview buttons on the product image.
When enabled, the buttons stay hidden and fade / slide in when the product box is hovered (the Quickview button follows the wishlist button with a slight delay).
Note: No effect on touch devices – there the buttons stay permanently visible.
Wishlist button
Position
Field type:
Select
Available values:
• top right
• bottom right (default)
• bottom left
Example value:bottom right (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Wishlist button"
Technical name:twt-product-box-wishlist-button-position
Determines the corner of the image the wishlist button is anchored to.
Note: "top left" is not available, as the product badges (e.g. "New", discount) sit there.
Quickview button
Position
Field type:
Select
Available values:
• docked to the wishlist button (default)
• top right
• bottom right
• bottom left
Example value:docked to the wishlist button (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Quickview button"
Technical name:twt-product-box-quickview-button-position
docked to the wishlist button (default)
Follows the wishlist button to its corner and stacks with it on the same side. If the wishlist is disabled in the Shopware settings, the Quickview button takes its place.
top right / bottom right / bottom left
Standalone in the respective corner of the image.
Note: The Quickview feature must be enabled first (see the "Beta" settings).
Product rating
Show product rating
Field type:
Select
Available values:
• don't show
• show (default)
• always show product rating
Example value:show (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product rating"
Technical name:twt-product-box-product-review-rating-show
Note: This configuration refers to the display in the product box.
The product rating can also be completely deactivated in the Shopware settings ("Settings" > "Shop" > "Products" > "Show reviews").
Placement
Field type:
Select
Available values:
• in the box (default)
• on the product image
Example value:in the box (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product rating"
Technical name:twt-product-box-product-review-rating-placement
Determines the zone the rating appears in.
in the box
In the text area of the product box – the exact spot is chosen via "Position (in the box)".
on the product image
As an overlay on the image – the corner is chosen via "Position (on product image)".
Position (in the box)
Field type:
Select
Available values:
• above the product name (default)
• below the product name
Example value:above the product name (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product rating"
Technical name:twt-product-box-product-review-rating-box-position
Only effective when the rating is placed in the box (see "Placement").
Position (on product image)
Field type:
Select
Available values:
• top right
• bottom right
• bottom left
• bottom center (default)
Example value:bottom center (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product rating"
Technical name:twt-product-box-product-review-rating-image-position
Only effective when the rating is placed on the product image (see "Placement").
Determines the corner/edge of the image the rating is anchored to.
Note: "top right" / "bottom right" / "bottom left" can overlap the wishlist and Quickview buttons (see "Position" in the "Wishlist button" section).
Content
Field type:
Select
Available values:
• simple (default)
• detailed
• Number
Example value:simple (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product rating"
Technical name:twt-product-box-product-review-rating-style
simple
Stars only.
detailed
Stars + number of reviews in brackets (shown as soon as the review count is available).
Number
Compact number instead of stars (e.g. "3.4 ★"). The decimal separator follows the storefront language.
Layout type (in the box)
Field type:
Select
Available values:
• Standard
• Decorated
Example value:Standard
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product rating"
Technical name:twt-product-box-product-review-rating-layout-type
Visual style when the rating is placed above or below the product name.
Standard
Plain stars.
Decorated
Stars flanked by lines (follows the text alignment).
Note: On the product image the "Layout type (on product image)" applies instead.
Layout type (on product image)
Field type:
Select
Available values:
• Box
• Clean
Example value:Box
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product rating"
Technical name:twt-product-box-product-review-rating-layout-type-image
Only effective when the rating is placed on the product image (see "Position").
Box
Background + shadow (better legibility on the image).
Clean
No background/shadow – the stars sit directly on the image.
Corner type (on product image)
Field type:
Select
Available values:
• not rounded
• rounded corners
• round corners (Pill)
Example value:rounded corners
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product rating"
Technical name:twt-product-box-product-review-rating-corner-type
rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners
Uses a predefined radius for round corners.
Note: Only effective on the product image with layout type "Box".
Hover effect (on product image)
Field type:
Select
Available values:
• always visible (default)
• reveal on hover
• hide on hover
Example value:always visible (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product rating"
Technical name:twt-product-box-product-review-rating-image-hover
Only effective when the rating is placed on the product image (see "Placement").
reveal on hover
The rating stays hidden and fades / slides in when the product box is hovered.
hide on hover
The rating is visible and fades / slides out when the product box is hovered – useful to clear the image for the buttons appearing there.
The slide direction follows the alignment.
Note: No effect on touch devices – there the rating stays permanently visible.
Delivery information
Show delivery information
Field type:
Select
Available values:
• don't show
• show
Example value:show
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Delivery information"
Technical name:twt-product-box-delivery-information-show
Shows the availability of a product in the product box, above the price: a status dot plus the delivery time maintained on the product.
Four states are covered: available (green), pre-order and ready for shipping in x days (yellow) as well as currently not available (red). Products without a delivery time show nothing.
To edit or translate the texts please use the following snippets: wishlist.deliveryTimeAvailable, wishlist.deliveryShipping, wishlist.deliveryTimeRestock, wishlist.currentlyNotAvailable.
Layout type
Field type:
Select
Available values:
• inherit - like the product page
• Text
• Label
• Badge
• Chip
Example value:inherit - like the product page
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Delivery information"
Technical name:twt-product-box-delivery-information-layout-type
Determines how the delivery information appears in the product box.
inherit - like the product page
Uses whatever is configured on the product page, so both surfaces stay in sync.
Text
A plain line with the status dot – the familiar Shopware look, but in the ThemeWare® group.
Label
The same line on a surface tinted in the status colour (green / yellow / red).
Badge
A rounded badge without the dot – inherits the corner style and font size of the product badges.
Chip
The dot sits in a tinted circle with the text next to it; hovering the product box grows the circle behind the text into a pill.
Product name
Number of lines
Field type:
Select
Available values:
• 1 line
• 2 lines (default)
• 3 lines
• 4 lines
• per layout type
Example value:2 lines (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Product name"
Technical name:twt-product-box-product-name-line-clamp
per layout type:
Use separate configuration fields for all 3 layout types in the "Product box (Layout type...)" sections.
Buy button ("Add to shopping cart")
Layout type
Field type:
Select
Available values:
• Text (default)
• Text & Icon
Example value:Text (default)
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Buy button ("Add to shopping cart")"
Technical name:twt-product-box-btn-buy-layout
To edit or translate the text please use the following snippet: listing.boxAddProduct
Icon position
Field type:
Select
Available values:
• left
• right
Example value:left
Path to the configuration:
Tab "Listing pages" => Block "Product box" => Section "Buy button ("Add to shopping cart")"
Technical name:twt-product-box-btn-buy-icon-position