This guide shows how to create a collection of products that have sold out, with an option for customers to enquire about a product.

Creating a sold out collection

First thing to do is go to Collections in your Shopify Admin area and click on Add Smart Collection. With Smart Collections, you set up conditions so products are automatically included. Add a title and description of your choice and then set your conditions as below.

Smart Collection

Click Create Collection and you now have a collection of all products that are out of stock. You can add a link to this collection in the Navigation area.

Adding a Sold Out button

Stage 2 is to add some code that will swap your Add To Card button for a Sold Out button.

You’ll need to design a Sold Out button that is a similar size to your Add To Cart button. If you’re using the default Prettify buttons then here’s one I created for you. Right-click to save it to your computer.

Sold Out button

Again, we’ll be making the changes in the Assets area of your Shopify Admin, using the Theme Editor.

Theme Editor

Click the link to Upload a new theme asset and upload your new button image. It will now appear in the list of files.

Editing the code

Open the product.liquid page from the templates at the top of the page.

Find this piece of code (near the bottom)

<div class="addtocart"> <input type="image" name="add" value="Add to Cart" id="add" class="button" src="{{ 'add.gif' | asset_url }}" /> </div>

and replace it to the following code:

<div class="addtocart">{% if product.available == false %} <a href="mailto:YOU@YOUREMAILADDRESS.COM?subject={{ product.title }}"><img src="{{ 'soldout.gif' | asset_url }}" /></a>{% else %} <input type="image" name="add" value="Add to Cart" id="add" class="button" src="{{ 'add.gif' | asset_url }}" /> {% endif %} </div>

Make sure you change YOU@YOUREMAILADDRESS.COM to your actual email address. If you’re using your own button image, you may also need to change soldout.gif to your button’s filename.

Save the file and view your shop in a new window. You will only see the sold out button on a product that is completely sold out in all variations.

You can see this code in action here.

I hope this helped you. Please leave a comment if you have any problems.