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.