Solved

Dynamic background colour for a product based on metafield

CoffeeCommune
Tourist
6 0 1

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

Accepted Solution (1)
made4Uo
Shopify Partner
3833 716 1167

This is an 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>

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 11 (11)

CoffeeCommune
Tourist
6 0 1
made4Uo
Shopify Partner
3833 716 1167

This is an 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>

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
CoffeeCommune
Tourist
6 0 1

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?

 

Capture2.PNGCapture.png

CoffeeCommune
Tourist
6 0 1

Nevermind I got it.  needed to use :

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

1425085
Shopify Partner
5 0 0

Wish you well on your way to recovery 

CLIFTONRONE
1425085
Shopify Partner
5 0 0

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

CLIFTONRONE
KalebDean
Shopify Partner
1 0 0

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
Shopify Partner
5 0 0

Thank you very much for ideal

CLIFTONRONE
1425085
Shopify Partner
5 0 0

Thank very much helpful info 

CLIFTONRONE
cierat
Shopify Partner
1 0 0

Hi there! Is there a similar way to do this in the Highlight theme? Tried to input this in this code in the main-product.liquid but am not having any success.

PMike
Shopify Partner
134 12 20

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.

Fordeer Invoice Order Printer - The great tool for the best business!
https://link.fordeer.io/YZL4Ge