Collection Price

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 page (Product Detail Page).

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

• a price that is marked

Data attributes

Displaying strikethrough pricing for products in a collection requires that data attributes are configured. Read this article 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. 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. 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. does not have 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:

data-la-dn-price

Example

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

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 for more information.