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

[Jesper_Skaane_B]

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?

In the main-product.liquid i find this:

{%- when 'inventory' -%}
<p
class="product__inventory no-js-hidden{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
{{ block.shopify_attributes }}
id="Inventory-{{ section.id }}"
role="status"
>
{%- 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 -%}
<svg width="15" height="15" aria-hidden="true">
<circle cx="7.5" cy="7.5" r="7.5" fill="rgb(238,148,65, 0.3)"/>
<circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(238,148,65)"/>
</svg>
{%- 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 -%}
<svg width="15" height="15" aria-hidden="true">
<circle cx="7.5" cy="7.5" r="7.5" fill="rgb(62,214,96, 0.3)"/>
<circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(62,214,96)"/>
</svg>
{%- 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' -%}
<svg width="15" height="15" aria-hidden="true">
<circle cx="7.5" cy="7.5" r="7.5" fill="rgb(200,200,200, 0.3)"/>
<circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(200,200,200)"/>
</svg>
{{- 'products.product.inventory_out_of_stock_continue_selling' | t -}}
{%- else -%}
<svg width="15" height="15" aria-hidden="true">
<circle cx="7.5" cy="7.5" r="7.5" fill="rgb(200,200,200, 0.3)"/>
<circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(200,200,200)"/>
</svg>
{{- 'products.product.inventory_out_of_stock' | t -}}
{%- endif -%}
{%- endif -%}
{%- endif -%}
</p>

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

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