Solved

Change background colour of section

SW6
New Member
7 0 0

I want to change the background of two sections on my homepage. There is no guide for the Venture theme on how to do it. Can somebody help me doing it? The sections are: Testimonial and the Rich Text

 

Website: Onlinesurvivalshop.com

Accepted Solution (1)
PremierStores
Shopify Partner
285 28 52

This is an accepted solution.

Go to themes-> edit code, at the sidebar scroll down and you will find the assets/theme.scss, paste the code below at the  bottom of the file:

/* richt text */
div#shopify-section-1584104623209 {
    background-color: red;
}

div#shopify-section-1584104623209 .section-block.section-block--padding.grid.grid--no-gutters {
    background-color: red;
}

/* testimonials */
div#shopify-section-1584104599602 {
    background-color: blue;
}

#shopify-section-1584104599602 .section-block.section-block--padding {
    background-color: blue;
}

You can change blue and red with the color you want. If helpful please like and mark as a solution.

Best regards.

Let's make the best store!
Contact us at: thepremierstores@gmail.com

View solution in original post

Replies 29 (29)

Not applicable

It is only possible by CSS and have to create setting in admin dashboard within sections to choose colors.

Shy613
Visitor
1 0 0

Can you contact me at: shaya.619@hotmail.com, need some help with some codes!

PremierStores
Shopify Partner
285 28 52

Hi, @SW6

Do you want to be able to customize the colors? or you just want to change it once?
The URL you provide isn't a Shopify store.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
SW6
New Member
7 0 0

I want to change it once to light grey. Oh my bad: online-survival-shop.myshopify.com

PremierStores
Shopify Partner
285 28 52

Thank you, we review it and if we sent you a CSS code it will not work anymore if you make changes on your sections. We can help you with this task if you want we can send you an invitation to your Shopify as a collaborator then we can customize it for you.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
SW6
New Member
7 0 0

Okay, I can try adding the CSS myself 🙂

PremierStores
Shopify Partner
285 28 52

This is an accepted solution.

Go to themes-> edit code, at the sidebar scroll down and you will find the assets/theme.scss, paste the code below at the  bottom of the file:

/* richt text */
div#shopify-section-1584104623209 {
    background-color: red;
}

div#shopify-section-1584104623209 .section-block.section-block--padding.grid.grid--no-gutters {
    background-color: red;
}

/* testimonials */
div#shopify-section-1584104599602 {
    background-color: blue;
}

#shopify-section-1584104599602 .section-block.section-block--padding {
    background-color: blue;
}

You can change blue and red with the color you want. If helpful please like and mark as a solution.

Best regards.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
SW6
New Member
7 0 0

Thank you so much!

JuliannaMarie
Tourist
15 0 1

I have a similar problem. I'd like to change the back ground color of the image + text section. Can you help me with the code as well?

 

https://w70afbrxf1wcglzb-36567777339.shopifypreview.com

PremierStores
Shopify Partner
285 28 52

Hi, @JuliannaMarie

We noticed you already have the "image with text" section with a custom background; if not please add that section to inspect it.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
JuliannaMarie
Tourist
15 0 1
Yes, I solved that problem. Can you help me change the back ground color
for the first statement

"we’re founded on the principle that proper personal grooming is the key to
keeping things clean & bright for a better day.

*we’re excited to show you how."*



PremierStores
Shopify Partner
285 28 52

Hi @JuliannaMarie

 

Use the code below on your stylesheet you must replace blue and red with the colors you want, padding and margin are optional to remove the white space between the last section and footer.

div#shopify-section-1586899291832 {
    background-color: blue;
}

div#shopify-section-1586536520191 {
    background-color: red;
    padding-bottom: 55px;
}

body.template-index footer.site-footer {
    margin-top: 0;
}
Let's make the best store!
Contact us at: thepremierstores@gmail.com
samansmd
Visitor
3 0 0

how can we change background of product page?

and where exactly should we past the codes?

nikita99
Visitor
1 0 0

Hello

 

https://rnr-hot-tubs.myshopify.com/ How can i change the background color of each section in my store?

Yairperez
Visitor
2 0 1

Hi! which code is for the newsletter?

juliansjuicebox
Shopify Partner
1 0 1

I would like to know the same 🙂

davechadha
Visitor
1 0 0

Theme: Dawn
Areas To Change: Custom.Liquid.

 

 

lexiemccarty
Shopify Partner
12 0 3

I added in this code to my Debut theme but it did not update any of the background section colors nor do I have the option the change the colors in the section settings? Please help!

samansmd
Visitor
3 0 0

How can change the background colour of the product page?

please show me exactly where to past the codes? and what's the code?

samansmd
Visitor
3 0 0

how can we change background of product page?

and where exactly should we past the codes?

 

et_shop
Visitor
1 0 0

Hello! I'm wondering how to adapt this for different sections? For example a contact form (but potentially some others) ?

Stephanie073
New Member
6 0 0

I'm having the same issue. I would like to be able to put a color picker for my sections. Like to be able to choose any color for any section. Is there a way to do that ? thanks!

PremierStores
Shopify Partner
285 28 52

Hi, @Stephanie073

Which section do you want to edit? What theme are you using?

Best regards.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
Stephanie073
New Member
6 0 0

Hi! I'm using parallax theme. I would like to have a color picker so I can choose myself and customize every section. But for now it's the «my mission» and «my vision» section of the page about us that I would like to customize 

 

https://stylenceapparel.com/pages/about-us

 

thanks for helping!

PremierStores
Shopify Partner
285 28 52

Hi, @Stephanie073

It can be done by adding CSS code to the stylesheet, by if you want to customize every single section you have in your theme we will need to edit the liquid code,
then you will able to have a color picker for background and font, feel free to send us an email to assist you better.

Best regards.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
gimmethreads
Visitor
3 0 0

@PremierStores if i wanted to change the background on my homepage for the "Shop by Category" and "Shop all Air Plants" would i follow a similar css edit?

https://by8exgfduzp6kgqt-46378713254.shopifypreview.com

 

Thank you, Kate

emporiumw
Visitor
2 0 0

Hello there, is it possible to change the background colour of the slideshow section on our homepage?

We want it to match the background colour (#343434) of the header section above.

Our theme is District

and url is emporiumworthing.com

We have just started so thanks for any assistance.

 

 

 

 

emporiumw
Visitor
2 0 0

I've found a workaround. I added a frame around the photo colour-matched to the header section.

Thanks

3DDesign
Tourist
7 0 1

Hi there,

 

I am wanting to customize the color of section backgrounds as well.  Can you help with what CSS needs to added to do this?!

 

Thanks!