Re: How To Show Inventory Count On The Collection Page

Solved

How To Show Inventory Count On The Collection Page

jacksonroy03
Excursionist
24 0 6

I am trying to upgrade my company's website to a new free theme, Crave to be specific. On our old theme, we were able to show the inventory count left in stock on both the product page and the grid view. I was able to add a custom liquid block to the product page that shows the inventory count, but I can't find a relevant solution on the new themes to show the inventory count on the product grid view.

 

For example, if a customer is checking out one of our collections, they would need to click on the actual product to see how much is actually available. I would prefer to allow them to see how much is in stock without having to drill into the product page. Any help would be greatly appreciated 🙂

Accepted Solution (1)
joeeverett
Shopify Partner
23 4 6

This is an accepted solution.

Hi @jacksonroy03 

I hope this points you in the right direction. This shows the quantity of the first(default) variant of the product and it only shows if the quantity is greater than 0

The end result should look like this

Screenshot 2022-05-28 at 23.47.38.png

Go to Edit Code

Screenshot 2022-05-28 at 23.51.12.png

 

Scroll down to card-product.liquid

Screenshot 2022-05-28 at 23.51.40.png

add this line on line 33

 

{% assign firstVariant = card_product.first_available_variant %}

 

Screenshot 2022-05-28 at 23.57.44.png

 

 And add this on line 112

 

 {% if template.name == "collection" and firstVariant.inventory_quantity >= 1 %} <p>{{firstVariant.inventory_quantity}} product available</p> {% endif %}

 

Screenshot 2022-05-29 at 00.08.41.png

and then save

Screenshot 2022-05-29 at 00.00.39.png

 

 

View solution in original post

Replies 18 (18)

LitExtension
Shopify Partner
4860 1002 1160

Hi @jacksonroy03,

Can you send me the code and theme name, I will help you check it

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
jacksonroy03
Excursionist
24 0 6

Hi @LitExtension 

Thank you for replying to my message. I am trying to transition our site to the Crave theme. As far as the code goes, what section of the code do you need or am I able to send you everything? Sorry I am relatively new to the discussion platform and haven't shared our code before.

 

Not sure if you will be able to access, but here is the link to the code on the new theme: GRW Wine Collection ~ Edit ~ Crave 1.0 ~ Shopify

joeeverett
Shopify Partner
23 4 6

This is an accepted solution.

Hi @jacksonroy03 

I hope this points you in the right direction. This shows the quantity of the first(default) variant of the product and it only shows if the quantity is greater than 0

The end result should look like this

Screenshot 2022-05-28 at 23.47.38.png

Go to Edit Code

Screenshot 2022-05-28 at 23.51.12.png

 

Scroll down to card-product.liquid

Screenshot 2022-05-28 at 23.51.40.png

add this line on line 33

 

{% assign firstVariant = card_product.first_available_variant %}

 

Screenshot 2022-05-28 at 23.57.44.png

 

 And add this on line 112

 

 {% if template.name == "collection" and firstVariant.inventory_quantity >= 1 %} <p>{{firstVariant.inventory_quantity}} product available</p> {% endif %}

 

Screenshot 2022-05-29 at 00.08.41.png

and then save

Screenshot 2022-05-29 at 00.00.39.png

 

 

jacksonroy03
Excursionist
24 0 6

Hi Joe, thank you for this solution! Worked perfectly! If I wanted to also display this information on the featured collection, would I be able to use the same code? If so, where would I need to place it?

joeeverett
Shopify Partner
23 4 6

Hi @jacksonroy03 

 

I am glad that worked for you, if you change the line on 112 from

{% if template.name == "collection" and firstVariant.inventory_quantity >= 1 %}

 

to

 {% if firstVariant.inventory_quantity >= 1 %} 

 

It should also show on the featured collection.

jacksonroy03
Excursionist
24 0 6

Perfect, thank you for your help! This worked for me as well.

SaralHarrison
Visitor
2 0 0

@joeeverett Is this possible to do for ALL in stock not just the one variant? We can see the stock on the backend, I want my customers to be able to see total stock including all variants for a product. LMK! 

joeeverett
Shopify Partner
23 4 6

@SaralHarrison Hi Sara, unfortunately it takes a lot of customisation to achieve this. You can try this app which might help https://apps.shopify.com/gs-inventory-show-stock-level

SaralHarrison
Visitor
2 0 0

Interesting, so there is no way to code this and use something like "total stock"? I can see the total stock on the backend "11 in stock for 2 variants", it feels like there should be some way to point to this in the code? 

davidre
New Member
4 0 0

Hi @SaralHarrison - Did you ever find a solution for this?  I'm trying to show total stock of all variants on Collection page and then broken down by variant on product page.

jlocklear146
Excursionist
18 0 7

This is excellent, thank you.

Can you share how this can be accomplished in the theme "Prestige"? 

Let me know if I should create a separate question for this.  Cheers.

joshjacobsen
Tourist
9 0 1

Hi @joeeverett - Thanks for your help here, might you have instructions on how to do this for theme Venue? 

zombiesinlondon
Excursionist
13 1 5

Would there be a way to display the inventory level on the individual product page too?  Maybe under the quantity selector?  I imagine it would be in the main-product.liquid but I'm struggling to figure out how to make it work.

jacksonroy03
Excursionist
24 0 6

@zombiesinlondon you can add a custom liquid section within your theme, after you click into any product, and then add the following code or something like it:

 

<p>Quantity In Stock: <strong>{{product.variants.first.inventory_quantity}}</strong></p>

ErSanjay
Shopify Partner
324 20 47

here code that will help you. 

 

 {% if current_variant.inventory_quantity >0 and current_variant.inventory_management == 'shopify' %}
            
             <p>Stock: {{ current_variant.inventory_quantity }}</p>
            
        
     
   {% endif %}
Business Owner & Shopify Plus, Shopify app , Shopify Consultant - Full Stack Sofware Engineer
Warm regards,
Er Sanjay

If you find yourself in need of assistance with your store, don't hesitate to reach out! Feel free to send me a direct message, and I'll do my best to help you out.
thelittlewolf
Visitor
2 0 1

Are there similar instructions for the spotlight theme?

ErSanjay
Shopify Partner
324 20 47

@thelittlewolf  not Sure. may be I will help you.

Business Owner & Shopify Plus, Shopify app , Shopify Consultant - Full Stack Sofware Engineer
Warm regards,
Er Sanjay

If you find yourself in need of assistance with your store, don't hesitate to reach out! Feel free to send me a direct message, and I'll do my best to help you out.
LitExtension
Shopify Partner
4860 1002 1160

Hi @jacksonroy03,

Can you send me the code to show the inventory count left in stock? I will check it.

Or you can try to change the code for 'product grid view' as follows:

product => card_product

Hope it helps!

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify