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.

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

PreviousColor swatchNextStatic Sections

Last updated