Remove or adjust the empty space under the Collection Description

[kyle6661]

Hello

How can I narrow the space between Collection description and product grids in Dawn theme?

Feels the gap’s to big and tried everything I can find online; Couldn’t resolve the issue.

[mattsalsa]

Hey Kyle,

That space between the collection description and the product grid in the Dawn theme is usually controlled by top or bottom margin in the section styling — but it’s not always easy to spot.

Here’s a quick fix you can try:

1. Go to Online Store > Themes > Edit code
2. Open the file:
   sections/main-collection-product-grid.liquid
3. Look for this section or something similar near the top:

4. Go to Assets > base.css and add this at the bottom: .collection__description { margin-bottom: 1rem; **Adjust this value as needed** } You can drop it as low as 0rem or try 0.5rem to tighten the gap without making it look too cramped.

Let me know if that works!

[LitExtension]

Hi @kyle6661 , what you need to do is adjust the CSS, specifically the margin of the “Collection description” or “Product grids” block.

• For “Collection description,” you need to adjust the margin-bottom.
• For the “Product grids” block, you need to adjust the margin-top to meet your needs.

You can use Chrome DevTools first to see how many pixels you need to adjust. Without a website link, we can’t check for you. (According to your image, a 10px change should be fine.)

You can refer to how to add custom CSS to a Shopify theme in many tutorials online to be able to do it properly. Or refer to How to add custom CSS to your theme from the Shopify Official guide.

That’s all. If this solved your problem, please like and mark Solved.

[GloboApps-Felix]

Hi @kyle6661 ,

To reduce the space between the collection description and product grids in the Dawn theme, please try these 2 simple steps:

Step 1: Go to Customize in your Shopify admin, then find and select the Product grid section.

Step 2: In the sidebar settings, look for the Padding top option. Reduce this value to decrease the gap, then save your changes and check your store.

Let me know if that helps or if you need further assistance!

Best,
Felix

[GloboApps-Felix]

Hi @kyle6661 ,

To reduce the space between the collection description and product grids in the Dawn theme, please try these 2 simple steps:

Step 1: Go to Customize in your Shopify admin, then find and select the Product grid section.

Step 2: In the sidebar settings, look for the Padding top option. Reduce this value to decrease the gap, then save your changes and check your store.

Let me know if that helps or if you need further assistance!

Best,
Felix

[GTLOfficial]

Please provide the Url and password of your website

[usmanimar]

you’ll need to apply a bit of custom CSS

follow these steps

Online Store → Themes → Dawn → Customize

click on edit code

find this Sections/collection-template.liquid

Look for the collection description and product grid layout. It usually looks something like this:

{{ collection.description }}

Right after this, there’s usually a grid or product-grid div.To control spacing, you’ll use CSS. Go to:

• Assets/base.css (or sometimes component-collection.css or theme.css, depending on the version of Dawn)

• Scroll to the bottom and add this custom CSS:.collection__description + .product-grid {
  margin-top: 1rem; /* Reduce this value as needed */

• If .collection__description class doesn’t exist, try this .collection-hero__description + .product-grid {
  margin-top: 1rem;

• Save the changes.

[GloboApps-Felix]

Hi @kyle6661 ,

To reduce the space between the collection description and product grids in the Dawn theme, please try these 2 simple steps:

Step 1: Go to Customize in your Shopify admin, then find and select the Product grid section.

Step 2: In the sidebar settings, look for the Padding top option. Reduce this value to decrease the gap (Please see the example image here: [link]), then save your changes and check your store.

Let me know if that helps or if you need further assistance!

Best,
Felix

[WebDeskSolution]

Hello @kyle6661

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify admin panel.
• Click on Online Store > Themes.
• Find the theme you want to edit, and then click Actions > Customize.
• Then go to collection page: Screenshot by Lightshot
  Click on the Product grid inside that there is a Section padding
  Adjust Top padding as needed: https://prnt.sc/xL8JbTK4t7C-
• then save your changes.

Output :

Screenshot

If you still need to reduce space. So please share your store URL and Password.

Please hit Like and Mark it as a Solution if you find our reply helpful.

[kyle6661]

Thanks Felix

It works! I tried everything I can find on internet but none of them works. You way is easier and good solution for me. Thanks!

[kyle6661]

Thats the best solution!

[WebDeskSolution]

Hello @kyle6661

That’s great to hear—thanks for the update.