Shopify Tutorial: Displaying Product Availability

This tutorial will guide you on displaying product availability (In Stock or Out of Stock) in your Shopify theme using Liquid templating.

Step 1: Understanding the Liquid Code

The following snippet clearly shows whether a product is available or not:

{% if product.available %}
  <span class="in-stock">In stock</span>
{% else %}
  <span class="out-of-stock">Out of stock</span>
{% endif %}

Step 2: Adding the Code to Your Shopify Theme

1. Navigate to your Shopify Admin and select: Online Store > Themes > Actions > Edit Code
2. Choose the file where you want to display product availability, usually product-template.liquid.
3. Insert the provided Liquid code at your desired location.

Step 3: Customizing the CSS

Style the availability statuses using your CSS:

.in-stock {
  color: green;
  font-weight: bold;
}

.out-of-stock {
  color: red;
  font-weight: bold;
}

Step 4: Testing Your Changes

Preview your changes:

• Products available for purchase should display “In stock”.
• Products unavailable for purchase should display “Out of stock”.

Final Thoughts

Now your store clearly communicates product availability to customers, enhancing their shopping experience and decision-making.