> 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/guides/add-custom-badge-to-product.md).

# Add custom badge to product

You can add a custom badge to a product in your store to highlight special attributes such as “New”, “Best Seller”, or promotional graphics.

This feature is built into your theme and works through **Shopify metafields**, so you can easily upload a badge image directly from the product settings in your Shopify admin.

This guide walks you through the process of setting up and displaying a custom badge by linking an image to a product metafield.

### Step 1: Create a Product Metafield

1. In your Shopify admin, go to **Settings** → **Metafields and metaobjects** → **Products**
2. Click **Add definition**.
3. Fill in the details:
   * **Name:** Enter a metafield name, e.g. *`custom_badge`*
   * **Content type:** File → **Image**
4. Copy the **Namespace and key:** `custom.custom_badge`
5. Click **Save**.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FyiUSmLRPYQdqLHoPQI1o%2FVidosanstitreRaliseavecClipchamp85-ezgif.com-video-to-gif-converter%20(1).gif?alt=media&amp;token=e035af7e-6861-45af-9229-0caeeb403517" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FoE2BsMuFp92kvpqYas9m%2FCapture%20d%E2%80%99%C3%A9cran%202025-09-02%20160901.png?alt=media&amp;token=e6a4970c-7713-4b9b-8872-504cfbaf07b6" alt=""><figcaption></figcaption></figure>

###

### Step 2: Assign a Badge to a Product

1. Open a product in your **Shopify admin**.
2. Scroll down to the **Metafields** section.
3. Under your new **Product Badge** metafield, upload or select the badge image you want to display.
4. Click **Save**.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2Fokjwm27vsDfilZ62o00A%2FCapture%20d'%C3%A9cran%202025-09-02%20161458.png?alt=media&amp;token=149775c7-ff97-40fe-8d03-51e40505b75b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FhHIaINikoY73eEfqQ5Ky%2FCapture%20d'%C3%A9cran%202026-02-19%20182119.png?alt=media&amp;token=b6b14737-8fa8-435a-8bdc-1c82b41c34cb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### Recommended specs

* **Format**: PNG with transparent background (other supported formats: JPEG/JPG, WEBP, GIF)&#x20;
* **Size**: 64x64px
* Keep artwork simple so it reads on mobile
  {% endhint %}

###

### Step 3: Enable Custom Badges in Theme Settings

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Theme settings** > **Badges**.
3. Scroll down to the **Custom Badges** settings
4. Enable custom badges
5. Enter the **metafield namespace and key** (e.g. `custom.custom_badge`)
6. click **Save**.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FG7N4TnWoF7SFvVD1seMI%2FCapture%20d'%C3%A9cran%202026-02-19%20181753.png?alt=media&amp;token=91e67f6c-9ad9-428c-9ad2-5ccf9f55cdeb" alt=""><figcaption></figcaption></figure>

{% content-ref url="/pages/YRMGn8eMXxfvpCX5vB9j" %}
[Badges](/docs/theme-settings/badges.md)
{% endcontent-ref %}

✅ Done! Now, whenever you upload a badge image in the product metafield, it will automatically appear on your product page.

{% hint style="warning" %}

#### Troubleshooting

* Not showing: make sure Enable custom badges is on and the metafield reference matches exactly.
* Wrong type: the metafield must be File with Image selected.
* Looks blurry: use a clean 1x image around 64x64 px; avoid tiny or overly compressed files.
  {% endhint %}