Inventory Status

[Mybagobsession]

How do I add the same Inventory Status thats on my products to the home page as well? 

[WizzCommerce_Co]

Hi @Mybagobsession , thank you for posting here!

You can follow my instructions below:

1. Go to the Theme Editor:

   • Log in to Shopify.
   • Navigate to Online Store > Themes.
   • Click Actions > Edit Code for your active theme.

2. Locate the Homepage Section Code:

   • In the code editor, find the file for the homepage sections. Look for a file like:
     • index.liquid
     • sections/featured-collection.liquid
     • sections/product-grid.liquid (depending on how your homepage is built).

3. Add Inventory Status Code:

   • Within the relevant product loop (for product in collection.products or similar), add the following code to display the inventory status:

   {% if product.variants.first.inventory_quantity > 0 %}
     <p class="inventory-status">In Stock: {{ product.variants.first.inventory_quantity }} items</p>
   {% else %}
     <p class="inventory-status">Out of Stock</p>
   {% endif %}

   This checks the inventory of the first variant of each product and displays whether the item is in stock or out of stock.

4. Style the Inventory Status:

   • To make the inventory status visually appealing, add some CSS to your theme's assets/theme.css or assets/style.css file:

     .inventory-status {
       font-size: 14px;
       color: green;
     }
     .inventory-status.out-of-stock {
       color: red;
     }

   • Optionally, add the class out-of-stock for styling when an item is out of stock.

5. Save and Preview:

   • Save your changes and preview the homepage to confirm the inventory status is displayed.

Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Mybagobsession]

I'm sorry but I know nothing about coding.

[Mybagobsession]

Unfortunately, this is not what I was talking about. I'm talking about inventory status. Not in stock & out of stock status.