Hey all! I’m wondering how I can add a custom color as a background for my separate product pages. I have them separated into individual product templates, but I need some code to have each product page have a different color.
store preview link: https://qsev7tox9e7w3qkp-461799479.shopifypreview.com
example: this product page to have a yellow background: https://qsev7tox9e7w3qkp-461799479.shopifypreview.com/products/classic-vegan-pancake-mix
while this one may have a brown background: https://qsev7tox9e7w3qkp-461799479.shopifypreview.com/products/vegan-protein-pancake-waffle-mix?pr_prod_strat=use_description&pr_rec_id=3efd2f896&pr_rec_pid=7686316753124&pr_ref_pid=657472684087&pr_seq=uniform
Any help will be greatly appreciated!
Hi @CoconutWhisk , different logic can be applied. if you have created different templates just for the background delete them all and follow following guide
first, go to the product editor in the admin panel and add tags to every product with the color name.
like yellow, black, green, brown, etc,
in the main product, the template adds this code at the top.
Hello @CoconutWhisk ,
You can add the template suffix as your selector on each product template, and then you can use this selector for changing the background on the basis of templates.
Follow the below steps to get this done.
Go to your Shopify admin > Sales channels > Online store
Click on Actions > edit code > open theme.liquid file
Add this liquid code on the body tag it will consider your template name as a class
Save the changes
Liquid code: {{template.suffix}}
image.png
Once you have done the changes you can use the template class for adding CSS.
For example:-
.home-decor #MainContent{
background: lightyellow;
}
.home-appliances #MainContent{
background: lightblue;
}
Hope it helps. Let us know if you need any help with your Shopify store.
Regards,
CedCommerce
