Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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>
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>
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?
Nevermind I got it. needed to use :
<style>
main#MainContent, main#MainContent > section > * {
background: {{ product.metafields.custom.product_background_color }};
}
</style>
Wish you well on your way to recovery
No but I can try looking up to hopefully find the right ideal
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.
Thank you very much for ideal
Thank very much helpful info
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.
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025