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