The below procedures are optional.

Hide sections when changing prices

Sometimes you may want to hide a section (for example a [SAVE 10%] badge) when Discount Ninja replaces prices.
To do so, mark that section with the class limoniapps-discountninja-productprice-hideafterreplace.
Ensure this html is inside an html element with the class limoniapps-discountninja-productprice-wrapper.
Discount Ninja expects the section with the limoniapps-discountninja-productprice class to also be inside the wrapper.

The end result should look like this:

<div class="other classes ... limoniapps-discountninja-productprice-wrapper">
...
<div class="other classes ... limoniapps-discountninja-productprice-hideafterreplace">
... content to be replaced (e.g. sales badge)
</div>
...
<div class="other classes ... limoniapps-discountninja-productprice">
... pricing section
</div>
...
</div>

Add markup to show "loading" effect

  • Discount Ninja uses client side technology to change the price. On a slow connection and this can occasionally cause Dynamic Pricing to kick in after a few seconds (only on the first page loaded). To avoid that your customers don't wait for prices to update, Discount Ninja can optionally display a "loading effect", which requires some additional markup. 
  • The "loading" effect "greys out" the price. The settings of the app allow you to control how long this effect can last. To avoid issues this effect is implemented with css, not with JavaScript.
  • To set it up you just need to add the class limoniapps-discountninja-block to the element that has the limoniapps-discountninja-productprice class
  • The end result looks something like this: 
<span class="limoniapps-discountninja-productprice limoniapps-discountninja-block">

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

</span>

Add markup to show "three dots" effect

  • You can optionally add three animated dots to overlay the price.
  • Here's where you put the markup:
<span class="limoniapps-discountninja-productprice limoniapps-discountninja-block">

<div class="limoniapps-discountninja-dots-wrapper"><div class="limoniapps-discountninja-dots"></div></div>

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

</span>
Did this answer your question?