Badges

Badges call out what matters on product cards and product pages. Treble has four automatic badges (Sale, New, Sold out, Pre-order), three Custom badges you switch on with product tags, and a Metafield badge that shows a text you write per product. Their rules, labels and colors are set once in Theme settings > Badges.

How to set it up

Step 1: Set up the badges

1. Open Theme settings > Badges.
2. Choose the Position on product cards (1): any corner of the image. Badges at the bottom of the image fade while the quick add button shows.
3. Choose a Shape (2): same as the buttons, pill, rounded or square.
4. In each group, turn the badge on or off, change its Label (leave it blank for the default text) and its colors. Colors left blank follow the color scheme.

Step 2: Sale, New, Sold out and Pre-order

1. Sale shows when the price is lower than the compare-at price. Badge text shows "Sale", the percentage saved or the amount saved.
2. New shows on products tagged new, or on products published within the number of days you set (Mark as new by).
3. Sold out shows when no variant can be bought; Pre-order when the variant sells as a pre-order (Theme settings > Pre-orders).
4. Only one of Sold out, Pre-order and Sale shows at a time, in that order.

Step 3: Add your own badges

1. Under Custom badge 1, type a Product tag, for example bestseller, and a Label (blank shows the tag). Letter case doesn't matter.
2. Pick where it sits on product cards: On image (in one of the image corners), Above product title or Inline with product title, aligned left or right.
3. For a different text per product, create a single line text product metafield, enter its key in Custom badge metafield (for example theme.label), and pick its colors.

Step 4: Show badges on the product page

1. Open a product template, and in Product details click Badges (or Add block > Badges).
2. Turn off the badges this block should not show, and set the Alignment, with its own value on mobile.

Settings reference

How it works

• On product pages and in quick view, Sale, Sold out and Pre-order follow the selected variant.
• Badges also show on mega menu product cards.
• Pick custom colors with strong contrast between text and background, so badges stay readable.

Troubleshooting

A custom badge doesn't show.

Check the tag on the product in Shopify admin, and that the badge isn't turned off in the Badges block on the product page.

The New badge shows on old products.

With Mark as new by set to the tag, remove the new tag; with days, lower New for.

Related

• Product cards
• Pre-orders
• Product data: metafields and tags