Collections: How to hide sold out or out of stock products

This customization allows you to only display items that are in-stock on your collection gird pages.

Example collection grid before (with sold out sticker turned on):

After:

The sold out watch is not shown. 

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

After you've duplicated your theme, you can continue with the following code change:

1

Add code to the product-grid-item.liquid file

Edit Snippets/product-grid-item.liquid. 

(1) In left folder view, use the search bar.

(2) Find the file in the Snippets folder. 

If you're working with your published theme, use this link:

Here's a quick link you can use if you're working with your live published theme:
https://shopify.com/admin/themes/current?key=snippets/product-grid-item.liquid&line=58

Note - The quick links in our tutorials will always open the Code Editor for your live published theme. If you're working on an unpublished theme, always manually launch the Code Editor by using that theme's Actions link. 

Find the following line (around line 58):

Add the following code before that line:

{%- if product.available -%}

Example:

Part 2

Then at the very bottom of the file, add:

{%- endif -%}

Example:

Both lines added:

Save the file.

Undo

If you need to quickly undo the code change you can use the Older versions link or publish your duplicate/backup theme.

Only hide the price but show the product

We have received recent requests to hide the price but still list the product itself. In order to do that, you can use the same Liquid code but apply to the price wrapper. Here's an example:

The price wrapper is this entire section:

Add the Liquid code above and below. Example:

That will only hide the price and still show the product. 

Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing.