CHANGE PRODUCT TEMPLATE BACKGROUND COLOR
Add this in the css portion of your shopify product template
![](https://docs.ecomgraduates.com/~gitbook/image?url=https%3A%2F%2F3394815590-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbajcVQsjNx8rgcGaypog%252Fuploads%252FO7M8ExjxEBME4QgzMUPn%252Fimage.png%3Falt%3Dmedia%26token%3Ddc9e3b2e-6333-46eb-93dc-504f3a4c658d&width=768&dpr=4&quality=100&sign=8115e7aa&sv=1)
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:
![](https://docs.ecomgraduates.com/~gitbook/image?url=https%3A%2F%2F3394815590-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbajcVQsjNx8rgcGaypog%252Fuploads%252FODwJY6u9zffysm1Nvp2l%252Fimage.png%3Falt%3Dmedia%26token%3D570010b0-95e9-469c-a2e5-8908c302073e&width=768&dpr=4&quality=100&sign=70dfdbb&sv=1)
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.
![](https://docs.ecomgraduates.com/~gitbook/image?url=https%3A%2F%2F3394815590-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbajcVQsjNx8rgcGaypog%252Fuploads%252FSh7XCrXurc9S51DJjhhz%252Fimage.png%3Falt%3Dmedia%26token%3D294f1829-3987-469f-b921-8ad0a29200a6&width=768&dpr=4&quality=100&sign=578ab8c8&sv=1)
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:
![](https://docs.ecomgraduates.com/~gitbook/image?url=https%3A%2F%2F3394815590-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbajcVQsjNx8rgcGaypog%252Fuploads%252FLeGlNAkXVGMUvZ91uvzm%252Fimage.png%3Falt%3Dmedia%26token%3D3a7358e4-7a90-4495-8c63-230e30123897&width=768&dpr=4&quality=100&sign=9df0d983&sv=1)
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:
![](https://docs.ecomgraduates.com/~gitbook/image?url=https%3A%2F%2F3394815590-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbajcVQsjNx8rgcGaypog%252Fuploads%252FApIuw6fsN1DDADACTpjA%252Fimage.png%3Falt%3Dmedia%26token%3D980e2103-ca01-4831-972c-dd694a181c80&width=768&dpr=4&quality=100&sign=84e1b109&sv=1)
Last updated