Solved

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

klaasvk
Excursionist
30 2 2

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

 

only that part ^^

Accepted Solution (1)
klaasvk
Excursionist
30 2 2

This is an accepted solution.

Fixed it with chat GPT: 

klaasvk_0-1701379508547.png

was simpler than I thought thanks for the kickstart! 🙂

View solution in original post

Replies 9 (9)

Moeed
Shopify Partner
3672 928 1159

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
klaasvk
Excursionist
30 2 2

Sended u a message

Moeed
Shopify Partner
3672 928 1159

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 </body> tag

<style>
.footer__content-bottom.scroll-trigger.animate--slide-in {
    background: lightgray !important;
}
</style>

RESULT:

Moeed_0-1701375780767.png

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
klaasvk
Excursionist
30 2 2

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

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.

Moeed
Shopify Partner
3672 928 1159

Hey @klaasvk 

 

Keep the previous code and add this new code above </style> in theme.liquid file

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

RESULT:

Moeed_0-1701376589708.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 developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
klaasvk
Excursionist
30 2 2

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.

PageFly-Oliver
Astronaut
840 175 155

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

 

<style>
.footer__content-top {
    padding: 0 !important;
}
.footer {
    padding-bottom: 0 !important;
}
.footer__content-bottom {
    background: color
}

</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | 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.

klaasvk
Excursionist
30 2 2

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

klaasvk
Excursionist
30 2 2

This is an accepted solution.

Fixed it with chat GPT: 

klaasvk_0-1701379508547.png

was simpler than I thought thanks for the kickstart! 🙂