Display a message for products with a certain tag

In this tutorial we will display a custom message for products have a certain tag. This is a Liquid code example which requires you to modify your theme code.

Example Result:

Or if you want to use a larger font style:

How to:

1

Modify product.liquid

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.

(Don't skip this step) Make a duplicate of your theme 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:

From the Snippets folder, open product.liquid:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

h1

Example:

Add a couple blank lines below the line ending with </h1>. Then add the following code from one of the options:

Option 1 - Smaller text

<!-- Code added for custom tag message -->             
{% for tag in product.tags %}
{% if tag contains 'in-store' %}
          
<p class="text-center uppercase">Available for in-store pickup only</p>
          
{% endif %}
{% endfor %}     
<!-- end Tag code -->

Example:

OR

Option B - Larger text

<!-- Code added for custom tag message -->             
{% for tag in product.tags %}
{% if tag contains 'in-store' %}
          
<h4>Available for in-store pickup only</h4>
          
{% endif %}
{% endfor %}     
<!-- end Tag code -->

Example:

Breakdown of the code:

(1) The tag we will use with our products that will display this message.

(2) Your custom message

Choose a tag that works for your store. We will use in-store for this tutorial. You can use any HTML for the message. I've included a couple styles for this tutorial. 

Save the file.

2

Tag your products

Next, tag your products that need to display the custom message. In your product admin add the tag "in-store" (without quotes):

Now if a product has the "in-store" tag:

The custom message will appear below the product title. Products that don't have the tag will not display a message. 

Still need help? Contact Us Contact Us