Custom background colour/image on each product page.

Hi everyone,

Just wondering if there's a way to get the background on each of my stores products so that each one has it's own background if I change it in design it seems to change it on everything.

Have attached very rough examples of what I'm trying to achieve that I done on photoshop along with the originals.

Thanks in advance.

@CocoaCollective

I've achieved this on a client's site by using the below:

// Product 1 Background Color

div#yui_123456789 {
background-color: #123456 !important;
}

// Product 2 Header Background Color

#item-123456789 .header{
  background-color: #123456 !important}

If you share your website link, I can give you the exact code per product or you can inspect the page and find the right values.

With this way, we can use code to Code Block in Additional Info, then you can change color on each product

If you share url, we can help easier

Thanks for the replies...

the site url is: cocoacollective.co.uk

On 9/8/2023 at 7:37 PM, WCS said:

@CocoaCollective

I've achieved this on a client's site by using the below:

// Product 1 Background Color

div#yui_123456789 {
background-color: #123456 !important;
}

// Product 2 Header Background Color

#item-123456789 .header{
  background-color: #123456 !important}

If you share your website link, I can give you the exact code per product or you can inspect the page and find the right values.

Thanks @WCS,

So where would I be putting this code?

The website url is cocoacollective.co.uk

@CocoaCollective  Go to Website > Website Tools > Custom CSS and paste it in. Alternatively, you can do a short cut by hitting / and type in Custom CSS. 

It looks like your site is a little different from the one I tested the code on. If you tell me what version you're using, I can send you a video with the steps! (It's unfortunately too many for me to give you all the code for at the moment.)

13 hours ago, WCS said:

@CocoaCollective  Go to Website > Website Tools > Custom CSS and paste it in. Alternatively, you can do a short cut by hitting / and type in Custom CSS. 

It looks like your site is a little different from the one I tested the code on. If you tell me what version you're using, I can send you a video with the steps! (It's unfortunately too many for me to give you all the code for at the moment.)

I think this site is Brine Family

20 hours ago, CocoaCollective said:

Thanks for the replies...

the site url is: cocoacollective.co.uk

You can edit each product > edit Additional Info > Add a Code Block > Paste this code

<style>
body, .Site, header.Header, .Site-inner, .Main, footer.Footer {
    background-color: #e5d3cb !important;
}
</style>

You can repeat code for other products, just change color in the code

If you have some products use same color, let me know, I will give another simpler code

(I removed code for announcement bar, so don't care the screenshot)

@tuanphan always working that magic! ✨