Horizontal line between footer and the rest of the page

Store Design

Topic summary

A user seeks to add a horizontal separator line above their website footer to distinguish it from the main content, as both share the same background color. This line needs to appear consistently across all pages.

Multiple solutions provided:

  • CSS-based approaches: Most responses suggest adding CSS code to either base.css, section-footer.css, or theme.css files using a border-top property with varying colors (#f4abab, #7D5757) and thickness (1px-2px).

  • Alternative method: One suggestion involves adding CSS within <style> tags in the theme.liquid file, placed before the closing </head> tag.

  • Existing border noted: One respondent points out that a small border already exists on the footer, questioning whether a thicker line is desired.

Status: The discussion remains open with no confirmed resolution from the original poster. All proposed solutions follow similar CSS modification patterns but differ in file location and specific styling values.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
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 Likes
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

1 Like
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!