> 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/collection-search-and-cart-pages.md).

# Collection, search, and cart pages

Pre-tested CSS selector values for collection, search, cart, and cart drawer templates in Dawn — and how to adapt them to your theme.

Badges on these templates are placed with CSS selectors in the app embed settings. If you haven't worked with selectors yet, start with How badge placement works — it explains how to find the right values in any theme. Below are the pre-tested values for **Dawn v15.3.0** and template-specific notes.

## Collection and search

| **Setting**               | **Value in Dawn v15.3.0** |
| ------------------------- | ------------------------- |
| Product card CSS selector | `grid__item`              |
| Energy badge CSS selector | `card__information`       |

* **Product card CSS selector** targets the product card element within the grid. In Dawn, that's the list item `grid__item`:

<figure><img src="https://3301369913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxVJktUBFEDa8kf65lOm9%2Fuploads%2FZ0NojVCt5svmmZ7PYO4F%2Fimage.png?alt=media&#x26;token=f5542732-d1fb-4dcb-acfd-4e6cd45f3982" alt=""><figcaption></figcaption></figure>

* **Energy badge CSS selector** targets the element **under** which the badge is displayed — in Dawn, the product's information block `card__information`:

<figure><img src="https://3301369913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxVJktUBFEDa8kf65lOm9%2Fuploads%2FcskrzofCDGMiEFk7MUEI%2Fimage.png?alt=media&#x26;token=1ba13561-cd26-422a-8367-ad61379e19c7" alt=""><figcaption></figcaption></figure>

In Dawn, the **Search** template shares the same structure as **Collection**, so the same selectors work for both. If your theme uses a different layout for search results, inspect its HTML the same way and define its own selectors.

<figure><img src="https://3301369913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxVJktUBFEDa8kf65lOm9%2Fuploads%2FoS380zdEUlvC3ThUN8je%2Fimage.png?alt=media&#x26;token=66e9f994-1b59-442b-a506-66f61ae79c4f" alt=""><figcaption></figcaption></figure>

## Cart

| **Setting**               | **Value in Dawn v15.3.0** |
| ------------------------- | ------------------------- |
| Product card CSS selector | `cart-item`               |
| Energy badge CSS selector | `product-option`          |

* **Product card CSS selector** targets the product card element within the cart — in Dawn, `cart-item`:

<figure><img src="https://3301369913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxVJktUBFEDa8kf65lOm9%2Fuploads%2Fp4LlPP4mVF1Do8oRqTp8%2Fimage.png?alt=media&#x26;token=ff4c87e4-f776-4c53-bc30-56af8dffdbfe" alt=""><figcaption></figcaption></figure>

* **Energy badge CSS selector** targets the element **under** which the badge is displayed — in Dawn, `product-option`:

<figure><img src="https://3301369913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxVJktUBFEDa8kf65lOm9%2Fuploads%2FeQ8xqoRrVBGAbExnIRwq%2Fimage.png?alt=media&#x26;token=fc30f61f-14b1-4fcd-9deb-6007da1d5806" alt=""><figcaption></figcaption></figure>

## Cart drawer

| **Setting**               | **Value in Dawn v15.3.0** |
| ------------------------- | ------------------------- |
| Cart drawer CSS selector  | `cart-drawer`             |
| Product card CSS selector | `cart-item`               |
| Energy badge CSS selector | `product-option`          |

The **cart drawer** is not a standalone template but a component embedded into the theme, so the setup differs slightly.

{% stepper %}
{% step %}

#### Make sure your theme supports a cart drawer

Some themes use a traditional cart page only. In **Dawn**, you can enable the cart drawer under **Online store → Themes → Customize → Theme settings → Cart → Type**, by selecting **Drawer**:

<figure><img src="https://3301369913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxVJktUBFEDa8kf65lOm9%2Fuploads%2F4HsUKRJwWsX9iI4hOcqC%2Fimage.png?alt=media&#x26;token=7322835b-39f6-4a83-af46-fb9c29d8be06" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
The exact location of this setting may vary by theme. If you don't see the option, your theme may not support a cart drawer out of the box.
{% endhint %}
{% endstep %}

{% step %}

#### Add a product to your cart

Open your storefront in a new browser tab and add at least one product to the cart — the drawer and its HTML only appear on the page once the cart isn't empty.
{% endstep %}

{% step %}

#### Inspect the cart drawer structure

First identify the CSS selector of the **cart drawer wrapper itself** — a required field that tells the app where to look for product cards inside the drawer. In Dawn v15.3.0 it's `cart-drawer`:

<figure><img src="https://3301369913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxVJktUBFEDa8kf65lOm9%2Fuploads%2Fp5PGgM43BWwNN2pRVeY8%2Fimage.png?alt=media&#x26;token=11d6da51-58de-4962-be4f-2f26302e31b8" alt=""><figcaption></figcaption></figure>

Then define the **Product card** and **Energy badge** selectors the same way as for the cart template. In Dawn, the cart selectors apply to the drawer as well.
{% endstep %}
{% endstepper %}

***

Once badges are displayed, adjust their size, alignment, and margins in the style settings to match your store's design.


---

# 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/collection-search-and-cart-pages.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.