How to Edit Spacing in Shopify (2026)

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.

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.

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.

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

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.