Changing product card background color based on tags

Store Design
1

Hi I want to be able to change the product card when viewing products or collection to show a different background based on a product tag.

This is what the current product card looks like.

So this is what the current product card looks like
So this is what the current product card looks like840×1292 142 KB

I want to make it look like these based on the product tags. So I want to be able to style them based on like tag of pink for the Rose one. Is this possible? I tried some things, but it either changed

I want them to look like this based on the products tag
I want them to look like this based on the products tag1552×822 244 KB

2

@shellbell
Nice idea.
It can be done.
The first step would be to define some colors using CSS. Then get all the tags of a product, if we find the tag we are looking for, we can add it as a class to the product card, or add a new class.
For instance, let’s say we add a “pink” tag to a product. If we find that tag, we would add the “pink” class to the product card.
Like this :

{% for product in collection.products %}
  {% if product.tags contains 'pink' %}
    
  {% else %}
    

  {% endif %}

  

  

{% endfor %}

I hope it helps. I might not use tag personally. I would use a metafield but it’s up-to you.

3

Hello @shellbell ,

You can try to following these steps:

  • Go to Online Store → Theme → Actions → Edit code

Ref- step 1.png
Ref- step 1.png1434×819 104 KB

  • Go to Assets → template-collection.css → add the following code
{% if product.tags contains 'pink' %}
  .cart {
    background-color: pink;
  }
{% endif %}
  • Repeat the code and change the color that you want for each tag
  • Save and preview.

Hope this can help.

Ali Reviews team

4

@shellbell Add below code into main-product.liquid

{% if product.tags contains 'pink' %} 
       .card.card--card.card--media.color-background-2.gradient
       { background-color: pink; }
{% endif %}
{% if product.tags contains 'green' %}
      .card.card--card.card--media.color-background-2.gradient
      { background-color: green; } 
{% endif %}
{% if product.tags contains 'blue' %}
       .card.card--card.card--media.color-background-2.gradient                              
      { background-color: blue; } 
{% endif %}
{% if product.tags contains 'grey' %}
       .card.card--card.card--media.color-background-2.gradient 
        { background-color: grey; } 
{% endif %}
5

The closest thing I could get to work was this, but it changes all the card backgrounds, so curious

{% if card_product.tags contains ‘rose’ %}

{% style %}

.card.card–card.card–media.color-background-2.gradient

{background-color: #FDBCB8;}

{% endstyle %}

{% endif %}

I know I need to put in in my card-product.liquid ( I am using Dawn theme if that helps anyone), but I can’t get it to do what i want

6

I don’t want it in the cart, I am talking about the Card-product. So when it shows up as the product card, like in collection product grid and such.

7

I want to put it in the card-product not main product as I want it for the product grids in things like collections. I have tried the following, closest thing to work but changes everything, anything else I tried changes nothing.

{% if card_product.tags contains ‘rose’ %}

{% style %}

.card.card–card.card–media.color-background-2.gradient

{

background-color: #FDBCB8;}

{% endstyle %}

{% endif %}

8

How would you use a metafield to do this? I have used for various things but never a background color for product card. I did use it to change the main product picture already though, but unsure how to set that as a background color.

9

Any luck with this? I am interested in changing product card backgrounds based on tags.

In card-product.liquid I found:

{% if card_product.featured_media %} card–media{% else %} card–text{% endif %}
{% if settings.card_style == ‘card’ %} color-{{ settings.card_color_scheme }} gradient{% endif %}
{% if image_shape and image_shape != ‘default’ %} card–shape{% endif %}
{% if extend_height %} card–extend-height{% endif %}
{% if card_product.featured_media == nil and settings.card_style == ‘card’ %} ratio{% endif %}
{% if horizontal_class %} card–horizontal{% endif %}

and was thinking this may be what needs to be altered however not sure how.

10

I’m trying to do the same thing. It just applies the css the all the products on the collection page.

{% unless card_product.tags contains “second” %}

.product-item__secondary-image { opacity: 1; visibility: visible; } .product-item__secondary-image:hover { opacity: 0 !important; visibility: hidden; } .product-item__primary-image { opacity: 1 !important; visibility: visible !important; }

{% endunless %}

Any help with this would be appreciated!

11

Great read! For anyone researching insurance for green card holders , this guide helped me a lot. It explains the requirements really clearly.