Padding settings

Most sections include a Padding settings group near the bottom of the sidebar. Use it when one section needs more breathing room (or less) than the rest of the page.

Use your store defaults

Section padding starts on Default. That means the section picks up Top padding and Bottom padding from Theme settings > Layout. Set those once for the whole store — see the Layout article.

Give one section its own spacing

1. Open the section in the theme editor.
2. Under Padding settings, set Section padding to Custom.
3. Adjust Top padding and Bottom padding (0–120 px each).

Only that section changes; everything still on Default keeps following your theme setting.

Mobile spacing

There aren't separate mobile padding sliders — on screens 1024px wide and below, the theme automatically uses 70% of your desktop value (rounded to the nearest pixel). So if Top padding is 32px, mobile gets 22px. That applies to both store-wide defaults and Custom section padding.

Tighten spacing on a single section

Set Section padding to Custom and drag both sliders to 0 when you want two sections to sit flush — for example, a banner stacked directly on a featured collection.

Override mobile padding on one section

If 70% isn't right for a specific section, open that section in the theme editor and use the Custom CSS field (at the bottom of the sidebar). Target mobile with a media query, for example:

@media (max-width: 1024px) {  .section__wrapper {    padding-top: 16px;    padding-bottom: 16px;  }}

Shopify scopes custom CSS to the section you're editing, so this won't affect other sections. For more on writing section CSS, see Custom CSS.

Other settings

Padding is separate from Section height (used on image-heavy sections like Banner and Slideshow) and from Content width — see Width settings and Section height.