Changing the background color of a specific page

Store Design
,
1

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
bensutrecht030_0-1693065009283.png1895×901 299 KB

2

Hello there,

Kindly provide the website URL along with the corresponding password.

Thank you!

3

Hi Justin.

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

The password is: humpis

Cheers

4

Hi!

https://shabb-clothing.myshopify.com/

pass: humpis

5

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

6

Hi!

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

7

Hello @bensutrecht030

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

body {
background: #f2f2f2!important;
}
8

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 tag

{% if page.handle == "contact" %}

{% endif %}

RESULT:

Moeed_0-1693073299816.png
Moeed_0-1693073299816.png1905×958 291 KB

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

Best Regards,
Moeed

9

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

10

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
bensutrecht030_0-1693150773387.png1910×964 301 KB

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

bensutrecht030_1-1693150817160.png
bensutrecht030_1-1693150817160.png1871×635 89.2 KB

11

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 :
{% if page.handle == "contact" %}

{% endif %}

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

Best regards,

Anthony

12

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