how to remove some space in collection page?

Store Design
, , , , , , , , , , , , , ,

Topic summary

A user seeks to reduce the spacing between the collection title and product grid on their Shopify store’s collection page.

Two solutions provided:

  1. theme.liquid modification - Add custom CSS code above the </body> tag in the theme.liquid file

  2. CSS file edit - Insert the following code at the bottom of main.css (or base.css/style.css/theme.css):

.collection-header {
  margin-bottom: 0 !important;
}

Both approaches use CSS to eliminate the bottom margin of the collection header element. The discussion includes screenshots showing the before/after results, demonstrating successful spacing reduction. No clear resolution is marked yet.

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

how to remove some space between collection title & products?
URL: https://a6b804-0a.myshopify.com/collections/backpacks

Screenshot 2024-09-05 004639.png
Screenshot 2024-09-05 004639.png1892×903 179 KB

1 Like
2

Hey @Emiway

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-1725477820267.png
Moeed_0-1725477820267.png1796×910 144 KB

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

Best Regards,
Moeed

3

Hi @Emiway

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.collection-header {
    margin-bottom: 0 !important;
}

And Save.

result:

Made4uoRibe_0-1725478047434.png
Made4uoRibe_0-1725478047434.png1790×398 112 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!