> ## 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).

# How to hide a label in the cart, search and recommendations

# ${color}[#204a87](How to hide a label in the cart, search and recommendations)

${color}[#3465a4](**In this article:**)
* [Why labels appear in the cart and search](#1-why-labels-appear-in-the-cart-and-search)
* [Hide a label on whole pages](#1-hide-a-label-on-whole-pages)
* [Hide labels in the cart drawer, search dropdown or recommendations](#1-hide-labels-in-the-cart-drawer-search-dropdown-or-recommendations)
* [Show a small label on each image in the search dropdown](#1-show-a-small-label-on-each-image-in-the-search-dropdown)
* [Find the right block on your theme](#1-find-the-right-block-on-your-theme)
* [Add the rule to your theme](#1-add-the-rule-to-your-theme)

Labels help on product pages and collections, but in a small cart drawer or a search dropdown they can get in the way. This article shows how to hide them with a setting in Lably for whole pages or with a short CSS rule for a single block, and how to make them small and put each one on its own product image in the search dropdown.

# ${color}[#204a87](Why labels appear in the cart and search)

Lably adds a label to every product image that meets the label's conditions. That includes small images in the cart, in search results and in "You may also like" blocks.

These blocks have very small images, so the label can cover the product or end up in the wrong place. For example, in the cart drawer the label can end up in the drawer header, next to the "Your cart" heading, instead of on the product image:

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/cart-drawer-label-problem_nk4zu.png =400x309)


In the search dropdown, all the labels can stack in one corner on top of the results:

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/search-dropdown-label-problem_je62c1.png =600x506)


# ${color}[#204a87](Hide a label on whole pages)

Use this when the label shouldn't appear anywhere on a certain type of page, for example on the cart page or the search results page.

1. In Lably, open the label or badge.
2. Under **Customization**, click **Visibility on pages**.
3. Clear the checkbox next to the pages where the label shouldn't appear, for example **Search Results Pages** and **Cart Page**.
4. Click **Save** in the **Unsaved changes** bar at the top.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/visibility-on-pages_ear2w9.png =800x386)


The options are **Home Page**, **Product Pages**, **Search Results Pages**, **Cart Page**, **Collection Pages** and **Other Pages**. The setting applies to one label, so repeat it for each label or badge you want to hide.

|| This setting works by page, not by block. The cart drawer and the search dropdown open on top of the page the customer is on. For example, if a customer opens the cart drawer on a collection page, Lably treats it as a Collection Page, so the label still appears in the drawer even with Cart Page turned off. The same applies to "You may also like" blocks on the product page: they follow Product Pages. To change labels in these blocks only, use a CSS rule from the sections below.

# ${color}[#204a87](Hide labels in the cart drawer, search dropdown or recommendations)

A CSS rule in your theme can hide labels in one block only, while they keep working everywhere else. The rule has two parts: **which block** and **which labels**.

**Which labels:**

* `[class^="_lably_item"]`: all Lably labels and badges. Every Lably item has a class that starts with `_lably_item`, so one selector covers all of them, including the ones you create later.
* `[data-id="AP737089"]`: one label or badge. To find its ID, right-click the label on your store, select **Inspect**, and look for `data-id` on the highlighted element.

**Which block:** put the block's selector in front of the label selector, with a space between them. On Dawn and many themes based on it, these are:

* Cart drawer: `cart-drawer`
* Cart drawer and cart page: `.cart-item`
* Search dropdown: `predictive-search`
* "You may also like" (related products): `product-recommendations`

For example, this rule hides all labels and badges in the cart drawer, the search dropdown and related products:

```
cart-drawer [class^="_lably_item"],
predictive-search [class^="_lably_item"],
product-recommendations [class^="_lably_item"] {
  display: none !important;
}
```

To hide only one label in the cart drawer:

```
cart-drawer [data-id="AP737089"] {
  display: none !important;
}
```

Keep only the lines you need. Separate several blocks with commas, as in the first example, and always keep `!important`.

Labels on the product page and on collection pages stay as they are. Hiding a label doesn't leave an empty gap, because labels sit on top of the image and don't take up space in the layout.

# ${color}[#204a87](Show a small label on each image in the search dropdown)

If you'd rather keep the labels in the search dropdown, you can make them smaller and put each one on its own product image instead of hiding them.

The labels stack in one corner because the search results in many themes don't set a position for each result row. Every label then lines up with the whole dropdown, not with its own product, so they all end up on top of each other in its top-right corner. They also keep their full size, which is much bigger than the small search images.

This rule fixes both. It works on Dawn and many themes based on it:

```
predictive-search .predictive-search__list-item {
  position: relative;
}
predictive-search [class^="_lably_item"] {
  top: 10px !important;
  left: 20px !important;
  right: auto !important;
  scale: 0.4;
  transform-origin: top left;
}
```

What each part does:

* `position: relative` makes every label line up with its own search result.
* `top` and `left` move the label to the corner of the product image. On Dawn, the image starts 10px from the top and 20px from the left of the result.
* `scale: 0.4` shrinks the label to 40% of its size. On Dawn, a label made for the default 125px size then fits the 50px search image.
* `transform-origin: top left` keeps the label in that corner while it shrinks.

The search dropdown after adding the rule:

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/search-dropdown-labels-fixed_unp2p3.png =600x495)


If the label doesn't sit exactly on the image on your theme, change the `top` and `left` values. To make it bigger or smaller, change `scale` (for example, `0.5` is half the size). Change the size with `scale`, not with `width` and `height`, so the label's shape stays the same.

|| Use either this rule or the hiding rule for the search dropdown, not both. If both are in the field, the labels stay hidden.

# ${color}[#204a87](Find the right block on your theme)

Themes name their blocks differently. If the examples above don't work on your theme, find the name yourself:

1. Open the block on your store, for example the cart drawer.
2. Right-click the label inside it and select **Inspect**.
3. In the **Elements** panel, move up from the highlighted line and hover over the lines above it. Stop when the whole block (the whole drawer, dropdown or section) is highlighted on the page.
4. Use that element's tag name (for example, `cart-drawer`), its ID with `#` in front (`#CartDrawer`) or one of its classes with `.` in front (`.cart-drawer`).
5. Check the selector: go to the **Console** tab, type `document.querySelectorAll('cart-drawer [class^="_lably_item"]').length` with your block name and press **Enter**. A number above `0` means the rule will find labels there. `0` means nothing matches, so check the name.

For the search dropdown fix, you also need the element of one search result: it's usually the line right above the label in the **Elements** panel (on Dawn, `li` with the class `predictive-search__list-item`). Use its class in the first part of the rule.

|| Choose a block that contains only the area you want to change. If you pick a block that wraps the whole page, such as `main` or `body`, the rule changes every label on the store.

# ${color}[#204a87](Add the rule to your theme)

1. In Shopify admin, go to **Sales channels > Online Store** and click **Edit theme**.
2. Click the gear icon to open **Theme settings**.
3. Scroll down and open **Custom CSS**.
4. Paste the rule into the **CSS** field and click **Save**.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/theme-settings-custom-css_c40szz.png =800x450)


The field adds styles to your entire online store and holds up to 1500 characters. If there is already CSS in the field, add your rule below it. Don't replace it.

To undo the change, delete the rule from the field and click **Save**.

If your theme has no **Custom CSS** field, or the rule has no effect, contact us at support@devit.software. Include the page link and describe where the label should be hidden or moved.

# ✔️ Next step

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

* [Custom CSS selector](https://help.devit.software/en/article/custom-css-selector-1sz5h32/)
* [Labels or badges not showing in your store? Check these settings](https://help.devit.software/en/article/my-labels-are-not-showing-what-should-i-do-sdc4gh/)
* [Quick start: create and publish your first label in Lably](https://help.devit.software/en/article/getting-started-in-lably-15l9psm/)