FROM CACHE - en_header

Dynamically display savings calculation based on variant selected

12 1 2

Hi y'all,

I'm currently displaying the product price dynamically based on the variant selected (each variant has a different price).   But I also want to display the savings (when buying 3 bottles vs 1), also dynamically.  I have the formula correct and the calculation is working when user lands on the page, but it's not dynamically displaying when user changes the variant on the page.

I'm wondering if the answer sits in the theme.js file, and not the product-template.liquid (at least, I can't find it there).

I've attached both files for review.  I'm using a test product that has "TEST" in the title, so you'll see some "IF" evaluations based on this.

Thank you!


Replies 3 (3)
Shopify Partner
665 94 129

Hi @LucasSoler 

Your attachments are too much to read tbh, but what are you doing? If you want 'dynamic updates' i.e. you want items to update and change after page load, you need to understand javascript/jquery.

You basically need to do math formulas based on the variants selected.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.

To hire me, visit my Upwork profile

12 1 2

Hi, yes, I already do the calculation, let's call it "savings".  And I'm displaying it in the right place.  My issue is that when the customer selects a different variant, this value I'm displaying is not changing, and I need it to.   

I can't figure out why the "product.price" (in ORANGE below) is dynamically changing with the variant change, but the items in PINK will not dynamically update.


 <div class="product-single__prices{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__prices--policy-enabled{% endif %}">

            <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>

            <span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">

              {{ product.price | money }} </span>


           <span class="order-discount order-discount--price h5">savings: {{ product.price | times: 2 | minus: variant.price | money }}</span>


25 0 4

Did you ever figure this out?  Implementing something similar.