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.
To edit spacing in Shopify, drag a section’s Padding top and Padding bottom sliders in the theme editor. For line height and the space between elements, add CSS to your theme’s stylesheet.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also build Fudge, the AI operator for Shopify stores, with a 4.9 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.
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.
For a full homepage redesign, see how to rebuild your Shopify homepage.
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.
Step 1. Duplicate your theme: go to Online Store > Themes, click the three-dot menu (…) next to your theme, then Duplicate.
Step 2. On the duplicate, click the three-dot menu (…), then 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.
For padding and margin in more detail, see how to change padding and margin in Shopify.
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 space between headings, paragraphs and buttons.
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.
For heading sizes, see how to 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: 749px) { ... } |
For phone layouts, see how to improve mobile spacing in Shopify.
Using Fudge for spacing changes
If you’d rather not write CSS, Fudge, the AI operator for Shopify stores, 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 reads your theme’s code first, so the CSS it writes follows how your theme is built instead of piling overrides on top. It shows you a draft before anything is published.
FAQ
How much vertical space should sections have between them?
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.
Should I use em or rem for spacing in Shopify?
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.
Why is there extra space at the top of my Shopify homepage?
Three usual causes: (1) the first section has Padding top set in the Theme Editor, (2) the announcement bar adds vertical space, or (3) a fixed header with a spacer element reserving its 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.
Should line-height use a unit or be unitless?
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.
Can I use Tailwind-style spacing on Shopify themes?
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.
