VERSION: this article applies to Discount Ninja version 2.3 and above

Not sure how to edit your theme? Read this article first:
http://support.limoniapps.com/setting-up-dynamic-pricing/editing-your-theme

Open your "product in collection" template

  • Open your theme editor.
  • Next, find the template used to display a product in a collection in the Templates, Sections or Snippets folder. You're looking for the file that contains the markup that displays a card of the product with its price on the collection page.
  • The filename is different on each theme. Some themes use "product-card.liquid", others use "product-grid.liquid", "product-listing.liquid" or "product-block.liquid", but there are many other possibilities.
  • If you're not sure which file contains the liquid use the procedure described below to find it.

Not sure where to find your "product in collection" template?

Check out this article that describes how you can find it.

Take a backup

  • Copy the content of the template before you make any changes. Create a separate file and paste the content. Repeat for every file you plan to change. Better safe than sorry!

List of collections in which the product is found

In the liquid file that defines how a product is rendered in the collection, add the following lines at the top:

{%- assign limoniapps-discountninja-collections ="" -%}
{%- for collection in product.collections -%}
{%- assign limoniapps-discountninja-collections = limoniapps-discountninja-collections |append: collection.handle | append: "," -%}
{%- endfor -%} 

Important: This section assumes a "product" object is available. If you've selected the correct file you should see a number of references to "product". Example: "product.handle" or "product.title".

Add data tags

  • On the div or span that wraps around the markup for the product in the collection add the data tags mentioned below.
  • The data tags are as follows:
<span data-limoniapps-discountninja-product-handle="{{ product.handle }}"data-limoniapps-discountninja-product-price="{{ product.price_min }}"data-limoniapps-discountninja-product-compareatprice="{{product.compare_at_price_max }}" data-limoniapps-discountninja-product-collections="{{limoniapps-discountninja-collections }}">

...
html markup of product in collection
...

</span>

Change the product price

  • Inside this section you'll also find the markup for the product price.
  • The product price markup will contain references to the compare at price (product.compare_at_price) and the price (product.price) of the product.
  • Some themes have the price information in a different file, in which case you'll see an include tag in this section that looks something like this:
  • If your theme has such an include tag (the file name will be different for every theme), make the next changes in that file, if not you can make the changes in this section.
  • Add the class limoniapps-discountninja-productprice on an HTML element that spans around the price markup. This lets Discount Ninja know that the content of this HTML element can be replaced with the discounted price (including strikethrough of the original price, as configured in the settings of the app).
  • Important note: You want to make sure you put this class on an HTML element that includes only the compare at price and price markup. Typically "out of stock" labels or "review badges" are in close vicinity of this markup. Do not include them, otherwise this information will be hidden when the app replaces the content of the HTML element with the discounted price.
  • The end result looks something like this:
{%- assign limoniapps-discountninja-collections ="" -%}
{%- for collection in product.collections -%}
{%- assign limoniapps-discountninja-collections = limoniapps-discountninja-collections |append: collection.handle | append: "," -%}
{%- endfor -%}

...

<span data-limoniapps-discountninja-product-handle="{{ product.handle }}"data-limoniapps-discountninja-product-price="{{ product.price_min }}"data-limoniapps-discountninja-product-compareatprice="{{product.compare_at_price_max }}" data-limoniapps-discountninja-product-collections="{{limoniapps-discountninja-collections }}">

...
html markup of product in collection
...

<span class="other classes ... limoniapps-discountninja-productprice">

...
html markup of price of product in collection
...

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

Test

  • Save all files and test!
Did this answer your question?