Back to Help Center

Theme Editor Badge Setup

10 min read

Add verified discount badges to your product pages using the Shopify Theme Editor. No code required.

Overview

The launch version supports two Theme Editor setup paths: a recommended manual product-page block and an optional automatic app-embed flow.

Step 1: Open Theme Editor

  1. Go to Online Store → Themes.
  2. Click Customize on your active theme.
  3. Navigate to a product page template

Step 2: Recommended manual placement

Use the product template block flow when you want to choose the badge position yourself.

  1. In the Sections panel, click Add block.
  2. Open Apps and choose Compliance badge.
  3. Move the block close to the product price.
  4. Use the Theme Editor controls for text, subtext, style, and size.
  5. Click Save.
Real Shopify Theme Editor Apps panel showing the Compliance badge block inside a product template.
Real Theme Editor example: the merchant adds the Compliance badge block from the Apps panel inside the product template.
Tip:

This manual block is the clearest way to place the badge near the product price without relying on automatic placement rules.

Step 3: Optional automatic placement

Use the app-embed path if you prefer the automatic storefront mount.

  1. Open App embeds in the Theme Editor sidebar.
  2. Find Badge auto-placement.
  3. Toggle it on and save.

The app block and the app embed are different setup methods. Do not treat both as a generic app embed.

Real Theme Editor settings for BonaFide Omnibus showing compliant label, style, main text, subtext, size, and fallback settings.
Real Theme Editor settings: the current merchant-visible controls include compliant label, badge style, main text, subtext, size, and fallback behavior.

Step 4: Understand badge eligibility

A badge is shown only when the app has the required badge status and payload for that product or variant. In practice, badge rendering depends on the current discount or compliance state, tracked history, your saved compliance rules, and the app-owned badge data prepared for the storefront.

  • A newly installed store may still be preparing product data and reference history.
  • Some discounted products may show a reference badge or no badge until enough history exists.
  • Changing compliance rules can change future badge eligibility.

Step 5: Review on the storefront

  1. Open a product page on your storefront.
  2. Confirm the badge appears once in the position you selected.
  3. If the badge is missing, run Sync products and Run compliance check, then review Dashboard overview and Reports & evidence.
Real storefront product page detail showing the Verified Discount badge below the snowboard price and above the purchase controls.
Real storefront result: the configured badge appears on the product page next to the live price and purchase controls.

Troubleshooting

  • Make sure you are editing an active product template.
  • Confirm that the Compliance badge block or Badge auto-placement app embed is enabled.
  • Save Theme Editor changes before rechecking the storefront.
  • If tracked history is still being prepared, allow the app time to produce badge data.
Last updated: August 2, 2026 Next: Run Compliance Check