How to display Product Stock Count on product cards

[IntechCarl]

Hi everyone,

Is there a way to display the stock count/information in product cards in my collections page/ featured collection? See photo for reference:

Store Preview Link: https://0tom0bitnjf5bzka-13830324282.shopifypreview.com

This is the store that I want to copy:

[SUM0513]

Hey there,

You could add this code inside your product-card snippet:

{{ product.first_available_variant.inventory_quantity }}

This code essentially renders the inventory quantity for the first product variant that is currently available in stock.

[IntechCarl]

@SUM0513 Hi!, Thank you for your response, but I don't have a product-card snippet. See photo for reference:

[SUM0513]

I was actually referring to a general 'product card' snippet that gets rendered in the collection pages. Since you might be using 'Dawn' theme, there must be a 'card-product.liquid' snippet. You'll have to make changes inside this file.

[IntechCarl]

@SUM0513 I found a card-product snippet, which line should I put the code?

[SUM0513 · Accepted solution]

The snippet fetches the 'product' object with an alias 'card_product' (You can see this on the top of the snippet code) , so we'll need to use replace the code as:

{{ card_product.first_available_variant.inventory_quantity }}

According to the the reference, it's best to put the code above the "{% render 'price'..." line, which displays the number right above the price in frontend.

However, if you want to put it above the reviews, you may place the code above the " {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}" line.

Eitherway, you'll have to place it in a way that doesn't obstruct the liquid logic and the frontend design.

[IntechCarl]

Hi @SUM0513 I have added the code, and it successfully display the product count but, the problem is how do I style it? It's just a plain number. I want to have it look like " In stock (54)" with green font and if "Out of Stock" Red font. Also it overlaps with my product ratings See photo for reference: 

[IntechCarl]

hi @SUM0513, nevermind the styles I already fix it. The problem now is it is only visible in featured collection in my homepage, I want it be displayed in my product collection page. See photo for reference: 

[SUM0513]

To make it look like the reference site, you could try out this code:

{% if card_product.available %}
  <span class='stock--available'>
    In stock ({{ card_product.first_available_variant.inventory_quantity }})
  </span>
{% else %}
  <span class='stock--unavailable'>
    Out of stock
  </span>
{% endif %}

The availability of the product decides which content to show. Style the individual span classes as you'd want. 

[IntechCarl]

@SUM0513 I already fix the styling, I only need to display it on product collection page, It is already showing in featured collection in my homepage, I want it to be visible Inside the Collection See photo for reference:

[SUM0513]

Hmm, this is weird. The previous adjustments should've made it work, since be it featured collection or collection pages, they all render the same card-product snippet. Just for measure, could you double check the products and their inventory quantities?

[IntechCarl]

@SUM0513  I have checked the products and their inventory, I think they are all fine. Maybe the collection pages have different file?

[SUM0513]

Could you send me a screenshot of where you've placed the above code? In dawn, the collection pages seem to render the same snippet.

[IntechCarl]

@SUM0513 this is where I inserted it:

[SUM0513]

Just to make sure, the quick add setting is off right? Also I want you to debug this. Could you write 'test' under the '{% endif %}' and check the frontend, does the 'test' appear on the website after a hard reload? (ctrl + shift + R)

[IntechCarl]

Yes, the quick add is off. I added the test below the code and it is only visible on featured collection in home page not in collection pages