Add background colour to a particular section in home screen: Venture Theme

Solved
ChamanGarg
Explorer
85 0 23

Hi, I want to add a different light background colour to few of my sections in the home page to properly have visual segregation between the sections but I am unable to do so.

Can someone please check my website and let me know how I can do it?

 

Any help is highly appreciated.

Store- sohumretail.myshopify.com

Pass- Chaman@10

 

 

0 Likes
Pallavi
Shopify Expert
2351 395 508

This is an accepted solution.

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

.custom-content.section-block {
background-color: #efecec!important;
}

Screenshot :- https://image.prntscr.com/image/PSnJ8nmgSAm28JulROrVQQ.png

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ChamanGarg
Explorer
85 0 23

Hi @Pallavi ,

I was able to edit the code to get the full width background image but it is not working for the lower section. Can you please check what should I edit?

Screenshot 2021-07-27 at 3.05.33 PM.png

Pallavi
Shopify Expert
2351 395 508

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

.section-block {
background-color: #f2f3f3!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ChamanGarg
Explorer
85 0 23

@Pallavi But now the colour is appearing in a lot of different other sections too:

Screenshot 2021-07-27 at 4.02.52 PM.png

Screenshot 2021-07-27 at 4.02.43 PM.png

  

0 Likes
Pallavi
Shopify Expert
2351 395 508

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

main#MainContent {
background-color: #f2f3f3!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ChamanGarg
Explorer
85 0 23

Hi @Pallavi , I am still having issues with the background colour. After pasting the latest code you sent, my entire page turned into the changed background colour. I just want to add the background colour in two sections of my home page:

 

1) The one with heading " Buy Luxury Linens for your Home"

2) In the testimonial section.

3) All the rest of the places, I want the colour to be white.

Pallavi
Shopify Expert
2351 395 508

This is an accepted solution.

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

Remove this one css

.section-block {
background-color: #f2f3f3!important;
}
main#MainContent {
background-color: #f2f3f3!important;
}

and add this one css

div#shopify-section-16273707681b8e570f .section-block {
background-color: #f2f3f3!important;
}

div#shopify-section-16273707681b8e570f .section-block.section-block--padding {
background-color: #f2f3f3!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ChamanGarg
Explorer
85 0 23

Works perfectly! Thanks for the help

Pallavi
Shopify Expert
2351 395 508

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes