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.

To change padding in Shopify, open a section in the theme editor and drag its Padding top and Padding bottom sliders. For margins, or sections without sliders, add CSS.

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.

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.

To describe spacing changes instead of setting them by hand, see the Fudge store editor.

Method 2 - Change padding and margin with CSS

Step 1. Duplicate your theme first: 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 the main stylesheet - the largest .css file in the Assets folder).

Step 4. Add your CSS rules at the bottom:

/* Add padding inside the page's sections */
main .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.

A plain .shopify-section selector also matches the header, footer and announcement bar. In Dawn and most current themes, those sit outside the <main> element, so main .shopify-section only changes the page’s own sections.

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 */
main .shopify-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

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

For more mobile fixes, see how to improve mobile spacing in Shopify.

Common scenarios

For line height and the space between lines of text, see how to edit spacing in Shopify.

Using Fudge for padding and margin changes

Fudge, the AI operator for Shopify stores, applies CSS changes you describe in 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 CSS into your theme as a draft. You check the spacing on desktop and mobile in the preview and publish when it looks right. If it doesn’t, you can roll the change back from its history.

FAQ