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

# Product tags

Your theme allows you to assign **custom colors** to product tags (badges) displayed on product cards. This feature is managed entirely via the **Theme Settings**, with no coding required.

<figure><img src="/files/PKQ4vgUug8qnrmhPOEV4" alt=""><figcaption></figcaption></figure>

***

### Where to Configure

To customize tag (badge) colors:

1. Go to **Online Store > Themes > Customize**.
2. In the theme editor, open **Theme Settings** (bottom left).
3. Navigate to the **Product Cards** section.
4. Locate the field labeled **Custom badges**.

*It is also important to check that the “*[*Enable product badges*](/elemento-docs/theme-settings/product-cards.md)*” setting in the "theme settings" section is enabled*

***

### Input Format

To assign a custom background and text color to a product tag, follow this format:

```
[Tag Name]::[HEX Background Color]::[HEX Text Color]
```

#### Example:

```
New::#FF0000::#FFFFFF
Bestseller::#000000::#FFD700
Limited::#0055FF::#FFFFFF
```

* `New` will have a **red background** with **white text**
* `Bestseller` will have a **black background** with **gold text**
* `Limited` will have a **blue background** with **white text**

> - Add each tag on a **new line**.
> - Be sure to use valid **hex color codes** (e.g., `#FF5733`, `#000000`).

***

### Tag Matching

* The tag name must **exactly match** the product tag.
* If a product has multiple tags and more than one match a custom badge, all matching badges will display.
* If you **do not specify custom colors** for a tag in the **Custom badges** field, the theme will automatically use the **default badge styles** defined in the theme’s design system.

***

### Previewing Your Changes

After saving your tag color settings:

1. Navigate to a **collection page** or **featured collection** block.
2. Confirm that product tags now appear with the custom styles you've defined.

***

### Tips

* Use **short, consistent tag names** to ensure clean badge layouts.
* Keep contrast in mind: light text on dark background (or vice versa) improves readability.
* Combine with automated tags (e.g., via apps or flows) for dynamic merchandising.