Hi All, Is it possible to show inventory status on homepage featured product. Currently shows on the product page but needs to show on a product card on homepage for featured product section. Thank you.
Topic summary
A user asks how to display inventory status on homepage featured products, as it currently only appears on individual product pages.
Solutions provided:
-
Basic approach: Use Liquid variables
{{ product.available }}or{{ product.inventory_quantity }}in the featured product card code. -
Detailed implementation: Modify the
card-product.liquidfile by adding conditional Liquid code that:- Checks if inventory is managed by Shopify
- Displays low stock warnings when inventory falls below a threshold
- Shows “out of stock” or “continue selling” messages based on inventory policy
- Includes SVG icons for visual indicators
The solution involves editing theme code files in the Shopify admin. Example screenshots demonstrate the expected visual result showing inventory counts on product cards.
find the code that handles your featured product cards
{{ product.available }} or {{ product.inventory_quantity }}
Hi @DASCPA
You can follow the instruction below :
-
Go to Shopify > Theme > Edit code
-
Go to File card-product.liquid > paste this code :
{%- if card_product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
{%- if card_product.selected_or_first_available_variant.inventory_quantity > 0 -%}
{%- if card_product.selected_or_first_available_variant.inventory_quantity
<= block.settings.inventory_threshold
-%}
{{- 'icon-inventory-status.svg' | inline_asset_content -}}
{{-
'products.product.inventory_low_stock_show_count'
| t: quantity: card_product.selected_or_first_available_variant.inventory_quantity
-}}
{%- else -%}
{{- 'icon-inventory-status.svg' | inline_asset_content -}}
{{-
'products.product.inventory_in_stock_show_count'
| t: quantity: card_product.selected_or_first_available_variant.inventory_quantity
-}}
{%- endif -%}
{%- else -%}
{%- if card_product.selected_or_first_available_variant.inventory_policy == 'continue' -%}
{{- 'icon-inventory-status.svg' | inline_asset_content -}}
{{- 'products.product.inventory_out_of_stock_continue_selling' | t -}}
{%- else -%}
{{- 'icon-inventory-status.svg' | inline_asset_content -}}
{{- 'products.product.inventory_out_of_stock' | t -}}
{%- endif -%}
{%- endif -%}
{%- endif -%}
Here is the example :
