> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/manual/product-pages/buybox/configuration.md).

# Configuration

## Basic configuration

***

### Show short description

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Basic configuration"

**Technical name**:\
`twt-product-detail-short-description-show`

{% hint style="info" %}
The short description can be added via a custom field in the corresponding product.
{% endhint %}

## Price table

***

### Layout type

**Field type**:\
Select

**Available values**:\
• default\
• ThemeWare®

**Example value**:\
`ThemeWare®`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Price table"

**Technical name**:\
`twt-product-detail-prices-table-layout`

***

### Style

**Field type**:\
Select

**Available values**:\
• spacious (default)\
• compact

**Example value**:\
`compact`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Price table"

**Technical name**:\
`twt-product-detail-prices-table-style`

***

### Width

**Field type**:\
Select

**Available values**:\
• wide (default)\
• narrow

**Example value**:\
`narrow`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Price table"

**Technical name**:\
`twt-product-detail-prices-table-width`

***

### Text colour (Table head)

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Price table"

**Technical name**:\
`twt-product-detail-prices-table-head-color`

{% hint style="info" %}
This is used in the "ThemeWare®" layout type.
{% endhint %}

***

### Background colour (Table head)

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Price table"

**Technical name**:\
`twt-product-detail-prices-table-head-background-color`

{% hint style="info" %}
This is used in the "ThemeWare®" layout type.
{% endhint %}

## Buy widget (Quantity selection and buy button)

***

### Arrangement

**Field type**:\
Select

**Available values**:\
• next to each other (default)\
• below each other

**Example value**:\
`below each other`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Buy widget (Quantity selection and buy button)"

**Technical name**:\
`twt-product-detail-buy-widget-arrangement`

{% hint style="info" %}
**Note**: Determines how the quantity selection and the buy button are arranged.

In the arrangement "below each other" both take the full width. Express checkout buttons that other extensions add underneath (e.g. PayPal or Amazon Pay) then line up flush with them.
{% 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 "Product pages" => Block "Buy box" => Section "Buy button ("Add to shopping cart")"

**Technical name**:\
`twt-product-detail-btn-buy-layout`

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

***

### Icon position

**Field type**:\
Select

**Available values**:\
• left\
• right

**Example value**:\
`left`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Buy button ("Add to shopping cart")"

**Technical name**:\
`twt-product-detail-btn-buy-icon-position`

## Wishlist button ("Add to wishlist")

***

### Layout type

**Field type**:\
Select

**Available values**:\
• link (default)\
• button\
• button (outline)

**Example value**:\
`button`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Wishlist button ("Add to wishlist")"

**Technical name**:\
`twt-product-detail-wishlist-button-layout-type`

{% hint style="info" %}
**Note**: Determines how the wishlist button below the buy button is displayed.

In the "link" layout type it stays as delivered by Shopware.

To edit or translate the text please use the following snippet: listing.addToWishlist
{% endhint %}

***

### Button colour

**Field type**:\
Select

**Available values**:\
• Light\
• Secondary

**Example value**:\
`Secondary`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Wishlist button ("Add to wishlist")"

**Technical name**:\
`twt-product-detail-wishlist-button-color-type`

{% hint style="info" %}
**Note**: Determines which colour the wishlist button uses.

You configure both colours in the tab "Layout" => area "Buttons" => section "Colour configuration".

In the layout type "link" this configuration has no effect.
{% endhint %}

## Shipping link

***

### Show shipping link

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`show`

**Path to the configuration**:\
Tab "Product pages" => Block "Buy box" => Section "Shipping link"

**Technical name**:\
`twt-product-detail-shipping-link-show`

{% hint style="info" %}
**Note**: Shows a shipping link below the buy button which opens the shipping and payment information page configured in your shop as an overlay.

You edit the text via the snippet `twt.detail.shippingLink`.

For products flagged as free of shipping costs the link is hidden automatically. If no shipping and payment information page is configured, the text is shown without a link.
{% endhint %}

{% hint style="warning" %}
**Important**: If you state a threshold in the snippet ("Free shipping from 50 €"), it has to apply to all delivery countries of your shop. Shopware manages shipping costs per shipping method, currency and rule — a snippet cannot tell those apart.
{% endhint %}