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 🙂
Thanks for this summary! That's a creative solution. This was super easy when variant.inventory_quantity existed, and I wish there was a more straightforward way to do this still, but hey this works for now.
I'm having problems with the last bit of this - I was able to enter the code that displays variant quantity available but when I add the function to refresh it with each new variant selected it isn't working. I'm wondering if I'm placing it in the wrong spot. I'm super new to this - any help would be appreciated.
This shows the inventory for the default variant, but does not update when selecting a different variant. I don't know why it isn't working for me when it obviously works for others. Maybe a change in the theme since this was posted?
If you need this to update per variant and or in different contexts you may want to mix the lessons here with implementing a customized version of Product availability modified with the variant.inventory_quantity data , but skipping the drawer-modal.
As that's using the section rendering API to get contextual variant structures.
https://shopify.dev/themes/delivery-fulfillment/pickup-availability
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Hi,
This worked really well for me thanks for this. however the note is not lining up with the rest of the texts. any idea how i can fix this?
bohomnl, it is probably a css thing. You may want to add a class and create a style to ajust it like you want. You could also just look the css of your theme and change it there.
Thank you for this tutorial. I added this to my page and it worked!
Exactly what I'm looking for.
But my problem now is when there are two options, it doesn't update the quantity.
Is there a difference between a single option and multiple options in terms of onSelectChange function?
==================================
hello !
i need your help.
it's working for me but i need to hide it on the gift card page.
thx you !
Nico38, sadly I have never used it on a gift card page. Maybe add some css rules, add some classes or even modify your html code. Sorry for vague answer
Sorry for late responses (or no responses). I do not receive notifications when people write questions and I have been working on other project outside of shopify. Hope you guys find your answers!
Hi AquaParee!
This worked great!
Can you assist with one more thing, if I have 10 or more of an item (let's say I have 90 of something) can you tell me how to make it just display '10+' vs. the actual number?
Thank you for everything
I would create a jQuery function to adjust the displayed number.
//not sure about this
if ($("#variant-inventory").html() > 10) { $("#variant-inventory").html("10+"); }
else { $("#variant-inventory").html("{{ current_variant.inventory_quantity }}"); }
if this doesn't work, try removing the " " around "{{ current_variant.inventory_quantity }}" in my example.
You will then need to add this in your code at the section where you select your item in the first place, then on its variant change.
Hi/Thank you!
So I see this at first
if without my previous code the search bar was fine, it is probably a variable, class, or id problem. something must be interfering with your search bar.
Thank you for your offer, but I do not take donation. I am just a student trying to help fellow programmers 🙂 If you really want to do something for me, you could go on my LinkedIn profile and endorse me, it will help me become a trainee for a future employer.
good luck 🙂🙂
This is an accepted solution.
This whole post is a solution btw lol 🙂
Hi there, great tutorial, it works perfectly on the Product page on my Debut theme.
One thing I was wondering that I noticed was it doesn't work when I add the code into the "Featured Product" section on the Homepage. Is there any way to have it work for this section too? I thought it would automatically work since it all looked like the same code but unfortunately it doesn't
Thanks
Hello this looks great!
But second step doesn't work
I use premium theme Symmetry, which is an official Shopify theme.
I have entered the HTML code inside a "Custom liquid"
Since the theme has a json file for product page instead of html.
Looks like the liquid Shopify variable {{ current_variant.inventory_quantity }} doesn't show.
Any idea why?
If I can get this to work, I'll go further up to step 4 🙂
Thanks again for your post!
Did you ever find a fix to this? Thanks for post I struggled with same.
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