Collections: Add a pre-order message below price

This tutorial will help you display a Pre-order message below the product price on collection pages when a product is in a pre-order collection. 

Example:

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:

1

Add your products to a pre-order collection

In order for this code to work, you'll need to create a collection called Pre-order or pre-order:

Next, create a rule (2) to include any product tagged with "pre-order" is automatically added to this collection. The other option is to manually add products yourself to this collection. 

If you are using the rule version, then tag your products with "pre-order" next. If you're manually adding, then add the products. 

2

Add Liquid code in the Code editor

After you've created your pre-order collection and also added items to the collection, then the next step is to add some code.

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

From the Snippets folder, open the product-grid-item.liquid file:

Scroll to the bottom of the file and find this section:

We will add some code after that section - Be sure you've found the right code. 

Add a few blank lines after:

Insert the following code in the blank section:

{% for product in product.collections %}
  {% case product.handle %}                    
    {% when 'pre-order' %}
      <br />Pre-order
  {% endcase %}
{% endfor %}

Example:

Save the file.

Done! You can now test a regular collection to see if the message is showing up at below the price. If not, make sure the right products are included in the pre-order collection. Check to see if your rule is working (tagged products with pre-order).

Undo

Use the Older versions link at the top of the file if you need to rollback or undo this code change.