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.

  • Default (Sale): Displays a simple “Sale” label when a product is discounted.
  • Sale Percentage: Shows the discount percentage along with the “Sale” label. Example: “50%, SALE”.
  • Scrolling Text: The Sale badge appears as continuously scrolling text at the bottom of the product image, while the discount percentage is displayed in the top-left corner.
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

  1. Navigate to the product page.
  2. If the product has no variants: Locate the Price and Compare-at price fields.
  3. 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.
  4. In Price, enter a lower price.
  5. In Compare-at price, enter the original (higher) price.
  6. Go to Theme settings → Badges tab and ensure Product badges style is set to Scrolling text.
  7. 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

  1. Navigate to Settings in your Shopify admin panel.
  2. Click on Metafields and metaobjects, then select Products.
  3. Click the Add definition button.
  4. Fill in the required information as shown in the example screenshot.
  5. Go to the product page in your admin and scroll down to the Product metafields section.
  6. Enter your custom badge name into the metafield input and click Save.
  7. In your theme settings, under the Badges tab, make sure the Custom Badge option includes the correct metafield name.

  1. Settings


  1. Metafields and metaobjects


  1. Products


  1. Add definition button


  1. Definition card


  1. Product metafields section and badge field


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us