> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-settings/badges.md).

# Badges

Badges are small labels like “Sale”, “Sold out”, or “New” that highlight product status. Clear, consistent badges help shoppers spot key info quickly.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FiOPTHxlD9mhONMoSxhqm%2FCapture%20d'%C3%A9cran%202025-09-01%20215248.png?alt=media&amp;token=b4085398-0fba-4886-9f40-31437615a8f3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FK93uGphJVnmXTZZdd53g%2FCapture%20d'%C3%A9cran%202025-09-01%20215341.png?alt=media&amp;token=c723beb1-c8a9-4ee6-a098-bb478a2f2dfa" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FSAUpSctf6tmB3mwb7Qqw%2FCapture%20d'%C3%A9cran%202025-09-01%20215427.png?alt=media&amp;token=1b52a48c-366b-4b33-88e4-088910b89520" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### How to set it up

* Go to **Online Store** > **Themes** > **Customize**.
* Open **Theme settings** > **Badges**.
* Make your changes, preview live, then click **Save**.
  {% endhint %}

### Settings

* **Badge size**: Sets how large badges appear. Larger stands out more; smaller is subtler.
* **Corner radius**: Rounds badge corners. Higher values feel friendlier; zero is crisp.
* **Uppercase**: Makes badge text all caps. Improves visibility for short labels.
* **Display layout**: Choose how multiple badges stack (Stacked) or sit side by side (Inline).

#### Badges on Cards

* **Position on cards**: Choose where badges sit on product cards (Top left, Top right, Bottom right, Bottom left).
* **Show all badges**: Show every applicable badge, or only the most relevant ones.

#### Badges on Product Page

* **Enable badges on product page**: Turn badges on or off on the product page.
* **Show all badges**: Show every applicable badge on the product page.
* **Badge position**: Choose where badges appear (Next to price or On media).
* **Badge position on media**: If on media, set its exact corner (Top left, Top right, Bottom right, Bottom left).

{% hint style="info" %}

### Badge priority

If "**Show all badges**" is disabled, your product page will show only one badge at a time with this priority order:

1. Sold Out (if not available)
2. On Sale (if available and has a sale price)
3. New (if available, not on sale, and published within the timeframe set in settings)
   {% endhint %}

#### Sale Badges

* **Show Sale Badges**: Turn sale badges on or off.
* **Show sale percentage**: Show discount as a percentage.
* **Sale badge** [**color scheme**](/docs/theme-settings/colors.md#schemes): Choose the color set for sale badges.
* **Custom image**: Upload your own sale badge image (PNG, 64x64px recommended).
* **Custom badge size**: Set the size when using a custom image.

#### Sold Out Badges

* **Show Sold Out Badges**: Turn sold‑out badges on or off.
* **Sold out badge** [**color scheme**](/docs/theme-settings/colors.md#schemes): Choose the color set for sold‑out badges.
* **Custom image**: Upload a custom sold‑out badge image (PNG, 64x64px recommended).
* **Custom badge size**: Set the size when using a custom image.

#### New Badges

* **Show New Badges**: Turn new badges on or off.
* **New badge** [**color scheme**](/docs/theme-settings/colors.md#schemes): Choose the color set for new badges.
* **New badge duration**: How long “New” stays after publish (One week, Two weeks, One month, Two months, Three months).
* **Custom image**: Upload a custom “New” badge (PNG, 64x64px recommended).
* **Custom badge size**: Set the size when using a custom image.

#### Custom Badges

* **Enable custom badges**: Allow badges from a metafield.
* **Custom badge metafield reference**: Enter the metafield namespace.key (e.g. custom.custom\_badge).
* **Custom badge size**: Set the size for custom badges.

{% content-ref url="/pages/BxdLwlPqFgEnyG5Ky2Ei" %}
[Add custom badge to product](/docs/guides/add-custom-badge-to-product.md)
{% endcontent-ref %}

***

### **Tips**

* Use one color scheme per badge type for consistency.
* Avoid showing too many badges at once; it can feel noisy.
* If using custom images, test sizes so text stays legible on mobile.