Remove black line in footer

Store Design

Topic summary

A user wants to remove a black border line appearing in their Shopify store footer.

Problem Identification:

  • One responder noted there are actually two black lines (upper and lower) and asked for clarification on which one to remove.
  • A screenshot was shared showing the issue.

Proposed Solutions:

Multiple community members provided CSS-based fixes:

  1. For the upper line: Add custom CSS via Theme Settings > Custom CSS:

    .site-footer { border-top: none !important; }

  2. For the lower line: Check the theme.liquid file for specific code segments and modify accordingly.

  3. General approach: Edit the theme’s CSS file (base.css, style.css, or theme.css) in the Assets folder and add border removal code targeting .site-footer or specific footer div IDs.

  4. Alternative method: Use the EasyEdits app for visual editing without coding (includes free trial).

One member referenced a similar resolved issue in another community thread. The discussion remains open pending confirmation of which line needs removal and whether any solution worked.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Screenshot 2024-12-07 at 08.00.26.png
Screenshot 2024-12-07 at 08.00.26.png2874Ă—912 130 KB

VIP

want to remove black line in footer

1 Like
2

Hi EzelLondon,

First, go to theme and find to edit code. Then, find costume.css and remove this part:

.site-footer {
    border-top: 1px solid #000000 !important;
}
3

Hi @EzelLondon ,

After reviewing the matter, we noticed that there are two black lines: https://prnt.sc/9I3SD86sFkiW

Could you please specify whether you are referring to the upper or lower one?

  • If it is the upper line, please follow these steps:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

footer.site-footer {
    border-top: none !important;
}

Here is the result: https://prnt.sc/8DrqPsMuVIHC

  • If it is the lower line, kindly check the theme.liquid file to see if the following segment is present. It appears that some code may be missing, so it shows like this: https://prnt.sc/77da7NCZITqL

Please let us know if you need any further clarification or assistance.

Best,

Daisy

4

Hello there @EzelLondon Another member of the community had a similar issue which appears to have been solved for them so I suggest you take a look at the solution here https://community.shopify.com/c/shopify-discussions/remove-black-line-in-footer-crave-theme/td-p/2849696 and let me know if it works for you

5

Hi @EzelLondon

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#shopify-section-sections--16663998300319__footer .site-footer {
    border: 0 !important;
}

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

6

Hey VIP! Removing that black line in your footer can be pretty simple, depending on your theme. Here are a couple of ways to do it:

1. Without an app: Use Custom CSS- Log in to your Shopify admin and go to Online Store > Themes.

  • Click Customize on your active theme.
  • Open the Theme Settings or Footer section (if your theme allows).
  • If there’s no direct option, you can add some custom CSS:
    1. Go back to Online Store > Themes and click Edit code.
    2. Look for the theme.css or style.css file (usually in the Assets folder).
    3. Add this code at the bottom:
div footer.site-footer {
    border-top: none !important;
}
  • Save and refresh your site to check.

2. Easier with EasyEdits

If you’re not comfortable messing with code, you can use EasyEdits to make these changes visually—no code required. You can edit your store during a free trial and keep your edits forever, even if you don’t stick with the app.

Let me know if you need more help! (P.S. I’m the developer of EasyEdits, so feel free to ask any questions about it.) :blush: