Product badges theme settings
The Product badges theme settings of Combine set the sold out and discount badges and three custom badges shown by product tag.
Applies to: Combine 4.2.0 and later. Added in: Combine 1.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
Badges are the small labels on product images: Sold Out, a discount, or one of three custom badges that you show with product tags. Combine shows the sold out and discount badges automatically.
Where to find it: Theme settings → Product card → Product badges (and the Sold out badge, Discount badge and Custom badge 1 to 3 groups under it)
Where badges show
- Show badges turns the badges on or off in product cards, in every product grid.
- On the product page, Featured product and the Quick view, badges come from the Product badges block instead. It shows the badges of the selected variant and is not affected by Show badges.
- All badges use the same corner position on the product image; Combine has no setting to move them.
Sold out badge
- Combine shows "Sold Out" when every variant of the product is sold out (in product cards), or when the selected variant is sold out (in the Product badges block).
- 'Sold out' background color and 'Sold out' text color set its colors.
Discount badge
- Combine shows the discount badge when the price is lower than the compare-at price.
- Show discount as... chooses what it says:
- Text: "On Sale".
- Percentage: the saving in percent, rounded, for example "-20%".
- Amount saved: "Save" and the amount, for example "Save $10.00".
- 'Discount' background color and 'Discount' text color set its colors.
Product cards show the percentage or the amount only when all variants have the same price and compare-at price. If the variants have different prices, the badge says "On Sale" instead.
The texts "Sold Out", "On Sale" and "Save" are theme texts. Change them in Shopify admin → Online Store → Themes → … → Edit default theme content.
Setting up a custom badge
A custom badge shows your own text, such as "New" or "Pre Order", on every product that has a matching product tag. Combine has three custom badges, each with its own Text, Tag and colors.
Write the badge text and tag
Open Theme settings → Product card → Custom badge 1. Type the text customers see in Text, for example Limited, and the product tag that turns it on in Tag, for example limited.
Set the colors
Pick the Background color and the Text color of the badge. Select Save.
Tag your products
In Shopify admin → Products, open each product and add the same tag in Tags. To tag many products at once, select them in the product list and choose Add tags.
Check a collection page
Open a collection with a tagged product on the storefront. The badge shows on its product card, and on its product page when the Product badges block is added.
The tag must match exactly, including upper and lower case: the Tag new does not match a product tagged New. Custom badge 1 and Custom badge 2 come filled in with the tags new and preorder, so products that already have those tags show the "New" and "Pre Order" badges.
Why does my discount badge say "On Sale" instead of a percentage?
The product's variants have different prices or compare-at prices. A product card cannot show one saving for all of them, so Combine shows "On Sale". On the product page, the Product badges block shows the exact saving of the selected variant.
Can a product show more than one custom badge?
Yes. A product with the tags of several custom badges shows all of them, next to the sold out and discount badges. Combine has three custom badges. For more labels, use the Dynamic text block of the product grid, which shows text from a product metafield.
How do I turn off a custom badge?
Empty its Tag field. A custom badge with no tag never shows.
All Product badges settings
Every setting in this group, with its type and default.
Product card theme settings: Product badges
Where to find it: Theme settings → Product card → Product badges
Show badges (checkbox, default: on): Shows the sold out, discount and custom badges on product images in product cards. The Product badges block on the product page is not affected.
Product card theme settings: Sold out badge
Where to find it: Theme settings → Product card → Sold out badge
'Sold out' background color (color, default: #757575).
'Sold out' text color (color, default: #ffffff).
Product card theme settings: Discount badge
Where to find it: Theme settings → Product card → Discount badge
Show discount as... (dropdown, default: Percentage): Sets the discount badge text: Text shows On Sale, Percentage shows the rounded saving (-20%), Amount saved shows Save and the amount. Products whose variants have different prices show On Sale in product cards. Options: Text, Percentage, Amount saved.
'Discount' background color (color, default: #D14545).
'Discount' text color (color, default: #ffffff).
Product card theme settings: Custom product badges
Where to find it: Theme settings → Product card → Custom product badges
This theme uses custom product badges that you can define here.
Product card theme settings: Custom badge 1
Where to find it: Theme settings → Product card → Custom badge 1
Text (text field, default: "New"): Sets the text of the first custom badge.
Tag (text field, default: "new"): Sets the product tag that shows the first custom badge. The tag must match exactly, including case; empty turns the badge off.
Background color (color, default: #3C863B).
Text color (color, default: #ffffff).
Product card theme settings: Custom badge 2
Where to find it: Theme settings → Product card → Custom badge 2
Text (text field, default: "Pre Order"): Sets the text of the second custom badge.
Tag (text field, default: "preorder"): Sets the product tag that shows the second custom badge. The tag must match exactly, including case; empty turns the badge off.
Background color (color, default: #A36754).
Text color (color, default: #ffffff).
Product card theme settings: Custom badge 3
Where to find it: Theme settings → Product card → Custom badge 3
Text (text field, default: "Custom badge"): Sets the text of the third custom badge.
Tag (text field, default: "custom_badge"): Sets the product tag that shows the third custom badge. The tag must match exactly, including case; empty turns the badge off.
Background color (color, default: #000000).
Text color (color, default: #ffffff).
Related pages
- Product card theme settings: the product image and quick buy popup.
- Product page: the Product badges block.
- Product grid blocks: the Dynamic text block for other labels.
- Bulk edit your products: add tags to many products.
Product card theme settings
The Product card theme settings of Combine set product thumbnails, the quick buy popup and the rating app for every product grid.
Color swatches
How Combine shows color swatches: the variant option names it turns into swatches, color names, swatch images in Files, Shopify swatches and metaobjects.