# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.