Liquid, JavaScript, themes, sales channels
BEFORE YOU START, note that I am using the Debut theme for the examples and that It has jQuery in It. I WILL use some jQuery code in this alternative. If your theme does not support jQuery, feel free to ADAPT IT into JavaScript.
If you are new to Shopify, know that the variant.inventory_quantity has sadly been deprecated (removed from Shopify) and returns « undefined » when called in the theme.js file. Here’s an alternate way to still show how many items are left for every variant.
THIS IS READ ONLY
First step, you want to go in the product.liquid (or product-template.liquid) file. Depending on your theme, one of these two has the html code to show the product page. I am personally using the Debut theme and it was in product-template.liquid.
Second step, you want to find where you want to show to the item quantity and add this line of code:
<div>We currently have <B id="variant-inventory">{{ current_variant.inventory_quantity }}</B> in stock.</div>
Note that you can personalise this line how you want, but be sure to have the line <B id="variant-inventory">{{ current_variant.inventory_quantity }}</B> . Note that the html tag can be anything, here I wanted it to be in bold for esthetic so I put <B></B>, but be sure to keep the id="variant-inventory”.
Here’s an example:
Third step, once you are done with the html, it should show you how many items there is for the current item variant, but if you change the variant, the quantity won’t change (It is normal).
If you have a product with no variant, you are done.
Example:
For variants, you will need to open your theme.js or the file associated to it depending on your theme and go to the place in your code were a function executes the change of information when the variant changes.
In the debut theme, it is the “_onSelectChange: function()”.
Note: ctrl + F to make a search in the document and look for key words that could bring you at somewhere similar.
Example:
Fourth step, add this function and call it:
call:
this._updateQuantity(variant);
The variant here is a parameter that detects witch variant is active. This variates between themes.
function:
_updateQuantity: function(){ setTimeout(function(){ $( "#variant-inventory" ).load(window.location.href + " #variant-inventory" ); }, 100); },
Example:
Explanation: the line in html “{{ current_variant.inventory_quantity }}” shows the current amount of items for the variant that is showing on the screen on refresh. So, if you select a variant and refresh the page, it will show the inventory quantity of the current variant selected.
Therefore, you don’t want to refresh the whole page on a variant change, but just the number of the quantity. Note that the set.timeout is there to refresh the location first an then show the inventory quantity. Otherwise, it will refresh, but it will show the quantity of the previous item.
In conclusion, this Is not the most optimised alternative and it does take a fraction of second to load, but It’s the simplest way I have found.
If you guys have any other way or have a better way of doing it, feel free to share down below.
Hope it helps!
Bonus: if want to know how I can show specific images for my variants, see this video
Solved! Go to the solution
This is an accepted solution.
This whole post is a solution btw lol 🙂
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024