This article applies to Discount Ninja version 3 and above

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

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-discountninja-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-discountninja-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: The content of the HTML element marked with this class will be replaced by Discount Ninja if a discounted price is available.

Advanced techniques

If the above approach is not flexible enough for your theme, please check the advanced techniques available here.

Did this answer your question?