Jump to content

Custom background colour/image on each product page.

Recommended Posts

@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.

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment
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

Link to comment

@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.)

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment
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)

image.thumb.png.143eeb9c24819dbe15f35665bc99994d.png

image.thumb.png.53da113646b2ade9a7119041919a7e6e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.