Homepage Collections Section Background Color

Excursionist
35 1 2

hello to all, hope all is well. I'm trying to change the color on a couple different collections section on my frontpage. Want to make it obvious to buyers that its a different section, as of now the whole background for all the different sections is one color. if i could change a couple of them to a shade of gray that would be awesome. I'm not too familiar with coding but i try and play around and learn a thing or two using inspect element and programs like Atom. Just a novice here trying to get by. Anyone who can lend a hand or share some knowledge I would really appreciate it. my url is www.teeparts.com using Shopify Booster Theme.

0 Likes

Hello 

To change collection section background color:

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

div#shopify-section-1522671586612 {
    background-color: gray;
}

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Shopify Expert
665 170 199
Hi, @teviea ,
This is Evita from On The Map.
 
It's nice to hear that you already know some basics of the Inspect element. It's pretty simple to change background colors. 
1. Search for the container of which section you want to change the background - https://prnt.sc/q7gxcl
2. Copy the section ID or class, in your case you can use ID, ID only is one in the whole page, so you will overwrite only one section by this ID. 
3. Then go to theme.scss.liquid file and add this code:
#shopify-section-1574034837114 {
   background-color: grey;
}
If you want to override multiple sections then you can use a class as CSS selector:
.myClass {}
For classes we use ( . ) but for id's we use ( # ).
 
Have fun coding! :)
 
Best, Evita
 
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes