How badge placement works

Why the app uses CSS selectors to place badges on collection, search, and cart pages — and how to find the right ones in your theme.

On the product page, the badge lives in an app block that you position visually in the theme editor. Every other template — collection, search, cart, and cart drawer — is built differently in every theme, so the app relies on CSS selectors to know where badges belong. For each template you define two of them:

• Product card CSS selector — identifies each product's container (the product card).
• Energy badge CSS selector — the element under which the badge is inserted (usually the price or title).

You find these selectors once in your theme's HTML, enter them in the app embed settings, and the app places badges on every matching product across the template.

Don't feel like hunting for selectors? Send us your store URL and we'll set the badges up in your theme for you — it's included in support.

Finding a selector in your theme

1. Open your storefront on the page where you want the energy badge to appear — for example, a collection page.
2. Right-click the spot where the badge should show — the product card, or the element below which the badge belongs (price, title) — and choose Inspect (Chrome) or Inspect Element (Safari, Firefox). The browser's developer tools open with that section's code highlighted.
3. Look for the class name. In the HTML, find the class="..." attribute of the element — for example:

   <div class="card__information">

   Here, card__information is the CSS class name you need.
4. Copy the class name and paste it into the matching field in the app embed settings.

Where to enter the selectors

1. Go to Online store → Themes → Edit theme.
2. In the editor, click the App embeds icon on the left.
3. Locate Energy Label and make sure it's toggled on.
4. Scroll down to the Collection, Search, Cart, and Cart drawer settings.
5. Paste the selectors into the appropriate fields and click Save.

Once the badge appears, use the app's style settings — size, alignment, and margins — to fine-tune its placement. Keep the class letter in the badge the same size as your price — the regulation requires the font size in the energy arrow to be identical to the font size of the price.

For Dawn v15.3.0, we've pre-tested the exact selector values — see Collection, search, and cart pages.