How to Hide Out of Stock Products in Shopify via Liquid Code

Shopify provides a default setting to hide out-of-stock products using automated collections. However, there are scenarios where you might need more control. Perhaps you are using manual collections, or maybe you only want to hide sold-out items from specific collections while keeping them visible in others.

In this tutorial, we will walk through how to edit your Shopify theme code to programmatically hide sold-out products from your collection pages.

Step 1: Backup Your Theme

Before making any changes to your code, it is best practice to create a backup. This ensures that if any errors occur, you can quickly restore the previous version.

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Click Actions > Duplicate (or Download theme file) to create a backup.

Step 2: Locate the Collection Template

To control how products display on the collection page, we need to modify the Liquid file responsible for the collection grid.

1. Go to Actions > Edit Code.
2. In the search bar or under the Sections folder, look for a file named collection-template.liquid. Note: In some newer themes (Online Store 2.0), this might be named main-collection-product-grid.liquid.

Step 3: Implement the "If Available" Check

Once inside the file, you are looking for the loop that iterates through your products. It usually looks like this:

{% for product in collection.products %}

Inside this loop, the theme renders the product grid items (often looking for <li> tags or <div> elements with classes like grid-item).

To hide sold-out products, we need to wrap the grid item code in a conditional statement checking if the product is available.

The Code:

{% for product in collection.products %}
  {% if product.available %}
    <!-- Your theme's grid item code goes here -->
    <li class="grid__item ...">
       ...
    </li>
  {% endif %}
{% endfor %}

By adding {% if product.available %} before the item renders and {% endif %} after it, the loop will skip any product where inventory is zero.

Advanced: Hiding Out-of-Stock Items on Specific Collections Only

What if you want to show out-of-stock items on some collections (like "Monkeys") but hide them on others (like "Hugs")? We can achieve this by expanding our conditional logic.

Instead of a simple availability check, we will use an OR operator. We want the product to display if:

1. The collection is NOT the one we want to filter (e.g., "Hugs").
2. OR the product is available.

The Code:

{% for product in collection.products %}
  
  {% if collection.title != 'Hugs' or product.available %}
     <!-- Grid item code -->
     <li class="grid__item ...">
       ...
     </li>
  {% endif %}

{% endfor %}

How this logic works:

• Collection is "Monkeys": The first condition (collection.title != 'Hugs') is True. The product displays regardless of stock status.
• Collection is "Hugs": The first condition is False. The code then checks the second condition (product.available).
  • If the product is in stock, it displays.
  • If the product is sold out, it is hidden.

Summary

By utilizing simple Liquid control flow tags, you can gain granular control over your store's inventory visibility without relying solely on Shopify's automated conditions.

Always remember to preview your theme changes before publishing to ensure the grid layout remains consistent.