# Configuration

## Basic configuration

***

### Corner type

**Field type**:\
Select

**Available values**:\
• default\
• rounded corners\
• round corners

**Example value**:\
`round corners`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Basic configuration"

**Technical name**:\
`twt-product-badges-corner-type`

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

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

***

### Font size

**Field type**:\
Number field

**Example value**:\
`16`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Basic configuration"

**Technical name**:\
`twt-product-badges-font-size`

## Badge: Stock badge

***

### Mode

**Field type**:\
Select

**Available values**:\
• Show stock above/below the threshold\
• Always show stock

**Example value**:\
`Show stock above/below the threshold`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"

**Technical name**:\
`twt-product-badges-stock-badge-mode`

{% hint style="info" %}
Choose when the badge is shown: only around the threshold or always.
{% endhint %}

***

### Threshold (low stock)

**Field type**:\
Number field

**Example value**:\
`10`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"

**Technical name**:\
`twt-product-badges-stock-badge-threshold-lowstock`

{% hint style="info" %}
A badge is displayed for products with a lower stock level.
{% endhint %}

***

### Threshold (high stock)

**Field type**:\
Number field

**Example value**:\
`500`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"

**Technical name**:\
`twt-product-badges-stock-badge-threshold-highstock`

{% hint style="info" %}
A badge is displayed for products with a higher stock level.
{% endhint %}

***

### Coloration

**Field type**:\
Select

**Available values**:\
• default\
• default, contrast\
• default, light\
• individual coloration

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"

**Technical name**:\
`twt-product-badges-stock-badge-coloration`

{% hint style="info" %}
**default**:\
Default badge colour of Shopware 6 with white text colour.

**default, light**:\
Light shade of the default badge colour with a sufficiently high-contrast text colour.

**default, contrast**:\
Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.

**individual coloration**:\
Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
{% endhint %}

***

### Background colour (individual coloration)

**Field type**:\
Color picker

**Example value**:\
`#f1c40f`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"

**Technical name**:\
`twt-product-badges-stock-badge-background-color`

{% hint style="info" %}
**Note**: This configuration relates to the coloration "individual coloration".

For sufficient contrast with white text, we recommend #a06b00.
{% endhint %}

***

### Show icon

**Field type**:\
Select

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

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

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"

**Technical name**:\
`twt-product-badges-stock-badge-icon-show`

{% hint style="info" %}
To edit the icon please use the following snippet: twt.extension.stockBadge.lowStock.icon resp. twt.extension.stockBadge.highStock.icon
{% endhint %}

## Badge: Sold badge

***

### Coloration

**Field type**:\
Select

**Available values**:\
• default\
• default, contrast\
• default, light\
• individual coloration

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Sold badge"

**Technical name**:\
`twt-product-badges-sold-badge-coloration`

{% hint style="info" %}
**default**:\
Default badge colour of Shopware 6 with white text colour.

**default, light**:\
Light shade of the default badge colour with a sufficiently high-contrast text colour.

**default, contrast**:\
Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.

**individual coloration**:\
Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
{% endhint %}

***

### Background colour (individual coloration)

**Field type**:\
Color picker

**Example value**:\
`#e74c3c`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Sold badge"

**Technical name**:\
`twt-product-badges-sold-badge-background-color`

{% hint style="info" %}
**Note**: This configuration relates to the coloration "individual coloration".

For sufficient contrast with white text, we recommend #e52427.
{% endhint %}

***

### Show icon

**Field type**:\
Select

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

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

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Sold badge"

**Technical name**:\
`twt-product-badges-sold-badge-icon-show`

{% hint style="info" %}
To edit the icon please use the following snippet: twt.extension.soldBadge.icon
{% endhint %}

## Badge: Free shipping badge

***

### Coloration

**Field type**:\
Select

**Available values**:\
• default\
• default, contrast\
• default, light\
• individual coloration

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Free shipping badge"

**Technical name**:\
`twt-product-badges-shipping-free-badge-coloration`

{% hint style="info" %}
**default**:\
Default badge colour of Shopware 6 with white text colour.

**default, light**:\
Light shade of the default badge colour with a sufficiently high-contrast text colour.

**default, contrast**:\
Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.

**individual coloration**:\
Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
{% endhint %}

***

### Background colour (individual coloration)

**Field type**:\
Color picker

**Example value**:\
`#4aa3df`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Free shipping badge"

**Technical name**:\
`twt-product-badges-shipping-free-badge-background-color`

{% hint style="info" %}
**Note**: This configuration relates to the coloration "individual coloration".

For sufficient contrast with white text, we recommend #008199.
{% endhint %}

***

### Show icon

**Field type**:\
Select

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

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

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Free shipping badge"

**Technical name**:\
`twt-product-badges-shipping-free-badge-icon-show`

{% hint style="info" %}
To edit the icon please use the following snippet: twt.extension.shippingFreeBadge.icon
{% endhint %}

## Badge: Discount badge

***

### Content

**Field type**:\
Select

**Available values**:\
• % (default)\
• -25 %\
• 25 % saved\
• -35 €\
• 35 € saved

**Example value**:\
`% (default)`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Discount badge"

**Technical name**:\
`twt-product-badges-discount-badge-type`

***

### Round number

**Field type**:\
Select

**Available values**:\
• 0.12 (default)\
• 0.1\
• 0

**Example value**:\
`0.12 (default)`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Discount badge"

**Technical name**:\
`twt-product-badges-discount-badge-round`

{% hint style="info" %}
Round the value either up or down (1.5 to 2).
{% endhint %}

***

### Coloration

**Field type**:\
Select

**Available values**:\
• default\
• default, contrast\
• default, light\
• individual coloration

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Discount badge"

**Technical name**:\
`twt-product-badges-discount-badge-coloration`

{% hint style="info" %}
**default**:\
Default badge colour of Shopware 6 with white text colour.

**default, light**:\
Light shade of the default badge colour with a sufficiently high-contrast text colour.

**default, contrast**:\
Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.

**individual coloration**:\
Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
{% endhint %}

***

### Background colour (individual coloration)

**Field type**:\
Color picker

**Example value**:\
`#e74c3c`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Discount badge"

**Technical name**:\
`twt-product-badges-discount-badge-background-color`

{% hint style="info" %}
**Note**: This configuration relates to the coloration "individual coloration".

For sufficient contrast with white text, we recommend #e52427.
{% endhint %}

## Badge: Topseller badge

***

### Coloration

**Field type**:\
Select

**Available values**:\
• default\
• default, contrast\
• default, light\
• individual coloration

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Topseller badge"

**Technical name**:\
`twt-product-badges-topseller-badge-coloration`

{% hint style="info" %}
**default**:\
Default badge colour of Shopware 6 with white text colour.

**default, light**:\
Light shade of the default badge colour with a sufficiently high-contrast text colour.

**default, contrast**:\
Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.

**individual coloration**:\
Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
{% endhint %}

***

### Background colour (individual coloration)

**Field type**:\
Color picker

**Example value**:\
`#f1c40f`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Topseller badge"

**Technical name**:\
`twt-product-badges-topseller-badge-background-color`

{% hint style="info" %}
**Note**: This configuration relates to the coloration "individual coloration".

For sufficient contrast with white text, we recommend #a06b00.
{% endhint %}

***

### Show icon

**Field type**:\
Select

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

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

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: Topseller badge"

**Technical name**:\
`twt-product-badges-topseller-badge-icon-show`

{% hint style="info" %}
To edit the icon please use the following snippet: twt.extension.topsellerBadge.icon
{% endhint %}

## Badge: New badge

***

### Coloration

**Field type**:\
Select

**Available values**:\
• default\
• default, contrast\
• default, light\
• individual coloration

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: New badge"

**Technical name**:\
`twt-product-badges-new-badge-coloration`

{% hint style="info" %}
**default**:\
Default badge colour of Shopware 6 with white text colour.

**default, light**:\
Light shade of the default badge colour with a sufficiently high-contrast text colour.

**default, contrast**:\
Default badge colour of Shopware 6 with a sufficiently high-contrast text colour.

**individual coloration**:\
Enter an individual background colour. A sufficiently high-contrast text colour is generated automatically.
{% endhint %}

***

### Background colour (individual coloration)

**Field type**:\
Color picker

**Example value**:\
`#2ecc71`

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: New badge"

**Technical name**:\
`twt-product-badges-new-badge-background-color`

{% hint style="info" %}
**Note**: This configuration relates to the coloration "individual coloration".

For sufficient contrast with white text, we recommend #00892d.
{% endhint %}

***

### Show icon

**Field type**:\
Select

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

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

**Path to the configuration**:\
Tab "Content" => Block "Product badges" => Section "Badge: New badge"

**Technical name**:\
`twt-product-badges-new-badge-icon-show`

{% hint style="info" %}
To edit the icon please use the following snippet: twt.extension.newBadge.icon
{% endhint %}