Bagdes on product tiles

Technical Q&A
1

Hi there community. Is it possible to show a badge on the product tile only when it appears on a specific collection page?

2

Hi @mesme ,
Welcome to Shopify , Yes it is possible with customization .
Thanks
Manoj

3

Hi @mesme please share url and more details. what you want to show.

4

Hello @mesme ,

I hope you are doing well!

Yes! It is possible to show the badge on the product title with a condition on specific products. But it requires some code customizations.

5

Hi @mesme,

Yes, this is possible. Please go to snippets > card-product.liquid file, then add code to be able to display it on a certain collection, refer to code:

{% if collection.handle == 'handle collection' %}
  Show badge
{% endif %}
6

Hi Rawi. Sorry for delay, I wanted to get all the collections in place before I replied. the url is www.mesmebeauty.com. I have three kinds of wraps, 3 day, 10 day and 14 day. 3 day and 10 day are UV Free, 14 day is UV. On the Show All Wraps dropdown in the Shop option of the menu, when it shows all the wraps, I want a circle to show on each product image that says where it UV or UV free. I have set up a metafield already which has true/false values, True = UV. But I don’t know now how to pull this in to the images!

7

Show All Wraps pulls wraps from the Discovery Collection

8

Do you mean display it on the product card or on the product detail page?

10

Hello, this can be achieved. You need to determine the handle of the current collection in the liquid code of the product card. If it is the target collection, use liquid to display the badge.

11

Hi - I am not to Shopify-savvy, could you possibly explain in a little more detail?

12

Hello, maybe you can share your store address, and I can help you fix it.

13

@mesme- your requirements can be fulfilled, it will need some code changes

14

Hi - that would be amazing thank you!! :slight_smile: the address is .www.mesmebeauty.com

15

collaborator code 6863

16

Hello, I have sent you a collaborator request. Also, could you tell me which collection page you would like the badge to be displayed on?

17

Hi
Great! I accepted it! I’d like it to appear on the Discovery Collection. The badge should appear on the product image and indicate whether the product is UV or UV Free.
Thank you so much!

18

Hello, please check your store’s Collection page. I have already placed the badge on the product card of the Discovery Collection. You are welcome.

1 Like
19

Hi! That is so incredibly helpful! Thank you so much! Could I ask you one more question about the badges as I’ve never used them. Is it possible to change the shape / color?

20

Of course, this requires code changes

21

Hi - I went into the code and updated the color and font size but it doesn’t seem to have updated for some reason, could you possibly help me make the badges a bit easier to read?