Configuration
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 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.
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 • slide up (NEW) • slide down • fade in
Example value:
no effect (default)
Path to the configuration: Tab "Listing pages" => Block "Product box" => Section "Basic configuration"
Technical name:
twt-product-box-action-buy-btn-hover
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.
Wishlist button
Alignment
Field type: Select
Available values: • align top • align bottom (default)
Example value:
align bottom (default)
Path to the configuration: Tab "Listing pages" => Block "Product box" => Section "Wishlist button"
Technical name:
twt-product-box-wishlist-button-position
Icon colour
Field type: Color picker
Example value:
#4a545b
Path to the configuration: Tab "Listing pages" => Block "Product box" => Section "Wishlist 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 "Wishlist button"
Technical name:
twt-product-box-wishlist-button-background-color
Here you can configure the background colour for the wishlist button
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").
Corner type
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.
Position
Field type: Select
Available values: • below produt name • above product image
Example value:
below produt name
Path to the configuration: Tab "Listing pages" => Block "Product box" => Section "Product rating"
Technical name:
twt-product-box-product-review-rating-position
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
Last updated
