Remove White Bar Shoplight Theme

Store Design

Topic summary

A user is trying to remove an unwanted white bar appearing between the header and product section on their Shopify store (laser-craftworks.com) using the Shoplight theme.

Solution Provided:

  • Navigate to Online Store → Theme → Edit Code
  • Locate the CSS file (base.css, theme.css, style.css, main.css, or custom.css)
  • Add custom CSS code targeting the featured collection section with negative margin and padding adjustments

Code snippet includes:

  • margin-top: -25px !important; for the featured collection section
  • padding-top: 25px !important; for the color scheme gradient element

Status: Resolved. The original poster confirmed the solution worked successfully.

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

I am trying to remove the white bar from between my header and products, but not sure why I can’t get rid of it.

laser-craftworks.com is my website. Thank you for any input/suggestions!

Margaret

2

Hi @LaserCraftWorks ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

section#shopify-section-template--21987458646298__featured_collection {
    margin-top: -25px !important;
}

.color-scheme-78dceee7-b498-4248-b0b7-4c526a2a29b3.isolate.gradient {
    padding-top: 25px !important;
}

CodingFifty_0-1742238644063.png
CodingFifty_0-1742238644063.png1543×741 223 KB

1 Like
3

Thank you so much!

1 Like
4

If you need any assistance, I will help you. @LaserCraftWorks