Custom badges & Tags
Custom badge
Overview
Custom tags allow you to display special badge labels (such as Hot, Trend, or New) on product collections or items.
Each tag defines the tag name, background color, text color, title text color, and the collection handle where it will appear.
Tag Format
Each tag should be written inside curly brackets {} in the following order:
Format:
{Hot,#ff0000,#ffffff,#ffffff,collection-handle}||
{Trend,#000000,#ffffff,#ffffff,collection-handle}
Explanation of Fields
| Field | Description |
|---|---|
| TagName | The text that appears on the badge (e.g., Hot, Trend, New). |
| TagBackgroundColor | Hex color code for the badge background (e.g., #ff0000 for red). |
| TagTextColor | Hex color code for the text on the badge. |
| TitleTextColor | Hex color code for the title text (if applicable). |
| CollectionHandle | The handle (URL slug or identifier) of the collection where the badge will be displayed. |
Custom Tags
Assign visual badges to specific product tags.
Format: {TagName,#TextColor,#BackgroundColor}
Separate multiple badges using ||.
Examples:
{New,#000000,#ffffff} – Displays a “New” badge with black text on a white background.
{Trending,#ffffff,#000000} – Displays a “Trending” badge with white text on a black background.