Collections: Add a flash sale message for certain collections only

Result:

Note: This is an advanced Liquid code based modification which has no settings. You'll need to use Liquid code to manage which collections have the message and manually toggle the message when the sale is over. This is a demonstration of using Liquid code with the product-grid-item.liquid file.

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

1: Add code to product-grid-item.liquid

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

At the bottom of the file, add a few blank lines after the closing </a> line:

Example:

Paste the following Liquid code in that blank area after the </a> line:

{% comment %}             
Custom flash message
{% endcomment %}                       
          
            {% for product in product.collections %}

              {% case product.handle %}                    

                {% when 'surfboards' %}
      <span class="promo-flash-message">Use code "FLASH25" for 25% off</span>

                {% when 'womens' %}
      <span class="promo-flash-message">Use code "WOMENS10" for 10% off</span>
              {% endcase %}
            {% endfor %}          

{% comment %}             
end custom flash message
{% endcomment %}

Example:

2: Customize the message code

The above code is looking for products that are in the "Surfboards" collection and "Womens" collection (the case is not important as the code uses the handle of the collections). If it finds that the product is part of that collection, it will display the message the follows.

You can tweak this for your store. Replace surfboards for a collection in your store. Example:

{% when 'surfboards' %}

To:

{% when 'shoes' %}

Also, you'll want to adjust the flash sale message after that:

<span class="promo-flash-message">Use code "FLASH25" for 25% off</span>

To:

<span class="promo-flash-message">Use code "SHOES25" for 25% off</span>

The code example also checks to see if the product is in a collection "Womens". If so, it displays the message following. You'll want to change that or remove the 2 lines associated to that condition:

{% when 'womens' %}
<span class="promo-flash-message">Use code "WOMENS10" for 10% off</span>

3: Add style code

Code to add to your CSS file (different file):

/* -- code start for flash sale -- */
.promo-flash-message {color: #cc0000;}
//.promo-flash-message {display:none;}  
/* - end - */

Where to add the code:

Find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 or higher - Open theme.scss.liquid:

Earlier versions of Pipeline - If your theme is older than Pipeline 4, open style.scss.liquid:

Add the code to the very bottom of the file on a new line after all other code. Make a couple blank lines before pasting the code snippet.

Example:

Save the file after adding your code.

4: Toggle flash sale on and off

You'll notice that this line in the style code from Step 3 is commented out with two backslashes in front of the line. That allows you to to control if the sale is on of off. When it's commented out like that, the sale is ON and the message will be displayed.

Sale is on:

To end your flash sale and hide this message, remove the two backslashes.

Sale is over:

The display:none line will hide the flash sale message.

The first line is the color of the message, #cc0000 is a red color.

Use any valid hex color code:

http://www.colorhexa.com/web-safe-colors

5: Troubleshooting special characters

One common issue is when you use special characters in your collection name. Shopify will convert any special characters into dashes. The best way to verify what the handle of your collection is to preview the collection and view the URL.

Here's an example where the collection is called "Tops & Shirts". The handle in the URL has been changed to tops-shirts:

The original code added was (wrong):

That includes a collection with an accent character. Both these lines of code didn't work.

The fix with corrected format is:

With the correct handle, the code works. If you find your message isn't displaying, view the collection in your browser and check the collection URL address to see how Shopify converts the collection name into a handle.

Undo

Use the Older versions link at the top of the file if you need to rollback or undo this code change. Be sure you made a duplicate first as well.

Collections: Add a flash sale message for certain collections only

Add code to product-grid-item.liquid

Customize the message code

Add style code

Toggle flash sale on and off

Troubleshooting special characters

Undo