Key takeaways
- Section padding (space above/below a section) is often adjustable in Theme Editor section settings.
- Line spacing (line-height) and element margins require CSS in your theme’s assets folder.
- Duplicate your theme before editing CSS files.
- Fudge can make precise spacing changes from a plain English description.
Spacing in Shopify breaks into two categories: section-level padding (which the Theme Editor often controls) and fine-grained spacing like line height and element margins (which need CSS). Here’s how to handle both.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 rating on the Shopify App Store.
Method 1 - Adjust section spacing in the Theme Editor
Many Shopify themes expose padding controls at the section level. This lets you add or remove space above and below individual sections.
Related: Fudge Store Editor.
Related: Rebuild Your Shopify Homepage.
Step 1. Go to Online Store > Themes > Customize.
Step 2. Click a section in the left sidebar to open its settings.
Step 3. Scroll to the bottom of the section settings panel. Look for Padding top and Padding bottom sliders (sometimes labeled “Top spacing” and “Bottom spacing”).
Step 4. Drag the sliders to adjust the space. The preview updates live.
Step 5. Click Save.
Not all themes have these sliders. The Dawn theme includes them on most sections. Older themes often don’t.
Method 2 - Change line spacing (line-height) with CSS
Line spacing - the vertical gap between lines of text within a paragraph - is controlled by the CSS line-height property. The Theme Editor doesn’t expose this directly.
For more detail, see our guide on change padding and margin in shopify.
Related: Improve Mobile Spacing in Shopify.
Step 1. Duplicate your theme: Online Store > Themes > Actions > Duplicate.
Step 2. On your active theme, go to Actions > Edit code.
Step 3. Open Assets > base.css (or your theme’s main stylesheet).
Step 4. Add CSS at the bottom of the file:
/* Increase line spacing for body text */
body { line-height: 1.8; }
/* Increase line spacing for paragraphs only */
p { line-height: 1.7; }Step 5. Click Save.
line-height values: A unitless value like 1.8 means 1.8 times the font size. Most body text reads well at 1.5 to 1.8.
Method 3 - Adjust spacing between elements with CSS
Margin is the space outside an element - the gap between one element and the next. Increasing margin adds breathing room between sections, headings, and paragraphs.
Step 1. Follow the same steps as Method 2 - duplicate theme, open code editor, find base.css.
Step 2. Add margin rules:
/* Add space below headings */
h2 { margin-bottom: 1rem; }
/* Add space between paragraphs */
p { margin-bottom: 1rem; }
/* Increase space below a section's content wrapper */
.section-content { margin-bottom: 3rem; }Step 3. Save.
Finding the right selector
Right-click the element you want to space out in your browser, choose Inspect, and read the class names in the HTML. Use those as your CSS selectors.
Related: Change Heading Font Size in Shopify.
Spacing between sections vs. spacing within sections
This distinction matters:
- Between sections - controlled by each section’s top/bottom padding. Use Theme Editor sliders if available, or CSS on the section wrapper.
- Within sections - space between a heading and a paragraph, between list items, between a button and the text above it. These require CSS targeting the specific inner elements.
Common spacing fixes
| Problem | Fix |
|---|---|
| Sections feel too crammed together | Theme Editor > section > increase Padding top/bottom |
| Text feels too dense | CSS: p { line-height: 1.7; } |
| Headings too close to content below | CSS: h2 { margin-bottom: 1rem; } |
| Too much space above the first section | Theme Editor > section > reduce Padding top |
| Mobile spacing looks wrong | CSS with media query: @media (max-width: 768px) { ... } |
Using Fudge for spacing changes
If you’d rather not write CSS, Fudge can apply spacing changes precisely. Describe what you want:
“Increase the line height of body text to 1.8.”
“Add more space between the product title and the price on product pages.”
“Reduce the top padding on the homepage hero section.”
Fudge writes the code and shows you a draft before anything is published.
FAQ
Common starting points: 60–100px on desktop (top and bottom padding combined), 30–50px on mobile. Adjust by section role — a hero needs more breathing room than a product grid. Consistent vertical rhythm across sections looks more deliberate than arbitrary spacing per section.
rem for most cases — it scales with the root font size, making global spacing adjustments simple. Use em for spacing that should scale with the local font size (e.g., margin around large headings that should feel proportional to the heading itself). Avoid px for padding/margin if you want responsive scaling.
Three usual causes: (1) the first section has Padding top set in the Theme Editor, (2) the announcement bar adds vertical space, or (3) the header has position: sticky reserving height. Inspect with browser DevTools to identify which element is pushing content down — or describe what you see to Fudge ("there's extra whitespace at the top of the homepage; remove it") and it diagnoses and fixes the source rather than papering over it with negative margin.
Unitless. line-height: 1.6 scales with the element's font-size; line-height: 24px doesn't. Unitless values inherit predictably to children with different font sizes. Use 1.4–1.6 for headings, 1.5–1.8 for body text. Tighter line-height for display text; looser for long-form reading.
Yes — but you'd add Tailwind to the theme manually (most Shopify themes don't include it). For most stores, this is overkill. Add a small spacing utility class set if you want consistent values (e.g., .mt-8 { margin-top: 2rem; }) without the full Tailwind build. For new builds, Tailwind via Shopify's Hydrogen makes more sense than retrofitting.
