How to Change Padding and Margin in Shopify (2026)

Key takeaways

• Some themes expose padding sliders in section settings inside the Theme Editor.
• For full control over padding and margin, you need CSS in your theme’s assets folder.
• Padding is space inside an element; margin is space outside an element.
• Always duplicate your theme before editing CSS files.
• Fudge can write and apply CSS spacing changes from a plain English description.

Padding and margin control how elements breathe. The Theme Editor gives you basic padding controls on some sections. For anything more specific, you’ll need CSS. Here’s a clear walkthrough of 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.

Padding vs. margin - a quick explanation

These two properties are easy to confuse.

Padding is the space inside an element, between the element’s content and its border. Increasing a section’s padding pushes the content inward - away from the section’s edges.

Margin is the space outside an element, between the element and its neighbors. Increasing a section’s margin pushes it away from adjacent sections or elements.

For visual gaps between page sections, padding is usually what you want. For gaps between individual elements like paragraphs, headings, and buttons, margin is what you want.

Method 1 - Change section padding in the Theme Editor

Modern Shopify themes often include padding sliders at the bottom of section settings.

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 panel. Look for Padding top and Padding bottom sliders.

Step 4. Drag the sliders to your desired value. The preview updates in real time.

Step 5. Click Save.

This is the quickest option - no code required. If the sliders aren’t there, your theme doesn’t expose padding controls for that section, and you’ll need Method 2.

Method 2 - Change padding and margin with CSS

Step 1. Duplicate your theme first: Online Store > Themes > Actions > Duplicate.

Step 2. On your active theme, go to Actions > Edit code.

Step 3. Open Assets > base.css (or the main stylesheet - the largest .css file in the Assets folder).

Step 4. Add your CSS rules at the bottom:

/* Add padding inside a section */
.shopify-section { padding-top: 60px; padding-bottom: 60px; }

/* Add margin below headings */
h2 { margin-bottom: 1.5rem; }

/* Tighten space between paragraph and button */
.button { margin-top: 1rem; }

Step 5. Click Save.

CSS padding shorthand

/* All four sides: top right bottom left */
.element { padding: 40px 20px 40px 20px; }

/* Top/bottom | Left/right */
.element { padding: 40px 20px; }

/* All sides equal */
.element { padding: 40px; }

The same shorthand works for margin.

Finding the right CSS selector

Right-click the element you want to adjust in your browser and choose Inspect. Look at the class names on the element in the HTML panel - those are your CSS selectors.

Responsive padding for mobile

Padding that looks right on desktop often feels too large on mobile. Use a media query to reduce it on small screens:

/* Desktop padding */
.shopify-section { padding-top: 80px; padding-bottom: 80px; }

/* Mobile padding */
@media (max-width: 768px) {
  .shopify-section { padding-top: 40px; padding-bottom: 40px; }
}

Common scenarios

Using Fudge for padding and margin changes

Fudge can apply CSS changes from plain English. You don’t need to find the right file, identify the selector, or write the CSS yourself.

“Increase the top and bottom padding on all homepage sections to 80px on desktop, 40px on mobile.”

“Add more space below H2 headings across the site.”

Fudge writes the code, applies it as a draft, and you review before publishing.