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

Finally, 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>