Customize Product Badges

For example, a badge with the label On sale can be displayed on products that are currently discounted or assigned to a selected tag.

Edit badge label

The Label name setting controls the text shown on the badge.

Steps:

1. Go to General setting > Product badge.
2. Open the badge you want to edit.
3. In the Label name field, enter the badge text.
4. Review the product card preview.

Examples of badge labels:

• On sale
• New
• Best seller
• Limited
• Trending
• Gift idea
• Free shipping

Tip
Keep badge text short. Short labels are easier to read on product cards, especially on mobile.

Change badge colors

You can customize the badge text and background color to match your store style.

Text color

The Text color setting controls the color of the badge text.

Fill color

The Fill color setting controls the badge background color.

Steps:

1. Open the badge you want to edit.
2. Select Text color.
3. Choose a color or enter a hex color code.
4. Select Fill color.
5. Choose a color or enter a hex color code.
6. Review the badge preview on the product card.

Recommendation
Use strong contrast between the text color and fill color. For example, white text on a red background or dark text on a light background.

Assign badges to products

The Assign to products setting lets you control which products display the badge.

Badges are assigned based on product tags. Products with selected tags will display the badge.

Steps:

1. Go to General setting > Product badge.
2. Open the badge you want to assign.
3. Find Assign to products.
4. Click Select a tag.
5. Choose the product tag you want to use.
6. Save your changes.

Note
Products with selected tags will display this badge. You can select up to 3 tags for each badge.

Example

If you create a badge called Best seller and assign it to the tag best-seller, then products with the best-seller tag will show the Best seller badge on the storefront.

Add more badges

You can create multiple product badges for different campaigns or product groups.

Steps:

1. Go to General setting > Product badge.
2. Click Add badge.
3. Enter the badge label.
4. Choose text and fill colors.
5. Assign the badge to products using tags.
6. Save your changes.

The number shown next to Add badge indicates how many badges you have used and the total number available. For example, 2/4 means 2 badges are currently used out of 4 available badges.

Hide or remove a badge

You can hide or delete a badge if you no longer want it to appear.

Hide a badge

1. Open General setting > Product badge.
2. Find the badge you want to hide.
3. Click the visibility icon if available.
4. Save your changes.

Hiding a badge keeps the badge settings but stops it from displaying on the storefront.

Remove a badge

1. Open the badge you want to remove.
2. Click the delete icon.
3. Confirm the action if required.
4. Save your changes.

Important
Removing a badge deletes its settings. If you only want to stop showing it temporarily, hide the badge instead.

Preview and save changes

After creating or editing badges, review them in the storefront preview.

Check the following:

• Badge label is correct.
• Badge color is readable.
• Badge appears on the correct products.
• Product cards still look clean.
• Badges display well on mobile.

Save changes

1. Click Save in the top-right corner.
2. Review your storefront.
3. Click Publish if needed to apply changes to the live theme.