> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/energy-label/displaying-energy-labels/how-badge-placement-works.md).

# 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.

{% hint style="success" %}
**Don't feel like hunting for selectors?** [Send us your store URL](https://staylime.zendesk.com/hc/en-us/requests/new?ticket_form_id=19215206069265\&tf_19227538494609=shopify_app) and we'll set the badges up in your theme for you — it's included in support.
{% endhint %}

### 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:

   ```html
   <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**.

{% columns %}
{% column %}

<figure><img src="https://3301369913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxVJktUBFEDa8kf65lOm9%2Fuploads%2FvO9l9YXwOC0Xk6q7x0uZ%2Fimage.png?alt=media&#x26;token=3165b523-757d-42a5-a2fa-8581b8e417f8" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://3301369913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxVJktUBFEDa8kf65lOm9%2Fuploads%2FlkGqAFxBD71QJg7a52gH%2Fimage.png?alt=media&#x26;token=0d3638b8-16a0-4c62-8d73-204d5976565b" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

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.

{% hint style="info" %}
For **Dawn v15.3.0**, we've pre-tested the exact selector values — see [Collection, search, and cart pages](/docs/energy-label/displaying-energy-labels/collection-search-and-cart-pages.md).
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/energy-label/displaying-energy-labels/how-badge-placement-works.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.