Removing extra space from beneath Collection Banner

Technical Q&A

Topic summary

A user seeks to reduce the vertical spacing between a collection banner and the product grid on both desktop and mobile views. An image illustrates the gap they want to eliminate.

Solutions Provided:

Two community members offered CSS-based fixes:

  • Solution 1: Apply negative top margin (margin-top: -5rem) to form#FacetSortForm for screens 768px and wider. Insert this CSS in theme.liquid within <style> tags before the <body> tag.

  • Solution 2: Add custom CSS targeting .collection-hero with margin-bottom: 0 !important and padding-bottom: 0 !important. Place this code in theme.liquid just above the closing </body> tag.

Both solutions include step-by-step instructions for editing the theme files and provide before/after screenshots demonstrating the reduced spacing.

Status: The issue remains unresolved as the original poster has not confirmed which solution worked.

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

Hi there,

I’m trying to remove the space between the Collection banner and the Product grid for both desktop & mobile, see below:

AlexMcGann_0-1743183946782.png
AlexMcGann_0-1743183946782.png1613×705 172 KB

Red arrow indicating where I would like the text to be

Would anyone be able to recommend how I might go about this with CSS?

Thanks

https://1tdbwm-j9.myshopify.com/collections/long-sleeve

1 Like
2 
@media screen and (min-width: 768px) {
form#FacetSortForm {
    margin-top: -5rem;
 }
}

AmazingGuy_0-1743184252071.png
AmazingGuy_0-1743184252071.png1401×470 258 KB

hey @AlexMcGann follow the steps

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

3

Hey @AlexMcGann

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-1743184358694.png
Moeed_0-1743184358694.png1264×911 193 KB

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

Best Regards,
Moeed