Remove bottom lines?

Store Design

Topic summary

A user seeks help removing or hiding bottom lines (borders/dividers) appearing on each page of their Shopify store.

Initial Responses:

  • Two community members request the store URL and password (if applicable) to inspect the issue directly.

Proposed Solutions:

  • General CSS approach: Add custom CSS to the theme’s main stylesheet (e.g., theme.css.liquid or base.css) to remove borders and box-shadows from common elements like headers, footers, sections, and <hr> tags using border-bottom: none !important; and display: none !important;.

  • Mobile-specific footer fix: Insert CSS targeting the footer on mobile screens (max-width: 750px) to remove the top border using border-top: none !important;.

Both solutions involve editing theme code via Online Store > Themes > Edit code > Assets. The discussion remains open, awaiting confirmation from the original poster on whether these solutions resolved the issue.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

How to remove/set insivible the bottom lines on each page please?

2 Likes
2

hey @IIIISEIIII share the URLs of your website plz

3

Hey @IIIISEIIII

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

4

If you’re seeing bottom lines on each page of your Shopify store (like borders or dividers), those are usually added via your theme’s CSS.

Here’s a simple way to remove or hide them:

  1. Go to Online Store > Themes in your Shopify admin.

  2. Click Actions > Edit code next to your current theme.

  3. In the Assets folder, look for your main CSS file—usually named something like theme.css.liquid, styles.css.liquid, or base.css.

  4. Scroll to the bottom of that file and paste this code:

/* Hide bottom lines or borders */
header, footer, section, .page-container, .main-content {
border-bottom: none !important;
box-shadow: none !important;
}

/* Hide horizontal lines if they use

tags */
hr {
display: none !important;
}

  1. Save the changes and refresh your store to see if the lines are gone!
5

Hello there @IIIISEIIII

You can try this code for the bottom line: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (max-width: 750px){
footer.footer.color-background-1.gradient.section-footer-padding {
    border-top: none !important;
}
}

Let me know if you still need help afterwards!