Badges not showing on product cards? Set the product card selector

1. Check the app embed first

In Online Store, Themes, Customize, open App embeds and check that Badges on product images is on and that Collection and search pages is checked, under Product cards. Most missing badges come from this step, not from the selector.

2. Find the element that holds the card image

Open a collection page of your store in Chrome, Edge or Firefox on a computer, then:

• Right-click the image of a product card and choose Inspect.
• In the panel that opens, the img tag is selected. Move up one or two lines to the element that wraps the image (often a div or a figure).
• Hover it: the browser highlights it on the page. It should cover exactly the image, not the title or the price.
• Note its class, for example class="card__media". The selector is that class with a dot in front: .card__media

3. Paste the selector in the theme editor

Back in Customize, App embeds, Badges on product images, go to the Advanced part and paste the selector in Product card selector. Save, then reload the collection page: badges now sit in the corners of each card image.

The element can wrap the product link or sit next to it inside the card: both work.

Pick a good selector

A few rules avoid surprises:

• Use a class shared by every card, not an id (#…), which is unique to one card.
• Avoid classes that look generated, such as .x7f3a2, which change when the theme is updated.
• If the element has several classes, one is enough. Keep the most descriptive one, like .product-card__image.
• On Dawn and the themes based on it, the selector is .card__media.