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.