Add a label for products with a specific tag

[PetitFox]

Hello,

I'm looking to add a product label to products tagged "NOVO", that says "Novo". The design should be the same as the default sale label, except for the label color, which should be #E4977F.

I want this label to appear both on the product card and on the product page.

How can I do this?

(I'm using Dawn theme, and my website is petitfoxportugal.myshopify.com)

Thank you!

[sahilsharma9515]

Hi @PetitFox First you need to add the product tag in the products on where you need to show the novo label, then you need to edit "main-product.liquid", "product-card-grid.liquid" file add the code so that if the product tag contains Novo then it will show in there.

I can provide you the base code for the same, as without looking into your code files and what all apps you are using, I will not be able to provide you the exact code, and where you need to exactly add this i.e line no.

{% if product.tags contains 'NOVO' %}
  <div class="product-label product-label--novo">
    Novo
  </div>
{% endif %}

 After adding this you need to add the css to achieve the same design as of the other label.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[parth_ghelani · Accepted solution]

Hello @PetitFox 

To show specific label in the product card, first of all you need to add tag "novo" or whatever you have to show in related product.

after that you need to change some code in the file named "card-product.liquid".

Find the class named "card__badge". you get 2 results for this. you have to change the code in the first one.

below this selector element, you need to add below mentioned code.

{% for tag in card_product.tags %}
  {% if tag == 'Novo' %}
    <p class="tag badge" style="background: #E4977F;">Novo</p>
  {% endif %}
{% endfor %}

* Change the tag name as per your requirements:

After making changes, your code will look like this:

Just change the tag name in the if condition which you added in product.

This shows the label in the product card.

To show the label on product page, you need to change the code there as well.

Find the file named "price.liquid" and go to end of the file.

paste the above mentioned code above the show_badges code.

After making changes in code, your code look like this.

Change the background color and color as per your requirement.

Hope this solution works best for your issue.

[PetitFox]

Hello! Thank you for your help! I managed to get the "Novo" badge in the collections page but it didn't work for the product page. Below is a screenshot of the code I added to price.liquid. Am I doing something wrong here?

[parth_ghelani]

Sorry. my fault.

You just need to replace card_product.tags to product.tags

It will solve your issue for product page.

[PetitFox]

Many thanks!