CHANGE PRODUCT TEMPLATE BACKGROUND COLOR
Add this in the css portion of your shopify product template

#product-template {
background: #ddd;
}
or if you would like to have each color different in the product form Follow these steps
1. Add CSS to the Product Template
First, you’ll need to add the following CSS to your product template to allow the background color to be dynamically set:
cssCopy code#product-template {
background-color: var(--product-bg-color, transparent);
}

2. Create a Metafield
Next, you need to create a new metafield to store the background color for your products.
Field Name: Color
Namespace:
custom.color
This will allow you to set a custom background color for each product.

3. Modify the Product Template
In your product template file, modify the HTML to include the background color from the metafield. Add the following attribute to your product template’s HTML:
<div id="product-template" data-bg-color="{{ product.metafields.custom.color.value }}">
<!-- Product content here -->
</div>

4. Add JavaScript Before the Closing </section>
Tag
</section>
TagFinally, add the provided JavaScript snippet before the closing </section>
tag in your product template. This script will apply the background color dynamically when the page loads:
htmlCopy code<script>
document.addEventListener('DOMContentLoaded', function() {
const productTemplate = document.getElementById('product-template');
if (productTemplate) {
const bgColor = productTemplate.dataset.bgColor;
if (bgColor) {
productTemplate.style.setProperty('--product-bg-color', bgColor);
}
}
});
</script>

Last updated