Add label to product image in Collection page based on Product Tag

[frankiebuttons]

website - occultpatchespins.co.uk

theme - Dawn

I have a few products that donate to charity when bought, I’d like to have a label like the New or Sale labels to be displayed when browsing a collection, based on a tag on the product.

EG - Products tagged “Charity” display “Charity Product” label.

Any suggestions on how to implement this?

Thanks!

[dmwwebartisan]

@frankiebuttons

Please create a Charity collection and assign the products to the charity collection.

Thanks!

[frankiebuttons]

Here’s my charity collection - https://occultpatchespins.co.uk/collections/charity-products

[oscprofessional]

Hello @frankiebuttons

You’ll need to modify the theme’s code. Here’s a general approach to achieving this customization:

1. Go to “Online Store” from your Shopify admin and click “Themes.”

2. Click on the “Actions” button. Select “Edit Code”.

3. In the theme editor, navigate to the “Snippets” directory and look for a file named something like product-card-grid.liquid or product-card.liquid. This file renders the product card in the collection or product listing pages.

4. Open the appropriate file and search for the code that displays the product label (e.g., the “New” or “Sale” label). This code may vary depending on your theme’s implementation, but it typically involves using an {% if %} statement to check for specific conditions.

5. Below the existing code, add the following code to check if the product is tagged with “Charity” and display the “Charity Product” label.

{% if product.tags contains 'Charity' %}
  Charity Product
{% endif %}

6. Save the changes to the theme file.

7. theme editor> Assets directory and open the “theme.scss.liquid” file.

8. CSS code to style the “Charity Product” label.

.charity-label {
  background-color: #ff0000;
  color: #ffffff;
  padding: 5px 10px;
}

Modify the CSS properties to match your design preferences.

9. Save the changes to the “theme.scss.liquid” file.

10. Preview your changes to ensure that the “Charity Product” label is displayed on products tagged with “Charity” when browsing a collection.

[dmwwebartisan]

@frankiebuttons

Do you add a product tag for charity?

[gr_trading]

Hi @frankiebuttons

Request you to add the below code in card-product.liquid after line no 135

{% for t in card_product.tags %}
{% if t contains 'charity' %}     
   charity

{% endif %}
{% endfor %}

Please refer the below screenshots

[frankiebuttons]

needed a bit of tweaking but got it working, thanks!