How do I reduce the space between these two secitons

Technical Q&A
, ,

Topic summary

Goal: reduce excessive bottom spacing under the product section on a Shopify store.

What was tried:

  • Method 1: Edit theme.liquid and insert custom code above the tag. A result screenshot was shared, but the exact code content wasn’t shown in the thread.
  • Question arose whether this could be done via the theme’s Custom CSS. The original helper said part of their approach wouldn’t work in Custom CSS and advised sticking to theme.liquid edits.

Alternative solution:

  • Another contributor provided a purely CSS-based approach that can be added under Theme Settings > Custom CSS. It uses a mobile-focused media query and :has() selectors to set margin-top to 0 for the section following the product section and to remove bottom padding on the product page content. A result screenshot link was provided.

Status and notes:

  • Two viable paths: edit theme.liquid or use Custom CSS with advanced selectors. There’s a minor disagreement on feasibility in Custom CSS; the alternative shows it can work with adjusted CSS.
  • No final confirmation from the original poster; resolution remains open. Code snippets and screenshots are central to the discussion.
Summarized with AI on December 12. AI used: gpt-5.
1

Hello, I’m trying to reduce the space between the product section bottom padding, it is too large. My store url is https://03nkpv-tm.myshopify.com/ Thank you in advance for your help.

CameronO_0-1733743460349.png
CameronO_0-1733743460349.png1308×762 122 KB

1 Like
2

Hey @CameronO

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-1733743930713.png
Moeed_0-1733743930713.png338×744 65.4 KB

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

Best Regards,
Moeed

1 Like
3

Thank you so much, is there a way to add this to the custom css section?

1 Like
4

One part of the code that I provided won’t work in the custom css section so just simply follow the steps which I mentioned and then it should be good to go.

Best Regards,

Moeed

1 Like
5

Hi @CameronO

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
div.shopify-section:has(.product-section) + div {
    margin-top: 0 !important;
}
div.shopify-section:has(.product-section)  .page-content.page-content--product {
    padding-bottom: 0 !important;
}
}

Here is the result: https://prnt.sc/jSPVpYmPMhdR

I hope this helps

Best,

Daisy

1 Like