All Collections
Setting up Dynamic Pricing
Collection page
Set up Dynamic Pricing for collection product prices
Set up Dynamic Pricing for collection product prices

Learn how to make the necessary changes to your theme files to enable Dynamic Pricing on collection pages

Bart Coppens avatar
Written by Bart Coppens
Updated over a week ago

This article applies to Discount Ninja version 3 and above

Find your collection product template first. Not sure how to find or edit the file? Read this article first.

Add data tags

  • On the div or span that wraps around the markup for the product in the collection add the following data tags:

  • [REQUIRED] data-limoniapps-discountninja-product-handle="{{ product.handle }}"

  • [REQUIRED] data-limoniapps-discountninja-product-collections="{{ product.collections | map: 'handle' | join: ',' }}"

  • [RECOMMENDED] data-limoniapps-discountninja-product-collectionids="{{ product.collections | map: 'id' | join: ',' }}"

  • [RECOMMENDED] data-limoniapps-discountninja-product-available="{{ product.available}}"

  • [RECOMMENDED] data-limoniapps-discountninja-product-price="{{ product.price}}"

  • [RECOMMENDED] data-limoniapps-discountninja-product-compareatprice="{{ product.compare_at_price_max}}"

  • [RECOMMENDED] data-limoniapps-discountninja-product-pricevaries="{{ product.price_varies}}"

  • [RECOMMENDED] data-limoniapps-discountninja-product-pricemin="{{ product.price_min}}"

  • [RECOMMENDED] data-limoniapps-discountninja-product-tags="{{ product.tags | join: ',' }}"

The end result looks as follows:

<span data-limoniapps-discountninja-product-handle="{{ product.handle }}" data-limoniapps-discountninja-product-collections="{{ product.collections | map: 'handle' | join: ',' }}" data-limoniapps-discountninja-product-collectionids="{{ product.collections | map: 'id' | join: ',' }}" data-limoniapps-discountninja-product-available="{{ product.available}}" data-limoniapps-discountninja-product-price="{{ product.price}}" data-limoniapps-discountninja-product-compareatprice="{{ product.compare_at_price_max}}" data-limoniapps-discountninja-product-pricevaries="{{ product.price_varies}}" data-limoniapps-discountninja-product-pricemin="{{ product.price_min}}" data-limoniapps-discountninja-product-tags="{{ product.tags | join: ',' }}">
   ...
   html markup of product in collection
   ...
</span>

Change the product price

  • Inside this section, you'll also find the markup for the product price.

  • Add the following class to the markup of the price

limoniapps-discountninja-productprice
  • The technique is identical to the one described here for the product page

Set horizontal alignment

To adjust the alignment of the price you can add one of the following classes to the markup of the price (remember to always separate class names with a space):

  • limoniapps-discountninja-align-left

  • limoniapps-discountninja-align-center

  • limoniapps-discountninja-align-right

Collection badge (optional)

By default, the app will place the collection badge in the element that has the data-limoniapps-discountninja-product-handle attribute.

If you need to select a different element for the collection badge, you can use the limoniapps-discountninja-collectionbadge class.

Typically you'll want to add this class to the element that contains the image of the product:

<span class="limoniapps-discountninja-collectionbadge">
...
image of the product
...
</span>

The span with the collection badge class should be inside the span with the data tags:

<span data-limoniapps-discountninja-product-handle="{{ product.handle }}" data-limoniapps-discountninja-product-collections="{{ product.collections | map: 'handle' | join: ',' }}" data-limoniapps-discountninja-product-available="{{ product.available}}" data-limoniapps-discountninja-product-price="{{ product.price}}" data-limoniapps-discountninja-product-compareatprice="{{ product.compare_at_price_max}}" data-limoniapps-discountninja-product-pricevaries="{{ product.price_varies}}" data-limoniapps-discountninja-product-pricemin="{{ product.price_min}}" data-limoniapps-discountninja-product-tags="{{ product.tags}}">
...
html markup of product in collection
<span class="limoniapps-discountninja-collectionbadge">
...
image of the product
...
</span>
...
</span>

Other collection templates

Repeat this procedure for all other collections or product cards (used in a menu or on the home page for example) for which you wish to show discounted prices.

Did this answer your question?