shopify with multiple variants not showing the proper quantity. how to fix

Question

i have shopify show the correct quantities in stock BUT only if i refresh the page on each variant. for example: i have 12 variants the quantities vary from 1-8 but if i click variant-1 it shows i have two. if i click variant-6 it still shows i have 2 UNLESS i click to refresh the page and then it will show the correct amount in stock. i am trying to fix this so when i change variant the price and the quantity update together but not sure how. can you help me?

this is the code im using

{% comment %} Inventory tracking on product page {% endcomment %}
        <div id="variant-inventory" class="{% unless current_variant.available %} hide {% endunless %}">
          {% if current_variant.inventory_management == "shopify" and current_variant.inventory_policy != "continue" %}
          We have {{ current_variant.inventory_quantity }} in stock.
          {% else %}
          This product is available.
          {% endif %}
        </div>

It is in line 121 of: product-template.liquid

Answer 1

Your product-template.liquid will only affect what is visible on page load - it is not dynamic, and liquid has no way of knowing what events have occurred on the page after it loads.

In order to achieve what you're looking for, you'll need some client side JS to watch for a change in which variant is selected, and update the copy respectively.