> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/swatch/variant-badges/variant-badges-overview.md).

# Variant badges

{% hint style="success" %}
**Available on:** Product page, Collection page
{% endhint %}

**Variant badges** let you pin a small label directly on a swatch — things like *New*, *Hot*, *Limited*, or *Best seller* — so shoppers notice key variants at a glance without having to read through a product description.

***

## Badge types

There are two types of badges:

<table><thead><tr><th width="181">Type</th><th>How it works</th></tr></thead><tbody><tr><td><strong>Manual</strong></td><td>You assign the badge to specific variant values yourself. It shows on those values regardless of stock status.</td></tr><tr><td><strong>Auto · Sold out</strong></td><td>You assign the badge to specific values and it only appears <strong>when those variants go out of stock</strong>. When they're back in stock, the badge disappears automatically.</td></tr></tbody></table>

For a **store-wide** out-of-stock label that applies to every variant without any manual assignment, see [Auto sold-out badge](/swatch/global-settings/auto-sold-out-badge.md) under Global Settings

***

## How it works

* A badge starts as a **preset** — design how it looks once, then assign it to as many values as you want.
* Each value can show **one badge at a time**.
* Updating a preset (text, color, position, shape) instantly updates everywhere it's assigned.
* Deleting a badge removes it from every value it was assigned to.
* Badges display on every variant display type: swatch, button, dropdown.

***

## Create a badge

{% stepper %}
{% step %}

#### Go to **Variant badges** → click **+ Create badge**

<figure><img src="/files/sBOEEWdq5Z89CJTaRrFV" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Fill in the badge details

<figure><img src="/files/5xEWhPa2OaSk12GgDu29" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="131">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Preset name</strong></td><td>An internal label for you to recognize this badge in the list. Shoppers don't see it.</td></tr><tr><td><strong>Type</strong></td><td><strong>Manual</strong> — always shows on assigned values.<br><strong>Auto · Sold out</strong> — only shows when the assigned variant is out of stock.</td></tr><tr><td><strong>Badge text</strong></td><td>The text shoppers see on the swatch (up to 40 characters). Click the emoji icon to add an emoji.</td></tr><tr><td><strong>Text color</strong></td><td>Foreground/text color of the badge (hex code).</td></tr><tr><td><strong>Background</strong></td><td>Background color of the badge (hex code).</td></tr><tr><td><strong>Position</strong></td><td>Where on the swatch the badge appears: <strong>Top left</strong>, <strong>Top right</strong>, <strong>Bottom left</strong>, or <strong>Bottom right</strong>.</td></tr><tr><td><strong>Shape</strong></td><td><strong>Pill</strong>, <strong>Rectangle</strong>, or <strong>Corner ribbon</strong>.</td></tr></tbody></table>

The **Preview** panel on the right updates live as you type.
{% endstep %}

{% step %}

#### Click **Save**

You'll be taken to the badge's edit page, where the **Assign to swatches** section becomes active.
{% endstep %}
{% endstepper %}

***

## Assign a badge to swatches

After saving, the **Assign to swatches** section appears below the badge form.

{% stepper %}
{% step %}

#### Pick the option from the dropdown

{% endstep %}

{% step %}

#### Check the values that should show this badge

The values already assigned to this badge are shown under **Currently assigned to**. Tick or untick individual values — changes save automatically.

<figure><img src="/files/nGq1xvoWZE5UKE6DucZp" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click Save assignment to save the changes

{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Note:** A value can only hold one badge at a time. If you assign a second badge to a value that already has one, the previous badge is replaced.
{% endhint %}