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.