> For the complete documentation index, see [llms.txt](https://developers.discountninja.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/badge.md).

# Badge

{% hint style="info" %}
The term **collections** is used to refer to collection pages (Product Listing Page or PLP) as well as lists of products displayed on any other page. For example, collections can be included on a home page or a Product Detail Page (PDP). 
{% endhint %}

{% hint style="warning" %}
This code edit is optional and should only be performed if the default position of the badge is not in line with expectations. However, the data attributes are always required for the badge to be displayed.
{% endhint %}

## Requirements

To show strikethrough pricing and/or badges in collections, you must edit the theme to ensure that each product in a collection has:

* [data attributes](/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/attributes.md)
* a [price](/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/price.md) that is marked

## Data attributes

Displaying badges on products in a collection requires that data attributes are configured. Read [this article](/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/attributes.md) to learn how to set up the required data attributes.

## Mechanism

The script will look for Discount Ninja price sections on a page.

The script will then, for each price, find the HTML parent that includes [data attributes](/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/attributes.md#data-attributes). If data attributes are found, the product is assumed to be part of a collection.

The script will then add the badge as a child of the HTML parent. If you want to place the badge in a different location you must mark that location with the CSS class `la-dn-collection-badge`.

## Location

If the default location of the badge does not meet your expectations, place the `la-dn-collection-badge` CSS class on the HTML element where the collection badge should be displayed. Typically the badge is displayed on the `img` element that displays the product image in the collection. Note that this CSS class changes the `position` attribute of the element to `relative`.

The HTML element with the CSS class `la-dn-collection-badge` class must be an element that is nested inside the HTML element with the [data attributes](/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/attributes.md).

### Snippet

Use the following snippet to add the CSS class in a Liquid template:

```css
la-dn-collection-badge
```

### Example

```html
<div class="collection-product"
     data-la-dn-product-handle="{{ product.handle }}" 
    ...>
    <img ... class="la-dn-collection-badge">
    <div class="price" data-la-dn-price>
        <span class="money">{{ product.price }}</span>
        ...
    </div>
</div>
```

## Style

The style (text color, background color, size, shape) as well as the text (-20%, 1+1 FREE, ...) can be configured in the app by editing the widgets associated with the offers.

## Integrations with other apps

The native collection badges of your theme or third-party app may conflict with the collection badges displayed by Discount Ninja.

To avoid this you can add a CSS rule that will hide the other badges when Discount Ninja's badges are displayed:

* Identify the CSS selector for your theme's collection badges. In the example below this selector is `TODO-THEME-SPECIFIC`
* Add a custom CSS rule in Discount Ninja (Menu > Settings > Custom CSS):

```css
.limoniapps-discountninja-hidethirdpartybadges TODO-THEME-SPECIFIC { display: none; }
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/badge.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.