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:

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

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.

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:

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

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.

1

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:

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.

2

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.

3

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:

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.

---

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