Inventory Status

Technical Q&A

Topic summary

Goal: show the same product “inventory status” on the Shopify homepage as on individual product pages.

Proposed solution (code-based):

  • Edit theme code (Online Store > Themes > Edit Code) and modify homepage section files (e.g., index.liquid, sections/featured-collection.liquid, sections/product-grid.liquid).
  • Insert Liquid code in the product loop to display “In Stock: [quantity]” or “Out of Stock” based on product.variants.first.inventory_quantity, and add basic CSS styling.
  • Liquid is Shopify’s templating language; the provided snippet only checks the first variant’s inventory quantity.

User constraints and clarification:

  • The requester does not know coding.
  • They clarified they want the product’s specific “inventory status,” not a simple in-stock/out-of-stock indicator.

Status and next steps:

  • Mismatch between the provided solution and the requester’s needs; exact meaning of “inventory status” (as shown on product pages) is not defined here.
  • No resolution yet; requires clarification of the desired status source/field and a non-code approach if possible.
Summarized with AI on December 12. AI used: gpt-5.
1

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

2

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.

3

I’m sorry but I know nothing about coding.

4

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