How to reduce white space/gap between collections in Debut

Store Design

Topic summary

Goal: Make two homepage collections in Debut appear contiguous by reducing the extra gap between them.

Context: After adding a second collection, the spacing between collections looks larger than the sections above. A preview URL, password, and a screenshot were provided to illustrate the gap.

Proposed fix: Add custom CSS to adjust section padding (remove bottom padding on collection sections and set a specific top padding on the last section). Instructions given to paste the code at the bottom of theme.scss.css via Online Store → Theme → Edit code.

Implementation hurdles:

  • The requester can’t find theme.scss.css, only theme.scss.liquid under Assets, and asks if that’s the correct file.
  • As an alternative, the helper suggests adding the CSS inside a tag in theme.liquid.
  • The requester can’t find any tag in theme.liquid and asks if plan limitations or file location are the issue.

Status: Unresolved. Next step needed is clarifying the correct file/location in Debut for adding the CSS when theme.scss.css isn’t present and no tag is visible.

Summarized with AI on February 12. AI used: gpt-5.
1

Hi,

I cant find the answer to my problem. As I had run out of squares on my 1st collection, I added a 2nd collection. However the space/gap is slightly wider than the rest of the above collection. I would like it to have the same spacing. I want the two collections to look like one, so it just flows. As the 2nd collection seems to sit further down the page. I dont think it looks right. I am happy to follow any code instructions. Thank you

https://simply-inspire-interiors.myshopify.com

P/W - eleupa

Simply1_1-1659603484206.png
Simply1_1-1659603484206.png996×599 269 KB

2

Hi @Simply1

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.scss.css->paste bellow code in bottom of file

.shopify-section index-section{

padding-bottom: unset !important;

}

.index-section:last-child {

padding-top: 18px !important;

}

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

3

Hi Richard

Thank you for getting back so quickly. Just want to amke sure i am doing thid right.

Go to Online Store->Theme->Edit code->theme.scss.css ( i get as far as Edit code then Im unsure where theme.scss.css is ) I can see theme.scss.liquid ( this is under assests ) Sorry Thank you Alison

4

Hi @Simply1

If you can’t find the theme.scss.css file you can also find the theme.liquid file and add the code to the ‘style’ tag.

5

Hi Richard

Thank you for your further email with help. Again I can find theme.liquid file, but there is nothing thats showing as Style tag ? Would it be because I have the basic plan shop ? Or am I looking in the wrong place ? Thank you again for your help Alison