How can I display inventory status on the product collection page?

Technical Q&A
,

Topic summary

A user successfully modified the Crave theme to display inventory status (text and colored circle indicator) on product pages, showing grey when items are out of stock. They now want to replicate this same inventory display on collection pages.

Current implementation:

  • The inventory status code exists in main-product.liquid
  • Uses SVG circles with different colors based on stock levels
  • Shows different states: in stock, low stock (orange), and out of stock (grey)

Question:
The user is asking where to paste the inventory code to make it appear on collection pages, not just individual product pages.

Status:
Another user attempted the same modification by copying the code into main-product.liquid but reported no results. The discussion remains unresolved with no working solution provided yet.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Greetings!

I have installed Crave theme and succesfully altered the color of the inventory button, so to show grey when a product is out of stock (yay me)

I would also like this excact thing (the text and the little circle) displayed on the collection page.

Any ideas as to how to go about this?

asddad.JPG
asddad.JPG1318×906 112 KB

In the main-product.liquid i find this:

{%- when ‘inventory’ -%}

{%- if product.selected_or_first_available_variant.inventory_management == 'shopify' -%} {%- if product.selected_or_first_available_variant.inventory_quantity > 0 -%} {%- if product.selected_or_first_available_variant.inventory_quantity <= block.settings.inventory_threshold -%} {%- if block.settings.show_inventory_quantity -%} {{- 'products.product.inventory_low_stock_show_count' | t: quantity: product.selected_or_first_available_variant.inventory_quantity -}} {%- else -%} {{- 'products.product.inventory_low_stock' | t -}} {%- endif -%} {%- else -%} {%- if block.settings.show_inventory_quantity -%} {{- 'products.product.inventory_in_stock_show_count' | t: quantity: product.selected_or_first_available_variant.inventory_quantity -}} {%- else -%} {{- 'products.product.inventory_in_stock' | t -}} {%- endif -%} {%- endif -%} {%- else -%} {%- if product.selected_or_first_available_variant.inventory_policy == 'continue' -%} {{- 'products.product.inventory_out_of_stock_continue_selling' | t -}} {%- else -%} {{- 'products.product.inventory_out_of_stock' | t -}} {%- endif -%} {%- endif -%} {%- endif -%}

Which is everything to due with the lignt and the text.

can i copy paste this somewhere maybe? - if so, where? :slightly_smiling_face:

afaaff.JPG
afaaff.JPG1638×899 50.9 KB

2

Did you manage to find a solution? I copied this code into main-product.liquid, but it doesn’t show any results…