Badges
Setting | Description |
Product badges style | When a product has two prices — a compare-at price (the original, higher price) and a price (the discounted, lower price) — a Sale badge will be shown. These settings allow you to choose the style in which the badge appears on product cards.
|
Custom badge | The Custom badge is an additional badge that can appear alongside the Sale badge. You can assign a unique name to a badge per product — for example: Hot, Best Seller, Exclusive, etc. To display the Custom badge in the Scrolling text style, create a product metafield and enter the desired badge name into the metafield input for each product. Add Badge (product metafiled name) in the field above to activate this feature. Note: Detailed instructions are provided below the table. |
Custom badge color scheme | Choose a color scheme for the custom badge in the scrolling text style — it can match or differ from the Sale badge color scheme. |
Steps to set the Sale badge as scrolling text on product cards
- Navigate to the product page.
- If the product has no variants: Locate the Price and Compare-at price fields.
- If the product has variants: Select the first variant that will be displayed on the product card, then locate the Price and Compare-at price fields.
- In Price, enter a lower price.
- In Compare-at price, enter the original (higher) price.
- Go to Theme settings → Badges tab and ensure Product badges style is set to Scrolling text.
- After a few seconds, the product card will display a scrolling text badge along with a percentage discount icon.
Steps to set a Custom Badge on product cards
- Navigate to Settings in your Shopify admin panel.
- Click on Metafields and metaobjects, then select Products.
- Click the Add definition button.
- Fill in the required information as shown in the example screenshot.
- Go to the product page in your admin and scroll down to the Product metafields section.
- Enter your custom badge name into the metafield input and click Save.
- In your theme settings, under the Badges tab, make sure the Custom Badge option includes the correct metafield name.
- Settings
- Metafields and metaobjects
- Products
- Add definition button
- Definition card
- Product metafields section and badge field