Custom CSS selector for labels and badges

In this article:

• When you need a custom selector
• Add a selector to a label
• Add a selector to a badge
• Default, Primary and Secondary selectors
• How to find the right selector
• Selector syntax basics
• Class names that start with a hash symbol
• Troubleshooting

Lably finds the product image, card and title on most themes automatically. Some themes use their own layout, and the app can't tell where to place a label or badge. In that case, you can point Lably to the right spot with a custom CSS selector. It works like an address for an element on your store page.

When you need a custom selector

Use a custom selector when a label or badge is published but:

• doesn't appear on product pages, collections, or in related products,
• appears in the wrong place,
• appears twice on the same product.

Add a selector to a label

1. Open the label and go to Customization > Position.
2. Next to Custom CSS selector, click the pen icon.

3. In the Configure CSS selectors window, fill in only the fields you need (see Default, Primary and Secondary selectors).
4. Click Apply, then click Save at the top of the page.

The Custom CSS selector field in the Position section is the same as Default selector in this window. If you change one, the other changes too.

Add a selector to a badge

1. Open the badge and go to Customization > Position.
2. In Choose your Badge position, select Custom. The Custom CSS selector field appears.
3. Click the pen icon, fill in the fields, and click Apply.
4. Click Save at the top of the page.

Default, Primary and Secondary selectors

• Default selector is used everywhere: on the product page and on all product cards. Lably uses it only where Primary or Secondary is empty.
• Primary product selector is used for the main product on a product page.
• Secondary product selector is used for product cards: collections, the home page, related products, recommendations and similar sections.

Primary and Secondary take priority over Default in their own area. If all three fields are empty, Lably uses its built-in placement.

How to find the right selector

1. Open the page in your store where the label or badge should appear.
2. Right-click the product image (or the element you want) and select Inspect.
3. In the Elements panel, hover over the lines of code. The highlighted area on the page shows which element each line is. Move up until the highlight covers the whole block where the label should sit.
4. Look at the element's class, for example <div class="card__media">, and write it as a selector: .card__media.
5. Check it: open the Console tab, type document.querySelectorAll('.card__media').length and press Enter.
6. • A number such as 12 means the selector matches 12 elements (for example, one per product card).
   • 0 means nothing matches, so check the spelling.
   • A red error means the selector syntax is invalid.

The label or badge is placed inside the element you choose. For labels, the corner set in Position still applies.

Choose one short class that describes the block, such as .card__media. Don't copy long auto-generated paths like #section-cart-template DIV.container FORM DIV.row.... They break as soon as the theme changes.

Selector syntax basics

• Class — add a dot. class="product-card" → .product-card. Without the dot, product-card looks for an HTML tag with that name and finds nothing.
• ID — add a hash. id="main-gallery" → #main-gallery.
• Element with several classes — no spaces. class="card card--standard" → .card.card--standard.
• Element inside another element — use a space. .card__inner .card__heading means "a heading inside the card's inner block". This makes a selector more precise.
• Several places at once — use a comma. .card__media, .product-media-container

Class names that start with a hash symbol

Some themes use class names that begin with #, for example <div class="#product-card-media">. Adding a dot in front is not enough here:

• .#product-card-media — invalid. The label or badge won't appear at all.
• #product-card-media — looks for an ID, not a class, so nothing is found.
• .\#product-card-media — correct. Add a backslash \ before the #.
• [class~="#product-card-media"] — also correct, and no backslash is needed.

Example of a working setup on such a theme:

• Primary product selector: .\#product-gallery-stage
• Secondary product selector: .\#product-card-media-inner, .\#product-quick-view-media

The same rule applies to other special characters in class names, such as @ or :. Put a backslash before each one, for example .\@animate-loading.

Troubleshooting

The label or badge disappeared after I added a selector.
The selector is probably invalid, for example .#name or a missing bracket. Open Inspect > Console and look for an error ending in is not a valid selector. Fix the syntax, then Apply and Save. Only the item with the invalid selector is affected. Your other labels keep working.

It shows on product cards but disappeared from the product page.
You used the Default selector with a class that exists only on cards. Move it to Secondary product selector, or also fill in Primary product selector.

It appears twice on the same product.
Your selector matches more than one element per product. Many themes repeat the same block inside a card. Make the selector more specific, for example div.product__title instead of .product__title, or .card__inner .card__heading instead of .card__heading. Then check the count in the Console again.

The Console shows [Lably] Couldn't find a selector to place a label…
Your selector doesn't match anything on this page. Check the spelling, the dot before class names, and the backslash before #.

The badge ignores my selector.
Make sure Choose your Badge position is set to Custom.

I saved, but nothing changed.
Changes can take a few seconds to reach your store. Refresh the page. Also check that you clicked Save at the top of the page after Apply.

Still not working? Contact us at support@devit.software, and include the page link and the selector you used.

✔️ Next step

Check our articles to learn more about the app's functionality:

• My labels are not showing - what should I do?
• Getting Started in Lably

Updated on: 01/10/2026