How to reduce the spacing between sections?

Store Design
,

Topic summary

A user seeks to reduce excessive spacing between sections on their Shopify store page (Spark theme), as no built-in customization option exists.

Solutions Provided:

  • Collection-specific fix: Add CSS targeting .collection-list sections in theme.scss.liquid (worked only for collection lists, not all sections)
  • Page-specific solution (PageFly-Kate): Insert CSS in theme.css targeting specific section IDs with custom margin values (marked as “Perfect” by original poster)
  • Global solution (GemPages): Add code snippet to theme.liquid before </body> tag (worked but reduced spacing too much; adjusting margin values didn’t produce visible changes)

Key Outcomes:

  • The PageFly solution successfully addressed the user’s need for page-specific spacing control
  • User inquired about applying the same method to other pages by modifying section template numbers
  • One commenter noted that adjusting pixel values (e.g., 30px to 10px or 0px) controls gap size
  • At least one other user reported the same issue with none of the solutions working for them, indicating the problem may be theme-dependent
Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
5

@oscprofessional

I could only see the difference using this code when it came to Collections List on my Home Page and other pages which contain that section.

Unfortunately, I am looking for a code that will reduce spacing between all sections and not just one type. As the page I needed it for which is in the screenshot - did not change. I am also only really looking to have it applied to this page only.

1 Like