Changing background colour on sections on different pages

Technical Q&A
1

Hi all,

Im very new to coding and Shopify so may need this explaining in detail.
Ive managed to add a background on my website but now I want to add a white background to everything (so basically the white runs all down the middle and the background is pretty much only seen on the left and right). I’ve managed to do it to all my sections on the home page, but how do I now do it on the Products, Blog and Contact Us page please?

website - www.thepersonaltouchstudio.com

password - aockea

hope this makes sense

thank you

2
  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >timber.scss.css and paste this at the bottom of the file:
div#shopify-section-blog-template, div#shopify-section-collection-template {
background: white;
}
.product-single {
background-color: white;
}
body#contact-us .grid .grid__item .grid__item {
background-color: white;
}
div#shopify-section-cart-template {
background-color: white;
}
1 Like
3

Thank you so much! It’s worked on all apart from the Contact page however.. any idea why?

also, is there a way to have the whole site navigation bar with a white background as atm there’s small gaps between each button, even though I put the margin to 0px (if that’s even what controls it!?)

thank you!

4

Hello @Jade0200

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >timber.scss.css and paste this at the bottom of the file:
main.wrapper.main-content {
    background-color: white;
}
5

That hasn’t worked for some reason.. It isn’t a big issue though. Thanks

In regards to the Contact Page… It’s not filling the background for some reason.. I’ve put a white border on it and I can see that has applied, but not the background. Any idea why? Please see photos.

Thank you for your help so far

6

Hi @Jade0200 ,

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to Assets > timber.scss.liquid and paste this at the bottom of the file:

.site-header .site-nav{

background: #fff !important;

}

main.main-content{

background: #fff !important;

}

7

edit to say I’ve just realised that also changed the contact page! Thank you so much

Ahh perfect! That’s sorted the navigation, thank you!!

any advice on the contact page situation too please?

thanks

jade