Editing Liquid to Create a Badge based on a Tag

Solved
SVGRIF
New Member
3 0 0

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

2) 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. 

0 Likes

This is an accepted solution.

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"  %}
      <span class="custom-badge">
        <span>New</span>
      </span>
      {% endif %}

 

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

 

    <div class="price__badges">
      <span class="price__badge price__badge--sale" aria-hidden="true">
        <span>{{ 'products.product.on_sale' | t }}</span>
      </span>
      <span class="price__badge price__badge--sold-out">
        <span>{{ 'products.product.sold_out' | t }} </span>
      </span>
      
      {% if product.tags contains "New"  %}
      <span class="custom-badge">
        <span>New</span>
      </span>
      {% endif %}
  
    </div>

 

Here's the style:

 

<style>

  img.new-item-banner {
    position: absolute;
    top: 0px;
    left: auto !important;
    right: 0px;
    width: 100px !important;
    height: 100px;
    border: 1px green solid;
}

</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"  %}
   <img class="new-item-banner" src="https://placehold.it/100" />
{% endif %}

 

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

 

      <div
        id="{{ zoom_media_id }}"
        style="padding-top:{{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100}}%;"
        class="product-single__media{% if product.media.size > 1 %} product-single__media--has-thumbnails{% endif %}{% if enable_image_zoom %} js-zoom-enabled{% endif %}"
        {% if enable_image_zoom %} data-image-zoom-wrapper data-zoom="{{ media | img_url: image_zoom_size, scale: image_scale }}"{% endif %}
        data-image-loading-animation>
        <img id="{{ media_id }}"
          class="feature-row__image {{ media_class }} lazyload{% unless featured_media == media %} lazypreload{% endunless %}"
          data-src="{{ img_url }}"
          data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
          data-aspectratio="{{ media.preview_image.aspect_ratio }}"
          data-sizes="auto"
          {% if enable_image_zoom %} data-image-zoom {% endif %}
          alt="{{ media.alt | escape }}"
          {% if featured_media == media and request.page_type == 'product' %} onload="window.performance.mark('debut:product:image_visible');"{% endif %}>
      
{% if product.tags contains "New"  %}
   <img class="new-item-banner" src="https://placehold.it/100" />
{% endif %}

	</div>

 

Here's the style:

 

<style>
  img.new-item-banner {
    position: absolute;
    top: 0px;
    left: auto !important;
    right: 0px;
    width: 100px !important;
    height: 100px;
    border: 1px green solid;
    }
</style>

 

 

 

 

 

 

 

If my response was helpful please Like and Mark As Solution.
SVGRIF
New Member
3 0 0

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:

 

    <div class="price__badges"> <!---note this code is already in the file and is just for reference of position -->
      <span class="price__badge price__badge--sale" aria-hidden="true">
        <span>{{ 'products.product.on_sale' | t }}</span>
      </span>
      <span class="price__badge price__badge--sold-out">
        <span>{{ 'products.product.sold_out' | t }}</span>
      </span>

  {% if product.tags contains "NEW" %} 
  <span class="price__badge--new"> 
    <span>NEW</span> </span> 
  {% endif %} 

</div>
​



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:

  <div class="price__item--new">
     {% if product.tags contains "NEW" %} 
  <span class="price__item--new"> 
    <span>NEW</span> </span> 
  {% endif %} 
    </div>​



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

 

0 Likes
SVGRIF
New Member
3 0 0

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 

<div class="price__item--new">
     {% if product.tags contains "NEW" %} 
  <span class="price__item--new"> 
    <span>NEW</span> </span> 
            {%- else -%}
          <style> .price__item--new { display: none; } </style>
  {% endif %}

 

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

Any suggestions? 

Cheers

Grif

0 Likes

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!

 

If my response was helpful please Like and Mark As Solution.
0 Likes