Re: Changing the background color of a specific page

Changing the background color of a specific page

bensutrecht030
Shopify Partner
6 0 4

Hello. I'm having problems with changing the background of 1 page on my website to this color: #f2f2f2

I want to change the background of the whole page, not only the sections. I cant turn everything to this color, the whitespaces between the media grids and text stays white. Can someone help? 

bensutrecht030_0-1693065009283.png

 

Replies 13 (13)

devcoders
Shopify Partner
191 31 48

Hello there,

Kindly provide the website URL along with the corresponding password.

Thank you!

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
bensutrecht030
Shopify Partner
6 0 4
devcoders
Shopify Partner
191 31 48

Hello @bensutrecht030 


please add this css Asset > theme.css and paste this at the bottom of the file:-

body {
background: #f2f2f2!important;
}

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
killerpresets
Excursionist
27 0 2

Very easy solution! I can't believe this isn't in the theme settings anywhere. Crazy.

Two wrongs don't make a right, but three rights make a left.

JustinTharpe
Shopify Partner
142 5 17

Hi @bensutrecht030 

 

Please share the website URL, and also the storefront password if it's locked.

 

Then only I can suggest a code change.

 

Cheers!

Please Like and Accept Solution if Useful.
The two picks of this month: Shipping Address Editor and Product Customizer
Shopify Community Helper
bensutrecht030
Shopify Partner
6 0 4

Hi Justin. 

 

Thanks for helping out. here is the link: https://shabb-clothing.myshopify.com/ 

The password is: humpis

 

Cheers

JustinTharpe
Shopify Partner
142 5 17

Add this to your theme.liquid file in the style tag, and your background should become that off-white color.

 

body {
    background: #f2f2f2;
}

 

Hope this helps, Cheers!

Please Like and Accept Solution if Useful.
The two picks of this month: Shipping Address Editor and Product Customizer
Shopify Community Helper
bensutrecht030
Shopify Partner
6 0 4

Hi! 

 

I cant find the style tag in my theme.liquid file. I used control + f to find <style> but it isnt here.

 

PageFly-Henry
Shopify Partner
1184 335 283

HI @bensutrecht030 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

 

 

body {
background: #f2f2f2 !important;
}
#main section {
background: #f2f2f2 !important;
}

Hope that my solution works for you.

Best regards,

Henry | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Moeed
Shopify Partner
4365 1123 1380

Hey @bensutrecht030 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if page.handle == "contact" %}
<style>
main#main {
    background: #f2f2f2 !important;
}
</style>
{% endif %}

RESULT:

Moeed_0-1693073299816.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
bensutrecht030
Shopify Partner
6 0 4

Hi Moeed! 

 

It worked! Thanks. But there is some whitespace on the top and bottom that is not grey... Look at my screenshot: 

bensutrecht030_0-1693150773387.png

How do i remove the whitespace on the top and bottom? 

bensutrecht030_1-1693150817160.png

 

Beae_Cass
Shopify Partner
436 167 176

Hi @bensutrecht030 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

 

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

{% if page.handle == "contact" %}
<style>
main#main {
    background: #f2f2f2 !important;
}
.section-spacing {
    margin: unset !important;
    
}
.section-spacing>div{
    padding-bottom: 64px
}
</style>
{% endif %}

It's also help you to remove the whitespace on the top and bottom.

 

Best regards,

Anthony

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Demo Template

PageFly-Richard
Shopify Partner
4416 1007 1657

Hi @bensutrecht030 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

main#main {
    background-color: #f2f2f2 !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.