Product Card Badges via Tags & Pricing

️How Badges are Triggered

BoltTheme checks three rules in the product templates to display badges:

1. Sale Badge:

* Trigger: Automatically displayed if the product is available and has a Compare-at price higher than its actual price (compare_at_price > price).
* Text output: Pulled from your translation system (products.product.on_sale key, defaults to Sale).

1. New Badge:

* Trigger: Displayed if the product is tagged with either new or New.
* Text output: Pulled from your translation system (products.product.badge_new key, defaults to New).

1. Hot Badge:

* Trigger: Displayed if the product is tagged with either hot or Hot.
* Text output: Pulled from your translation system (products.product.badge_hot key, defaults to Hot).

️Step-by-Step Configuration Guide

Follow these steps to manage badges on your storefront:

Step 1: Assign Tags or Compare-at Pricing to Products

To trigger a specific badge, add the corresponding data in your Shopify Admin:

To Show the Sale Badge:

1. Go to Shopify Admin > Products and select a product.
2. Under the Pricing card, ensure Price is set to the current discount price (e.g. $80).
3. Set Compare-at price to the original price (e.g. $100).
4. Click Save.

To Show the New or Hot Badge:

1. Go to Shopify Admin > Products and select a product.
2. Under the Organization sidebar on the right, locate the Tags input box.
3. Type new (to show the New badge) or hot (to show the Hot badge).
4. Click Save.

Step 2: Toggle Badges in the Theme Editor

You can enable or disable product card badges globally for your collection pages and homepage grids:

1. Open the Theme Editor and navigate to your Collection template or Homepage.
2. Select the Product Grid section (or collection grid).
3. Scroll down in the settings panel to the Card Options.
4. Check or uncheck the Show Badges toggle.
5. Click Save.

Step 3: Customize Badge Text & Localizations

Because badge labels are pulled from the default locale files, you can customize the text (e.g. changing “Sale” to “Promo” or “50% Off”) or translate it into Arabic using the Shopify Translate & Adapt app:

1. Open Translate & Adapt from your admin dashboard.
2. Go to Online Store (Themes) > BoltTheme translations.
3. Locate the Products category keys:

* products.product.on_sale (Default: Sale)
* products.product.badge_new (Default: New)
* products.product.badge_hot (Default: Hot)

1. Input your custom values or translations on the right column.
2. Click Save.