Custom badges

Add promo badges like "New", "Hot", or "Best-selling" your product cards images.

Add eye-catching promo badges like "New", "Hot", or "Best Selling" to your product cards to highlight your products. These small badges are a great way to provide extra context and draw attention.

⚠️ Tip: Don’t add badges to all products — using them selectively works best. In our demo, every product has a badge, but in a live store, that would be overkill.

1. Create the metafield

To add custom badge text and color to products, you first need a Product metafield:

1. In your Shopify admin, go to Settings → Metafields → Products.

2. Click Add definition.

3. Configure the metafield:

   • Namespace and key: custom.badge (You can use a different value, but you’ll need to update the theme settings under Product Cards if you do)

   • Type: Single line text - One value

This metafield will store the badge text and optionally its color.

If you prefer to have a different metafield namespace/key, then you must update the theme setting under the Product card group.

2. Add badges to products

Now you can assign badges to individual products:

1. Open a product in the Shopify admin.

2. Scroll down to the Metafields section.

3. Enter your badge text, e.g., On Sale.

4. Optional: Assign a custom color by appending it after a pipe |. Example: On Sale | #064e3b

If you skip the color, the badge will use the default primary color of your theme.

Repeat this step for any other products you want to highlight.

3. Verify the results

1. Open your store on the frontend.

2. Check the product cards — your custom badges should appear.

⚠️ Common Issue: If badges aren’t showing, double-check the metafield key. It must match what you set earlier (e.g., custom.badge). A common mistake is using custom.custom_badge or another key.