Changing product card background color based on tags

shellbell
Shopify Partner
94 1 14

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. 

Screen Shot 2023-03-31 at 9.09.12 AM.png

 

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 

Screen Shot 2023-03-31 at 9.09.27 AM.png

Replies 9 (9)

Muhammad_Ali_S
Shopify Partner
664 121 183

@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' %}
    <div class="product-wrapper pink-product">
  {% else %}
    <div class="product-wrapper">
  {% endif %}

  <!-- product card code here -->

  </div><!-- .product-wrapper -->
{% endfor %}

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

 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
shellbell
Shopify Partner
94 1 14

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

shellbell
Shopify Partner
94 1 14

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.

AliReviews
Shopify Partner
773 90 355

Hello @shellbell ,

 

You can try to following these steps:

  • Go to Online Store -> Theme -> Actions -> Edit code

Ref- step 1.png

 

  • 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

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
shellbell
Shopify Partner
94 1 14

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.

Ujjaval
Shopify Partner
1242 197 209

@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 %}

 

shellbell
Shopify Partner
94 1 14

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 %}

EPuck
Tourist
6 0 1

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.

 

Bailers
Shopify Partner
2 0 0

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" %}
<style>.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;
}</style>
{% endunless %}

 

Any help with this would be appreciated!