> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.devit.software/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom CSS selector

# ${color}[#204a87](Custom CSS selector for labels and badges)

${color}[#3465a4](**In this article:**)
* [When you need a custom selector](#1-when-you-need-a-custom-selector)
* [Add a selector to a label](#1-add-a-selector-to-a-label)
* [Add a selector to a badge](#1-add-a-selector-to-a-badge)
* [Default, Primary and Secondary selectors](#1-default-primary-and-secondary-selectors)
* [How to find the right selector](#1-how-to-find-the-right-selector)
* [Selector syntax basics](#1-selector-syntax-basics)
* [Class names that start with a hash symbol](#1-class-names-that-start-with-a-hash-symbol)
* [Troubleshooting](#1-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.

# ${color}[#204a87](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.

|| Before you start, check the basics: the app is enabled in **App embeds**, the item is **Published**, and its display settings and conditions are correct. See [My labels are not showing - what should I do?](https://help.devit.software/en/article/my-labels-are-not-showing-what-should-i-do-sdc4gh/)

# ${color}[#204a87](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.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/label-position-custom-css-sele_1ugs3st.png =800x382)

3. In the **Configure CSS selectors** window, fill in only the fields you need (see [Default, Primary and Secondary selectors](#1-default-primary-and-secondary-selectors)).
4. Click **Apply**, then click **Save** at the top of the page.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/configure-css-selectors-window_1ct1yq.png =800x382)

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.

# ${color}[#204a87](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.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/badge-position-custom_cjdua.png =800x382)

|| Selectors only work while **Custom** is selected. If you switch the badge back to a preset position, such as **Above product title**, your saved selectors are ignored.

# ${color}[#204a87](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.

|| Important: the Default selector also applies to the product page. If you enter a selector that exists only on product cards, the label disappears from the product page. To change only product cards, use **Secondary**. To change only the product page, use **Primary**.

# ${color}[#204a87](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.
   * 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/5_bditwc.png =800xauto)


# ${color}[#204a87](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`

# ${color}[#204a87](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`.

# ${color}[#204a87](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?](https://help.devit.software/en/article/my-labels-are-not-showing-what-should-i-do-sdc4gh/)
* [Getting Started in Lably](https://help.devit.software/en/article/getting-started-in-lably-15l9psm/)