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 template

  • Find your product template in the Templates, Sections or Snippets folder. You're looking for the file that contains the markup that displays the price on the product page.
  • The name of this file varies per theme. Some themes use "product-template.liquid" others have different names.
  • Search the file (use CTRL+F when inside the code panel) for the following text: .price | money. You should find one or more blocks of markup that look similar to this: {{ product.price | money }} (where product could be a different name such as current_variant or other).

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!

Mark the 'price section'

  • Find the section that includes your price markup (cf. above).
  • The section you're looking for contains all of the html that shows prices and compare at prices and sales tags... This section is different for each theme.
  • Discount Ninja looks for an html element which has a limoniapps-discount-url-productprice class.
  • If there is a <div> html element that spans this section, we can simply add the class to it. That looks as follows:
<div ... class="other classes ... limoniapps-discountninja-productprice">

...
html related to showing {{ variant.price | money }}
and {{ variant.compare_at_price | money }}
...

</div>
  • If there is no html element that spans this section, you'll need to create one yourself.
  • This goes at the start: <span class="limoniapps-discount-url-productprice">.
  • And this goes at the end: </span>.
  • The end result looks something like this: 
<span class="limoniapps-discountninja-productprice">

...
html related to showing {{ variant.price | money }}
and {{ variant.compare_at_price | money }}
...

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

Test

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