Add inventory of a product on a different product page with variables.

9 0 0

I am trying to have a running inventory of 2 different products on a page.  this is the code i have so far but it not pulling in the product inventory that has 6 variables.  Any help?

<p>The first 200 widgets donated will be place around the center statue "Columbia". There are currently <strong><span id="columbia-inventory"></span></strong> widget spots left.</p>                

              	<script>// <![CDATA[
                  {% for product in collections.all.products %}
                      {% if product.handle == 'widget' %}
                  	  {% for variant in product.variants %}
                  	      var b = {{ variant.inventory_quantity }};
                  	  {% endfor %} 
                      {% endif %}
                  {% endfor %}
                  var x = {{ current_variant.inventory_quantity }} + b;
                              document.getElementById("widget").innerHTML = x;
                // ]]></script>
Shopify Partner
30 4 32

Hi @BVPark!


Karl from Shogun Page Builder here. Just wanted to pop by and give you a code-less solution to this. :)


Shogun has a feature called a Product Box which allows you to drop a product into any page. A Product Box would allow you to add as many products as you needed into a single page, and thus keep track of the inventory of all of the products automatically - through Shopify and it's built in features.


One thing that I did notice while looking into your code is that it appears that you may be targeting the wrong element when inserting the inventory into the <span>, as you are currently targeting the widget ID rather than the columbia-inventory ID. 


document.getElementById("widget").innerHTML = x;

should be the following: 

document.getElementById("columbia-inventory").innerHTML = x;


I hope that this helps!

Shopify Expert
2676 65 667

That code is a bit too complex.

If I'd have to output total inventory of all variants of a product with handle 'widget', I'd be doing it like this:

{% assign widget_product = all_products[ 'widget' ] %}
{% assign widget_total = 0 %}
{% for v in widget_product.variants %}
{% assign widget_total = widget_total | plus: v.inventory_quantity %}
{% endfor %}

The first 200 widgets donated will be place around the center statue "Columbia". There are currently
<strong><span id="columbia-inventory">{{ widget_total }}</span></strong>
widget spots left.
Want to hire me to tweak a theme? Mail me at!
My post solved your problem? Like it!
1 Like