> 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.

***

## Manual, assigned by you

Every badge you create here is **manual**: you assign it to specific variant values yourself, and it shows on those values regardless of stock status.

{% hint style="info" %}
Looking for a badge that appears automatically based on a store-wide rule — **Sold out**, **Low stock**, **New**, or **On sale** — with no manual assignment? See [Automatic badges](/swatch/global-settings/automatic-badges.md) under Global Settings.
{% endhint %}

***

## 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="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-c74cc9c7a8b9cb6ddf21a0f890b0644520bff163%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Fill in the badge details

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-9497a2c7ccd60852face60119ef5ce8fd99cf24f%2Fimage.png?alt=media" 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>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="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-4460075ae3d4e64f665ae8f8d9880a56849beedc%2Fimage.png?alt=media" 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 %}