Skip to content
How To Show Inventory Status - Free Tutorial
Browse other ways to boost conversion rate & profit

How To Show Inventory Status - Free Tutorial

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

 

Browse other ways to boost conversion rate & profit