In this customization, we’re adding inventory status to your product page. It’s a great way for your customers to know when you’re low on stock, which can create a sense of urgency and scarcity for your products.
Don't worry if you're not yet comfortable with code, all the steps you need are in this tutorial.
Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).
Customize inventory status
Create new liquid snippet inventory-status-custom.liquid
<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 -%}
{%- unless block.settings.hide_low_stock -%}
{%- if block.settings.low_stock_icon -%}
<img src="{{ block.settings.low_stock_icon | img_url: '150x' }}" alt="Low Stock" style="width: 15px; height: 15px;">
{%- else -%}
<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>
{%- endif -%}
{%- 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 -%}
{%- endunless -%}
{%- else -%}
{%- unless block.settings.hide_in_stock -%}
{%- if block.settings.in_stock_icon -%}
<img src="{{ block.settings.in_stock_icon | img_url: '150x' }}" alt="In Stock" style="width: 15px; height: 15px;">
{%- 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>
{%- endif -%}
{%- 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 -%}
{%- endunless -%}
{%- endif -%}
{%- else -%}
{%- if product.selected_or_first_available_variant.inventory_policy == 'continue' -%}
{%- unless block.settings.hide_in_stock -%}
{%- if block.settings.in_stock_icon -%}
<img src="{{ block.settings.in_stock_icon | img_url: '150x' }}" alt="In Stock" style="width: 15px; height: 15px;">
{%- 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>
{%- endif -%}
{{- 'products.product.inventory_out_of_stock_continue_selling' | t -}}
{%- endunless -%}
{%- else -%}
{%- unless block.settings.hide_out_of_stock -%}
{%- if block.settings.out_of_stock_icon -%}
<img src="{{ block.settings.out_of_stock_icon | img_url: '150x' }}" alt="Out Of Stock" style="width: 15px; height: 15px;">
{%- 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>
{%- endif -%}
{%- if block.settings.show_back_in_stock_date -%}
{%- assign current_date = 'now' | date: '%Y-%m-%d' %}
{%- assign back_in_stock_date = product.selected_or_first_available_variant.metafields.custom.back_in_stock_date.value %}
{%- if back_in_stock_date == blank or back_in_stock_date == null or back_in_stock_date < current_date -%}
{{- 'products.product.inventory_out_of_stock' | t -}}
{%- else -%}
{%- assign formatted_back_in_stock_date = back_in_stock_date | date: block.settings.back_in_stock_date_format %}
{%- assign custom_back_in_stock_text = block.settings.back_in_stock_text | replace: '[back_in_stock_date]', formatted_back_in_stock_date -%}
{{ custom_back_in_stock_text }}
{%- endif -%}
{%- else -%}
{{- 'products.product.inventory_out_of_stock' | t -}}
{%- endif -%}
{%- endunless -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
</p>
Update the code in main-product.liquid
Under {%- when 'inventory' -%}, render the new file and comment out or delete the original code
{% render 'inventory-status-custom',
product: product,
section: section,
block: block
%}
Add the block settings at bottom
{
"type": "checkbox",
"id": "hide_in_stock",
"label": "Hide In Stock Status",
"default": false
},
{
"type": "image_picker",
"id": "in_stock_icon",
"label": "In Stock Icon"
},
{
"type": "checkbox",
"id": "hide_low_stock",
"label": "Hide Low Stock Status",
"default": false
},
{
"type": "image_picker",
"id": "low_stock_icon",
"label": "Low Stock Icon"
},
{
"type": "checkbox",
"id": "hide_out_of_stock",
"label": "Hide Out Of Stock Status",
"default": false
},
{
"type": "image_picker",
"id": "out_of_stock_icon",
"label": "Out Of Stock Icon"
},
{
"type": "checkbox",
"id": "show_back_in_stock_date",
"label": "Show Back In Stock Date",
"default": false
},
{
"type": "text",
"id": "back_in_stock_text",
"label": "Back in Stock Text",
"default": "Expected back in stock on [back_in_stock_date].",
"info": "Use [back_in_stock_date] where you want the date to appear."
},
{
"type": "select",
"id": "back_in_stock_date_format",
"label": "Back In Stock Date Format",
"options": [
{
"value": "%Y-%m-%d",
"label": "2025-03-14"
},
{
"value": "%d/%m/%Y",
"label": "14/03/2025"
},
{
"value": "%m/%d/%Y",
"label": "03/14/2025"
},
{
"value": "%B %d, %Y",
"label": "March 14, 2025"
},
{
"value": "%d-%m-%Y",
"label": "14-03-2025"
},
{
"value": "%Y-%m",
"label": "2025-03"
},
{
"value": "%d/%m/%y",
"label": "14/03/25"
}
],
"default": "%Y-%m-%d"
}
Create Variant Metafield Back In Stock Date
Name: Back In Stock Date
Namespace and key: custom.back_in_stock_date
Type: Date