# Price

{% 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 %}

## 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](https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/attributes)
* a price that is marked

## Data attributes

Displaying strikethrough pricing for products in a collection requires that data attributes are configured. Read [this article](https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/attributes) 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](https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/attributes#data-attributes). If data attributes are found, the product is assumed to be part of a collection.

The script can then apply strikethrough pricing to each of the products in the collection that it has detected.

## Location

Place the `la-dn-price` attribute on the HTML element that spans all of the following:

* The section of the theme that renders the standard price of the variant when the variant is not on sale (i.e. the variant does not have a *compare-at price* in Shopify)
* The section of the theme that renders the discounted price of the variant when the variant is on sale (i.e. the variant has a *compare-at price* in Shopify)

And, if applicable:

* The “Sold out” text displayed if the variant is out of stock
* The “Sale” badges displayed if the variant has a compare at price

Ensure the attribute class is not placed on a section that renders HTML that is not related to the price, such as:

* Review widgets
* Installments

since all content in the section with the above attribute is replaced with the discounted price when the variant is discounted through Discount Ninja.

### Snippet

Use the following snippet to add the data attribute in a Liquid template:

```css
data-la-dn-price
```

### Example

```html
<div class="price" data-la-dn-price>
    ...
    <span class="money">{{ product.price }}</span>
    <s class="money">{{ product.compare_at_price }}</s>
    ...
</div>
```

## Style

The style (font, color, size) as well as the format (strikethrough or not, price first or compare-at price first...) can be configured in the app.

In the menu go to **Settings** > **Dynamic Pricing** > **Price format**.

## Variant price

By default the price of the first available variant is used. The lowest price variant is used instead when the `data-la-dn-product-price-varies` attribute is set to `true`.&#x20;

To use the price of a different variant:

* set the `price` and `compare-at-price` attributes to the values of the variant you want to display prices for
* alternatively, provide the id of the variant in the `data-la-dn-product-variant` attribute. The app will then override the `price` and `compare-at-price` with the price of the `variant`.

## Variants with different prices

When products have variants with different prices, the `price-varies` attribute should be set to `true`. This causes the app to show the price of the product as follows "From `price-min`" where `price-min` is the lowest price of any variants of the product (example: *from $25.95*) . This behavior can be disabled in the app. The "from" label can also be changed or translated in the app.

## Unavailable products

If the selected product variant is unavailable, the `available` attribute should be set to `false`. This causes the app to show a "Sold out" label. This behavior can be disabled in the app. The "sold out" label can also be changed or translated in the app.

## Limitations

* The collection price shows a single price per product (by default the price of the variant with the lowest price). The app cannot display a price per variant on the collection page. Variants with different prices are supported on product pages.
* The app does not support:
  * The concept of “Unit price” (discounted prices cannot be displayed for unit prices)
  * Different prices for products per Market

## Integrations with other apps

Discount Ninja can render strikethrough pricing on collections that are managed by other apps. See [this article](https://developers.discountninja.io/integration#search-and-filter-apps) for more information.

The following articles provide details for the apps that Discount Ninja integrates with:

* [Boost AI Search & Filter](https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/price/boost-ai-search-and-filter-aka-pfs) (formerly known as PFS)
* [Searchanise Search & Filter](https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/price/searchanise-search-and-filter)
* [Globo Smart Search & Product Filte](https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/price/globo-smart-product-filter-and-search-aka-spf)r (SPF)
* [AI Search & Product Filter](https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/price/ai-search-and-product-filter-ultimate-search) (Ultimate Search)