# 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 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`

{% hint style="info" %}
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.
{% endhint %}

***

### 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`

{% hint style="info" %}
Select the viewport from which the product description or ThemeWare® short description should be displayed.

This applies to the 'Standard' layout type.
{% endhint %}

***

### 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`

{% hint style="info" %}
A short description will be shown instead of the description.

The short description can be added via a custom field in the corresponding product.
{% endhint %}

***

### 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`

{% hint style="info" %}
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.
{% endhint %}

***

### 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`

{% hint style="info" %}
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.
{% endhint %}

***

### 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`

{% hint style="info" %}
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.
{% endhint %}

***

### 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`

{% hint style="info" %}
Background colour of the product box.
{% endhint %}

***

### 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`

{% hint style="info" %}
Background colour of the product box when hovering.
{% endhint %}

## 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`

{% hint style="info" %}
**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.
{% endhint %}

***

### 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`

{% hint style="info" %}
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
{% endhint %}

***

### 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`

{% hint style="info" %}
**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.
{% endhint %}

***

### 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`

{% hint style="info" %}
This configuration field currently no longer has a function. We are checking whether this will be adapted or removed with an upcoming update.
{% endhint %}

***

### 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`

{% hint style="info" %}
Background colour of product images in product boxes of listings.
{% endhint %}

## 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`

{% hint style="info" %}
Here you can configure the icon colour for the wishlist button
{% endhint %}

***

### 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`

{% hint style="info" %}
Here you can configure the background colour for the wishlist button
{% endhint %}

## 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`

{% hint style="info" %}
**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").
{% endhint %}

***

### 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`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}

***

### 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`

{% hint style="info" %}
**per layout type:**\
Use separate configuration fields for all 3 layout types in the "Product box (Layout type...)" sections.
{% endhint %}

## 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`

{% hint style="info" %}
To edit or translate the text please use the following snippet: listing.boxAddProduct
{% endhint %}

***

### 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`