Dynamic background colour for a product based on metafield

[CoffeeCommune]

Hi

We are using Dawn v9 theme and have a separate product page for one of our product types  (roasted-bean-prod).

We want to change the background in the Product information section on the product page dynamically.  The colour would be based on a metafield for each product called product_background_color.

Can someone please help me with the code and where to place it to achieve this?

Thanks

[CoffeeCommune]

Site link:  https://aizwkk7td2qlbm78-57933693097.shopifypreview.com

[made4Uo · Accepted solution]

Hi @CoffeeCommune,

You can use the code as reference. Place the code on the very top of your main-productl.liquid. 

NOTE: Change the {{ product.metafield.custom.color.value }} to your metafield.

<style>
main#MainContent, main#MainContent > section > * {
    background: {{ product.metafield.custom.color.value }};
}
</style>

[CoffeeCommune]

Hi, many thanks for helping.  I have added the code to the top of the main-product.liquid file and set metafield colours for a few products (reverance and arnika) but it doesnt work.  Any ideas why?

[CoffeeCommune]

Nevermind I got it.  needed to use :

<style>
main#MainContent, main#MainContent > section > * {
background: {{ product.metafields.custom.product_background_color }};
}
</style>

[1425085]

Wish you well on your way to recovery 

[1425085]

No but I can try looking up to hopefully find the right ideal 

[KalebDean]

Hey @made4Uo 

I have a similar question about a Marquee or Announcement Bar. I am using Baseline theme.

I want to change the color of the announcement bar at the top, and subscribe bar at the bottom of the product page dynamically. The color would be based on a metafield for each product called product_background_color.

Can someone you help me with the code and where to place it to achieve this? I'm not sure if its in the product.liquid or announcement-bar.liquid.

[1425085]

Thank you very much for ideal

[1425085]

Thank very much helpful info 

[PMike]

To dynamically change the background color in the Product information section on the product page in the Dawn v9 theme based on a metafield called "product_background_color," you can follow these steps:

1. From your Shopify admin, go to "Online Store" and then click on "Themes."
2. Locate the Dawn v9 theme you are using and click on "Actions" > "Edit code."
3. In the left sidebar, under "Sections," find and click on the file named "product-template.liquid" or "product.liquid" (the exact name may vary depending on your theme).
4. Look for the section of code that generates the Product information section on the product page. This is typically marked with HTML tags such as `<div>` or `<section>`.
5. Inside this section, find the code that sets the background color. It might look something like `<div class="product-info" style="background-color: #ffffff;">`. Remove the inline style attribute from this element, as we will be adding the color dynamically.
6. Locate the `{{ product.metafields }}` object within the code. It may be within a `{% schema %}` tag or within a script tag. If it's not present, you may need to add it. Here's an example of how it could look:

```
{% schema %}
{
"name": "Product",
"settings": [
{
"type": "metafield",
"id": "product_background_color",
"label": "Product Background Color",
"namespace": "global",
"key": "product_background_color",
"group": "Metafields"
}
]
}
{% endschema %}
```

7. Add the following code after the `{{ product.metafields }}` object:

```
{% assign productBackgroundColor = product.metafields.global.product_background_color %}
{% if productBackgroundColor %}
<style>
.product-info {
background-color: {{ productBackgroundColor }};
}
</style>
{% endif %}
```

This code assigns the value of the "product_background_color" metafield to the `productBackgroundColor` variable. It then checks if the variable has a value, and if it does, it injects a `<style>` block to set the background color of the `.product-info` element dynamically.

8. Save the changes and preview your product pages to see if the background color in the Product information section is updated based on the "product_background_color" metafield for each product.

Please note that modifying the theme code requires some technical knowledge, and it's recommended to create a backup or consult with a Shopify expert if you're not familiar with making these changes.