Skip to main content

​
Introduction

Product Badges are visual indicators that highlight important product information like sale status, new arrivals, bestsellers, or custom promotional messages on product cards and product pages. The theme uses a tag-based system with custom localization support that allows badges to be displayed in multiple languages. When enabled, it:
  • Displays badges on product cards across the store.
  • Shows badges on product pages to highlight key product attributes.

​
Setup

To enable and configure product badges, follow these steps:
1

Add badge tags to products

You need to add specific tags to products you want to highlight with badges. This involves adding tags like “Sale”, “New Arrival”, “Bestseller”, or any custom tag you wish to use for badges.

  1. In the Shopify admin, go to Products and open the product you want to add a badge to.
  2. In the Tags section, add the desired badge tags with this format: badge:YourBadgeText (e.g., badge:Sale, badge:New Arrival).
  3. Save the product.

2

Show badges on product cards

After adding the tags, you need to enable the badge display in the theme settings.

  1. Go to Online Store → Themes → Customize → Theme settings → Product cards.
  2. Enable the Product Badges option in both product card and product page settings to show badges where desired.
  3. Save your changes.

3

Show badges on product pages

To display badges on product pages, you need to add Badges block to the product page template in the theme editor.

  1. Go to Online Store → Themes → Customize → Product pages.
  2. Add the Badges block to the product page template and configure its settings.
  3. Save your changes.

​
Translated Badges

Shopify product tags are not translatable by default. The theme provides a way to translate badge texts using custom localization support that allows badges to be displayed in multiple languages. Reqiurements:
  • Your badges must be defined using the followin tag format: badge:badge_key (e.g., badge:sale, badge:new_arrival).
  • You need to add translations for each badge key in the theme’s locale files.

​
Pre-configured Badge Keys

The theme comes with several pre-configured badge keys that you can use.
locales/en.default.json
"badges": {
  "new": "New",
  "best_seller": "Best seller", 
  "featured": "Featured",
  "on_sale": "On sale",
  "coming_soon": "Coming soon",
  "pre_order": "Pre-order",
  "sold_out": "Sold out"
}

​
Adding Custom Badge Keys

To add custom badge keys, follow these steps:
  1. Open the locale file for your language (e.g., locales/en.default.json).
  2. Add your custom badge keys and their translations under the badges section.
locales/en.default.json
"badges": {
	"limited_edition": "Limited Edition"
}
  1. Save the locale file.
Important: Use underscores (_) instead of spaces in badge keys when defining them in product tags.

​
Multi-language Support

To support multiple languages, repeat the process of adding badge translations in each locale file for the languages you want to support.
locales/es.json
"badges": {
	"new": "Nuevo",
	"best_seller": "Más vendido",
	"limited_edition": "Edición limitada"
}

​
Fallback Behavior for Missing Translations

If a badge key does not have a corresponding translation in the current locale file, the theme will display the badge key itself (e.g., badge:limited_edition will show as “limited_edition”) on the storefront. To ensure a consistent user experience, it is recommended to provide translations for all badge keys used in your products across all supported languages. By combining product tags with custom localization support, you can effectively manage and display product badges in multiple languages, enhancing the shopping experience for your customers.