Shopify themes, liquid, logos, and UX
The intention is to show product variant inventory details on the product page.
This should change as the variant changes, exactly as the price changes.
After reading various posts with a similar question, I failed to find an answer and wrote my own code, which is not working.
The approach taken was to add a place holder in the sections/product-template.liquid and to use jquery to change the text from productPage: function(options) in assets/theme.js
To my surprise, I found that inside productPage variant.inventory_quantity is not defined, whereas variant.price is.
To explain better the problem I am pasting below the differences between the original Minimal Theme and the one I am using.
diff -w -i original/sections/product-template.liquid myversion/sections/product-template.liquid
181a182,190
> <div id="variant-inventory">
> {% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
> In Stock ( {{ variant.inventory_quantity }} )
> {% else %}
> Print On Demand ( {{ variant.inventory_quantity }} )
> {% endif %}
> </div>
diff -w -i original/assets/theme.js myversion/assets/theme.js
1021a1022,1042
> if (variant.inventory_quantity)
> {
> if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue")
> {
> if ( variant.inventory_quantity > 0){
> jQuery('#variant-inventory').text('In Stock (' + variant.inventory_quantity + ')');
> }
> else {
> jQuery('#variant-inventory').text('Print On Demand');
> }
> } else {
> jQuery('#variant-inventory').text("This product is available");
> }
> } else {
> jQuery('#variant-inventory').text('variant.inventory_quantity undefined for price ' + variant.price);
> }
> } else {
> jQuery('#variant-inventory').text("");
> }
>
> if (variant) {
And here is what I get in a product page:
First Variant
Second Variant
i.e: both show that inventory_quantity is undefined but price is well defined !!!!!!
Solved! Go to the solution
This is an accepted solution.
I got the solution by looking at the way different people tried solved similar issues.
The problem I found as described in my initial message is that the variant object that arrives to productPage is incomplete, i.e, it is not a full ShopifyAPI::Variant.
So, the solution is to assign to a global object all possible variant inventor_quantity and retrieve the appropriate one at productPage time.
The following are the differences applied to the original Minimal theme.
diff -w -i original/sections/product-template.liquid myversion/sections/product-template.liquid
0a1,7
> <script>
> window._VARIANTS = {};
> {% for variant in product.variants %}
> window._VARIANTS[{{ variant.id }}] = {{ variant.inventory_quantity }}
> {% endfor %}
> </script>
>
207a215,227
> <div class="product-inventory-available">
> <div id="variant-inventory">
> {% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
> In Stock ( {{ variant.inventory_quantity }} )
> {% else %}
> Print On Demand ( {{ variant.inventory_quantity }} )
> {% endif %}
> </div>
> <div id="variant-inventory2">
> Delivered next week.
> </div>
> </div>
>
diff -w -i original/assets/theme.js myversion/assets/theme.js
1021a1022,1045
> var quantity = _VARIANTS[variant.id];
>
> if (!quantity) {
> quanrtity = 0
> }
>
> if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue")
> {
> if ( quantity > 0){
> jQuery('#variant-inventory').text( 'Available: ' + quantity + ' in stock.');
> jQuery('#variant-inventory2').text('Delivered next day (if ordered before 1pm).');
> }
> else {
> jQuery('#variant-inventory').text( 'Available: Print on demand.');
> jQuery('#variant-inventory2').text('Delivered next week.');
> }
> } else {
> jQuery('#variant-inventory').text("This product is available");
> }
> } else {
> jQuery('#variant-inventory').text('quantity undefined for price ' + variant.price);
> }
>
> if (variant) {
Hi @martinR1
I see that you have it working on your website. I am using Minimal as well and would love to be able to show the variant inventory. Would you mind sharing the final code?
Thanks,
Leila
This is an accepted solution.
I got the solution by looking at the way different people tried solved similar issues.
The problem I found as described in my initial message is that the variant object that arrives to productPage is incomplete, i.e, it is not a full ShopifyAPI::Variant.
So, the solution is to assign to a global object all possible variant inventor_quantity and retrieve the appropriate one at productPage time.
The following are the differences applied to the original Minimal theme.
diff -w -i original/sections/product-template.liquid myversion/sections/product-template.liquid
0a1,7
> <script>
> window._VARIANTS = {};
> {% for variant in product.variants %}
> window._VARIANTS[{{ variant.id }}] = {{ variant.inventory_quantity }}
> {% endfor %}
> </script>
>
207a215,227
> <div class="product-inventory-available">
> <div id="variant-inventory">
> {% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
> In Stock ( {{ variant.inventory_quantity }} )
> {% else %}
> Print On Demand ( {{ variant.inventory_quantity }} )
> {% endif %}
> </div>
> <div id="variant-inventory2">
> Delivered next week.
> </div>
> </div>
>
diff -w -i original/assets/theme.js myversion/assets/theme.js
1021a1022,1045
> var quantity = _VARIANTS[variant.id];
>
> if (!quantity) {
> quanrtity = 0
> }
>
> if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue")
> {
> if ( quantity > 0){
> jQuery('#variant-inventory').text( 'Available: ' + quantity + ' in stock.');
> jQuery('#variant-inventory2').text('Delivered next day (if ordered before 1pm).');
> }
> else {
> jQuery('#variant-inventory').text( 'Available: Print on demand.');
> jQuery('#variant-inventory2').text('Delivered next week.');
> }
> } else {
> jQuery('#variant-inventory').text("This product is available");
> }
> } else {
> jQuery('#variant-inventory').text('quantity undefined for price ' + variant.price);
> }
>
> if (variant) {
Hi @martinR1
I really appreciate your reply and for taking the time to post that:)
It seems like it would be working for me except the code added to theme.js is breaking my store. (Variant selector is gone, main navigation drop down menu is gone and a couple other things.)
I'm unfamiliar with js. I could not find similar code to edit so I just pasted it to the file:/
You probably inserted the code in the wrong place ( or did not remove the diffs prefixes ">" )
The diff numbers are telling you where to insert with respect to the original code.
1021a1022,1045
The numbers say that at line 1021 you should insert lines 1022 to 1045
Here is the context where you should be inserting:
productPage: function(options) {
var self = this;
var moneyFormat = options.money_format;
var variant = options.variant;
var translations = options.translations;
if (variant) {
=====> INSERT HERE <=====
So it should look as follows:
...
productPage: function(options) {
var self = this;
var moneyFormat = options.money_format;
var variant = options.variant;
var translations = options.translations;
if (variant) {
var quantity = _VARIANTS[variant.id];
if (!quantity) {
quanrtity = 0
}
if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue")
{
if ( quantity > 0){
jQuery('#variant-inventory').text( 'Available: ' + quantity + ' in stock.');
jQuery('#variant-inventory2').text('Delivered next day (if ordered before 1pm).');
}
else {
jQuery('#variant-inventory').text( 'Available: Print on demand.');
jQuery('#variant-inventory2').text('Delivered next week.');
}
} else {
jQuery('#variant-inventory').text("This product is available");
}
} else {
jQuery('#variant-inventory').text('quantity undefined for price ' + variant.price);
}
if (variant) {
// Update variant image, if one is set
if (variant.featured_image) {
var newImg = variant.featured_image;
self.switchImage(newImg.id);
}
// Select a valid variant if available
...
Thank you @martinR1 . It is working perfectly.
I did put it in the wrong place. My line numbers are different but it wouldn't have made a difference. I wouldn't have known where to place the code if you hadn't told me. Thanks again! You made my day.
Leila
I'm trying to get this working as well, I have a quick question @martinR1 . In one of your sections it shows:
if (!quantity) { quanrtity = 0 }
is there a misspelling there, should "quanrtity" be "quantity"?
Hello Justin,
Oops, you are correct, well spotted.
The reason it worked for me so far is probably that I did not encounter the extreme case where there is no quantity. The check for !quantity is just for robustness to produce a "0" instead of a blank when displaying quantity.
Thank you
Thank you so much for this solution! I am a lone individual running a small business, and it felt so unprofessional to not show the available inventory prior to checkout - the customer experience was frustrating, and I felt it would drive people away.
With this simple adjustment, my potential customers will experience less friction and hopefully continue to engage with my site. THANK YOU martin21, and thank you Smeelah for linking me to this thread!!
Justin,
... I am a lone individual running a small business ...
so am I 🙂
A pleasure to be able to share my findings.
Hello,
@martinR1 am setting up my site with the minimal theme https://emily-keating-designs.myshopify.com/ and I would love for my customers to be able to see the quantity available for an item on the product page, instead of finding their desired quantity unavailable at the checkout stage where it can be frustrating. Will the code you have posted here work even though I don't have variants set up? Although I don't really know the coding, I can at least get to the edit code section and make little changes here and there if I can figure out where it goes. TIA for any advice.
-Emily
Hello Emily,
I have not tested it with a product with no variants, however, I just created a test product with no variants. Looking at the JSON associated with it it does have one single variant, as a container for the data that would otherwise exist for each variant. It does make sense to implement a generic solution for no variants as just one variant.
So I suggest you do try my fix. And please let the world know if it works 🙂
Okay, for other jumping in here who are not used to doing the coding, this is what I did to make it easier for customers to see how many of an item is available and to choose the preferred amount to put in their cart. I am using the minimal theme.
1. I went to my online store under sales channels, chose themes then selected "edit code" from the drop-down box in my theme to the right (on a desktop).
2. I scrolled to the "sections" category on the left and chose "product-template.liquid"
3. I scrolled down to line 207 and inserted the following lines under the line that ended with "select". I'm not even sure if I needed all of that but it's working. Then I had to save the file to check it- I'm not sure if there is way to test this without actually changing your live site. However, if you want to go back to your original configuration you can choose an older version of the file.
<div class="product-inventory-available">
<div id="variant-inventory">
{% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
Amount Available: {{ variant.inventory_quantity }}
{% endif %}
</div>
4. Finally, I went back out to the theme customization and choose "Product pages" under the drop-down list at the top, then chose product pages on the left, then checked the box for "show quantity selector".
Thanks to the others in this thread for the advice!
Hi @martinR1
It partly works for me at https://puretime.dk/collections/vaegure-i-trae/products/largo-vaegur-i-morkt-egetrae-med-tal?variant...
However - as soon as I change the variant through the swatches, the quantity doesn't change 😞
I can't figure out why - if it has to do with the swatch section?
EDIT: Well-well - not sure what I did but it seems to work now 🙂
Yes sorry - I edited my post probably after you started writing yours.
Works great for me now.
can someone tell me where to insert this code in the supply theme product-template.liquid file? Thanks in advance for any help you can supply...Mike
<div class="product-inventory-available">
<div id="variant-inventory">
{% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
Amount Available: {{ variant.inventory_quantity }}
{% endif %}
</div>
I placed it just after:
<div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
</div>
Thank you very much for helping. Kind of you.
Before I do this I just want to make sure this code change will show a quantity in stock for each product in a drop down box of variants.
Thanks Again…Mike
It does for me but you will really need to test it.
My code is just a bit different btw.
<div style="color: red" class="product-inventory-available">
<div id="variant-inventory">
{% if variant.inventory_management == "shopify" and variant.inventory_quantity < 3 %}
Only {{ variant.inventory_quantity }} available.
{% else %}
{% endif %}
</div>
</div>
@Smeelah This shows up but it doesn't change the quantity number when I select different size variants. I tested it on a product that had a different number of each size, one of them being sold out, and they all just said "2 available"
Was anyone able to figure out how to get each size/variant to display the correct stock amount?
I have tried every solution here 😕
I used this code and followed all directions, however, the inventory doesn't change when variant changes. For instance, if I have 3 large shirts and 2 small, the amount available doesn't change between them. It stays at 2 available. Can you help me?
Hi @EKeating, have you seen the accepted solution posted 11-21-2020 03:55 PM ?
Look also to the "context" differences (11-21-2020 04:37 PM) in case your code is different.
And to the correction of quanrtity, it should be quantity ( 11-22-2020 11:49 AM)
I am new to Shopify terminology, but I believe this product from my page has no variants: https://midwestmealworms.com/collections/all/products/sifting-tray
and it works / shows inventory, as do my products w/ variants.
Worked Great! Thank you! Appreciate!
How can we adjust the code to take it to the next level by adding multi stocking location. To show like availability on location A is X and location B is Y.
Hi
Just to add to this thread. You can also do the following...
In product-template.liquid add the following to line 159 using Minimal-Modern theme:
{% for variant in product.variants %}
<p>Only {{ variant.inventory_quantity }} left in stock.</p>
{% endfor %}
This will output "Only 5 (or whatever quantity) left in stock." below the product title.
This just makes all the available quantities show up and doesn't differentiate by size.
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