How can I add more space between footer and collection on a desktop site?

Store Design
, ,

Topic summary

A Shopify store owner seeks to add 50-100px of white space between the footer and collection content on desktop only.

Multiple developers provided CSS solutions with similar approaches:

Implementation steps:

  • Navigate to Online Store → Themes → Edit Code
  • Add CSS to theme.css, theme.liquid (before </body>), or custom CSS section

Common CSS solutions offered:

  • Target .template-collection .site-footer or #shopify-section-footer
  • Add margin-top or padding-top of 50-100px
  • Wrap in media query @media screen and (min-width: 768px) for desktop-only application
  • Use !important flag to ensure override

Several respondents included screenshots demonstrating the expected result. The discussion remains open with no confirmation from the original poster about which solution was implemented or successful.

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

Hi> > im looking to add more white space maybe 50-100px between the footer start on the collection page for desktop only. My site is https://luxurymrkt.com> >

80172761-4C3A-4095-9E3C-7455A5F58C94.jpeg
80172761-4C3A-4095-9E3C-7455A5F58C94.jpeg2100×1576 313 KB

2

Hey Mike,

Following CSS snippet should do the trick:

@media screen and (min-width: 768px) {
body.template-collection .grid{
margin-bottom: 50px !important;
}
}

You can read this article to learn how to add custom CSS to Shopify.

Thanks

3

@Luxurymrkt - please add this css to the end of your theme.css file and check

@media screen and (min-width:769px){
#shopify-section-footer{padding-top: 60px;}
}
4

Hi @Luxurymrkt , This is Richard from PageFly - Landing page builder.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyRichard_0-1682386965271.png
PageFlyRichard_0-1682386965271.png1600×794 139 KB

PageFlyRichard_1-1682386965279.png
PageFlyRichard_1-1682386965279.png1600×777 197 KB

I hope it would help you Best regards,

Richard | PageFly

5

Hi @Luxurymrkt , you can do that by following this instruction

Go to store admin > Sale channels > Online store > Themes > Edit code > Assets > open theme.css or theme.css.liquid file, add this CSS code at the bottom

.template-collection .site-footer { margin-top: 80px; padding-top: 80px !important; }

This is the result

Screenshot 2023-04-25 at 08.51.40.png
Screenshot 2023-04-25 at 08.51.40.png1547×725 87 KB

6

Hi @Luxurymrkt

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:

@media only screen and (min-width: 769px){

.template-collection .site-footer {margin-top: 60px;}

}

Regards,

San

7

Hello @Luxurymrkt

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

div#shopify-section-footer {
    padding-top: 80px !important;
}
.shopify-section footer.site-footer {
    padding-top: 100px !important;
}