How do i show stock levels on my products/collections page in Minimal Theme

Store Design
1

My Shop’s URL: https://www.brandsandbeyond.me/

Theme: Minimal (fashion)

I am looking to show stock levels at the collections page and at the products page when inventory is below 5 items.

Thank you.

2

  1. Click on Actions > Edit Code

  2. Find/Search file timber.scss.liquid and product-grid-item.liquid file

In product-grid-item.liquid file at line 28 put the following code.

      {% if product.first_available_variant.inventory_quantity > 0 %}
      <div class="items-left">
          Left {{ product.first_available_variant.inventory_quantity }}
      </div>
      {% endif %}

Then open timer.scss.liquid file.

Scroll at the very bottom of this file and put the following code.

.items-left {
    position: absolute;
    bottom: 20px;
    background: #ccc;
    padding: 4px 5px;
    z-index: 3;
    border-radius: 0 5px 5px 0;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 0 1px #ddd;
}
3

Perfect, thank you Sarhov. it is now showing on the collections page only but not on product page, would that be possible aswell?

4

@Ron77 yes it is possible, but it requires a bit more coding, because on product pages we have to make changes in JS file too, so when the variant is being changed we can updated inventory quantity. I don’t thing it is possible to provide it without going into actual theme.

5

Hi there,

I followed this tutorial and it is not working for me. I am using the minimal theme and my products don’t have variants. I can’t figure out how to display inventory on my products.

Thanks,

6

Hi Sarhov,

Is there way to show a TOTAL quantity left, which bunches all of your variants together?

Let’s say I have 20 shirts total to order… sizes don’t matter on my quantity screen, but I am going to customize 20 shirts total. Customer selects their size when ordering, and I want to decrease my total quantity by one.. not just the quantity for that single variant.

Is there a way to show on my collections page the total quantity of items remaining for my listed product?

I appreciate any help you can provide,

  • New user to Shopify with 0 knowledge on coding :slightly_smiling_face:
7

I copied this coding for < 5 items but how do I exclude out of stock items?

8

Hi @Ron77

In case you still looking for a solution to your question, you can check out this app to display your inventory quantity on your product page.

Best regards,

9

Hi @cromedia thanks for this solution! I’ve added it to my store a week ago but I realised today that it’s not working properly for products with variants (multiple size clothes for example). It only shows the quantity of the first variant. Do you know what code to put so that it shows the total quantity in stock? Thanks for your help! Mia

10

For those who want to show stock levels on collections page for products with multiple variants here is the code that you need to add instead of the one given above by Sarhov.

Note, this stock will only show if inventory is below 3. You can change this to what you need by editing “3”.

The code is to be added in product-grid-item.liquid or main-collection.liquid at line 29 or after render 'product-item’ line


   {% assign total = 0 %}
    {%for variant in product.variants %}
     {% capture i %}{{ total | plus:variant.inventory_quantity }}{%endcapture%}
      {% assign total = i %}
    {%endfor%}
    {% unless total > '3' %}
        

     {{ total }} en stock
           
 
    {% endunless %}