How do I change the colour background of each different specific product pages using metafields?

Shopify Discussion
1

I have lots of products and want each of them to have their own background colour on the header/product description section.

I’ve managed to set up a metafield colour picker on the product page, but i cant work out what to attach the metafield to?

2

Can you provide the store URL? and what theme are you using?

3

Using the example of a color metafield with the namespace “color” and key “1” (yours will likely be different), you can plug in the value and use it as if it were a hex color.
For example, if I wanted to make a text box with a background of that color, I could do something like:


This is text where the background will change color depending on the metafield value

Of course depending on what you need, the style will need to be different. To simplify things, you could assign a class to that div (or whatever element you’re styling) with most of the formatting you need, and then specify just the background color in “style”. I am unsure if you can reference a product metafield in general CSS, so this is what I do.

4

First, please check if you have assigned value to that meta field or not. Goto any specifc product and scroll to bottm towards metafields section, check if the value is assigned to meta field or not.

if assigned, you need to add that value into your css( code depends on your theme, please share site so we can checkout the theme css code)

5

https://fudifoods.myshopify.com/
Password: yeodim

6

Heya!

https://fudifoods.myshopify.com/
Password: yeodim

I have assigned a colour picker metafield to the product page but I dont’ know where to assign it to on my product page?

7

heya!

so mine is: product.metafields.custom.colour_background

Do I then put that code in the product page specific css? or in the theme.liquid css

I’m wanting to change the ‘grey background’ just of the header section on these product pages - fudifoods.myshopify.com/products/classic-mayo

Password: yeodim

8

‘product.metafields.custom.colour_background’

9

Heya

I’ve put this code below into the custom css section of the product description page. Which has the desired effect, however it has put the colour globally across all the product pages, and I need each product page to be a different colour.

{
background-color: #03befc;
}

^ Can i swap this code out for something to do with the metafield i’ve created on the product pages?

10

You can try:

{
background-color: {{ product.metafields.custom.colour_background.value}};
}

I am a little unfamiliar with how the new Shopify 2.0 system handles the custom CSS in the theme editor. If that doesn’t work, go into your theme’s template file for your product pages and you can modify the color by adding a style declaration to the HTML element you want to change, like this:


This is text where the background will change color depending on the metafield value

Let me know how it goes and if you need more guidance. I will try my best :slightly_smiling_face:

11

Hello

I have tried the top code and it didn’t work.

For the second one, where would I input the HTML element? I tried it in the custom css for the section in customise but that didnt work.

Thank you!

12

hey! So i added an extra section which was ‘custom liquid’ and added that code there. Which has bought the metafield colour through (orange).

However I need it for the whole background section, how would I do this?

Attatched ref pic!

13

You would use that color anywhere you need the color to be used. So for example, if you went into your product.liquid, you could find the element you need to add a style=“background-color: {{ product.metafields.custom.colour_background.value}};” to. If the background element isn’t in your product.liquid, you can look through your other files to find where it is and then add that style to it.