Editing Liquid to Create a Badge based on a Tag

Technical Q&A
1

Hi All,

Im hoping someone could direct me to some resources or recommend the process to do the following.

Theme: Shopify DEBUT Theme

I want a label / icon to either :

  1. be in place of where the sale tag normally would be

or

  1. Overlaid in the corner of the image of the product.

The label / badge would only appear if the product has a specific tag related to the product. Such as the tag “NEW” will display a “New” label in either of the above mentioned positions.

Can anyone help me out with something like this? Im new to Liquid.

2

Here are both options. The actual solutions require pasting just 3-5 lines of code plus the css. I added extra code lines below to (hopefully) make it easier for you to get your bearings.

Solution 1 (using Liquid):

The code below will add a ‘New’ badge where the ‘Sale’ Badge appears next to the price on Debut.

Starting on line 87 of product-price.liquid add the following:

{% if product.tags contains "New"  %}
      
        New
      
      {% endif %}

This code is placed just after the sold out bade withing the price badges div like so:


      
        {{ 'products.product.on_sale' | t }}
      
      
        {{ 'products.product.sold_out' | t }} 
      
      
      {% if product.tags contains "New"  %}
      
        New
      
      {% endif %}

Here’s the style:

Solution 2 (using Liquid):

The code below will overlay an image (your ‘New’ banner) on the right top corner of the featured media image.

Add the following starting on line 60 of media.liquid.

{% if product.tags contains "New"  %}
   ![100](https://placehold.it/100)
{% endif %}

This code comes right after and shares a div with the featured media image:


        
      
{% if product.tags contains "New"  %}
   ![100](https://placehold.it/100)
{% endif %}

Here’s the style:
1 Like
3

Hi @themecaster - sorry for such a long delay in replying - I only got around to implementing that last night.

It worked a treat your suggestion (suggestion 1) and should work for any tag I choose to set up for it.

I made one addition to add it to the listings page also.

To confirm the code as you stated:

In product-price.liquid - Around Line 80 I pasted over the current code the for price-badges:

 
      
        {{ 'products.product.on_sale' | t }}
      
      
        {{ 'products.product.sold_out' | t }}
      

  {% if product.tags contains "NEW" %} 
   
    NEW  
  {% endif %} 

​

To add the same label on the listings page (so its displayed also in the list of products in a collection)

In product-price-listings - around line 91 - following the div for price__sale, a created another div after that with the following code:


     {% if product.tags contains "NEW" %} 
   
    NEW  
  {% endif %} 
    
​

Finally for the styling. In the theme SCSS file I created a section for custom code (as this was one of the first custom additions to the site)

/*================ Custom Code ================*/

 

 
.price__badge--new { 

  font-size: 14px;
  color: #fafafa;
  border-radius: 5px;
  background-color: #4fb0ad;
  padding: 5px;
  top: 0;
  left: 0;
}

.price__item--new { 

  font-size: 12px;
  color: #fafafa;
  border-radius: 5px;
  background-color: #4fb0ad;
  padding: 3px;
  top: 0;
  left: 0;
}

For your second suggestion - I did try this out and would need to test it a bit more - but the product image was stacking duplicates when I was using it. But it was working, just needed cleaning up. The first solution is much neater solution.

Thanks again for taking the time to do that.

Cheers

Grif

4

Im having a little issue with my code now - that I have included the listings code for it to display on a collection.

Im getting a left over green dot when the product Doesn’t have the TAG “New”

Ive tried


     {% if product.tags contains "NEW" %} 
   
    NEW  
            {%- else -%}
          
  {% endif %}

But that is removing the tag from both products, if one has and has not got the Tag.

Any suggestions?

Cheers

Grif

5

Hi,

I see a couple of potential issues.

  1. Remember that the contains keyword is case insensitive (is the tag named “New” or “NEW”)

  2. Shouldn’t have to use the css directive display: none if your liquid logic is working correctly

Good Luck!

6

Hi @MrGrif ,

If you are willing to create multiple or different badges based on product, please refer to the below video to implement the same.