How can I change only the footer color in my theme?

Store Design
, , , , ,
1

I know this question is simple but no one seems to be able to answer it propperly. Everyones tip on chaging something in them.liquid about footer collor makes it change the collor of the whole theme including the top menu bar collor. I mean to change ONLY the footer’s collor background…

klaasvk_0-1701375060355.png
klaasvk_0-1701375060355.png368×258 7.47 KB

only that part ^^

2

Hey @klaasvk

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Sended u a message

4

Hey @klaasvk

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

RESULT:

Moeed_0-1701375780767.png
Moeed_0-1701375780767.png389×455 12.5 KB

NOTE: You change it from light gray into any color of your choice

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

Best Regards,
Moeed

5

Thankss That’s already going in the right direction and is an other solution to the problem but. Now I mean to get these 2 bars also this same collor…

klaasvk_0-1701375956839.png
klaasvk_0-1701375956839.png364×262 7.53 KB

Im stating to the 2 white bars top one and bottem one. They need to stay but be the same collor. Top one doesnt have to stay per se if that makes it easier.

6

Hey @klaasvk

Keep the previous code and add this new code above in theme.liquid file

.footer__content-top {
    padding: 0 !important;
}
.footer {
    padding-bottom: 0 !important;
}

RESULT:

Moeed_0-1701376589708.png
Moeed_0-1701376589708.png376×572 17.8 KB

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

Best Regards,
Moeed

7

Hi @klaasvk ,

You can try this code by following these steps:

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

Step 2: Search file theme.liquid

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

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

8

Isn’t there a way to change the collor of this padding? Because now it just gets rid of it and I prefer keeping the bottem one and also top if possible. Cus I could also have used the padding sliders to remove it that way in theme editor.

9

Nope, that’s the same it works but removes the padding and if I add padding it’s white instead of the grey.

10

Fixed it with chat GPT:

klaasvk_0-1701379508547.png
klaasvk_0-1701379508547.png682×691 7.77 KB

was simpler than I thought thanks for the kickstart! :slightly_smiling_face: