Horizontal line between footer and the rest of the page

Store Design
1

I would like to add a line above my footer to separate the footer with the rest of the content on the website. This is very important for my website, because all the background on my website is the same color. The line above the footer has to come back on every page you are on on my website.

https://edensbakehouse.nl/

yuidri

EdensBakehouse_0-1736508000680.png
EdensBakehouse_0-1736508000680.png1838×738 69.2 KB

2

Hey @EdensBakehouse ,

Please add this CSS to the base.css file:

.footer:not(.color-scheme-1) {
border-top: 1px solid #f4abab !important;
}

Hope that helps :grinning_face_with_smiling_eyes:

Cheers!
Shreya | Revize

3

Hey @EdensBakehouse

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-1736508327514.png
Moeed_0-1736508327514.png1890×879 68 KB

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

Best Regards,
Moeed

4

Hello @EdensBakehouse
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-footer.css
add this code at the end of the file and save.

.footer:not(.color-scheme-1) {
border-top: 1px solid #f4abab !important;
}

result

131.png
131.png1440×919 79.9 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Hi @EdensBakehouse

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
footer.footer.color-scheme-2.gradient.section-sections--23993111118149__footer-padding {
    border-top: 2px solid #7D5757 !important;
}

Result:

websensepro_0-1736508713796.png
websensepro_0-1736508713796.png1337×602 52.6 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

6

Hi @EdensBakehouse

You already have a small border on the footer. Do you like it more thicker?

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

7

Hello @EdensBakehouse ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > section-footer.css and paste the following code at the bottom of the file:
footer.footer.color-scheme-2.gradient{
    border-top: 1px solid !important;
}

ZestardTech_0-1736511757444.png
ZestardTech_0-1736511757444.png1905×508 43.6 KB

Let me know if you need further assistance!

8

Hi @EdensBakehouse

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!