Change product background color dynamically to a specified color

Store Design
1

Hi Shopify Gurus,

My website is : https://pawtietime.com/products/canvas

I wish to change the color of the product background for each product. Is there a way to dynamically change the color as per specified color?

For example, if i specify product A to have color blue and product B to have color pink, i wish to have each product page background to reflect that color. So im unsure on how to give that color specification to each product.

2

I have explore meta tags and used color to define each product. now how do i reference that color to code editor?

3

Update: My metafield is correctly outputting the right hex code that ive assigned it to the product.

ridhi01_0-1676792372485.png
ridhi01_0-1676792372485.png1678×286 24.7 KB

But when i type that in my css , its not picking up the hex code :disappointed_face:

ridhi01_1-1676792455636.png
ridhi01_1-1676792455636.png1246×104 16.4 KB

4

Very close!

Would be a lot easier if you edit this directly in your product section…

Not sure what theme you’re using but in your product section, find the div with these classes ‘product__media media media–transparent customcolorstyle’

And add the logic below.

Basic logic for for metafields:

{% assign assign color-meta-tests =  product.metafields.custom.color_meta_tests %}
{% if color-meta-tests != blank %} 
 {% style %}
                .customcolorstyle {
                  background-color: {{ color-meta-tests }} !important;
                }
              {% endstyle %}
              {% endif %}

Replace this metafield with yours…

Hope it makes sense

5

thank you so much! youre such an angel. this worked perfectly!

1 Like
6

Glad I could help

7

Hi there:

I am trying to do the same thing that the author of this post was attempting, but it’s not working for me. I am working in the Kalles theme and trying to change product background colors based on flavor. My metafield seems to be pulling the correct code, but I’m placing it within the ecomposer template, and it doesn’t seem to be applying the background color to the page.

Store URL: https://art-of-sucre.myshopify.com/
PW: ifreul

Color applied to metafield does seem to be pulling correctly if you view https://art-of-sucre.myshopify.com/products/birthday-cake-cotton-candy (under share icons)

Thanks in advance for the help!!