Section padding settings

Featured links

1. Company XYZ documentation on section padding settings
2. Shopify documentation on sections and blocks
3. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use these settings to control the space above and below a section’s content. They help you fine-tune how open, compact, or connected each part of a page feels across different screen sizes. For a broader overview of section-based layout, see Shopify documentation on sections and blocks

Padding settings

This group gives you separate top and bottom padding controls for desktop and mobile. That makes it easier to create consistent vertical rhythm without forcing the same spacing on every device.

On larger screens, padding has a strong effect on how polished and spacious a layout feels. More space can help featured content stand out, while tighter spacing can keep product- or information-heavy pages moving efficiently.

On smaller screens, spacing often needs to be reduced. A value that feels balanced on desktop can look oversized on mobile, especially near the top of a page where extra padding pushes important content further down.

For more guidance on how these controls behave, see section padding or the Shopify documentation on the theme editor

Tip

Adjust padding while viewing the sections above and below the one you are editing. Spacing decisions are easier to judge in context than on a single section by itself.

Balancing top and bottom spacing

Top and bottom padding do not need to match. Different values can create smoother transitions between content areas and help a section feel more naturally connected to what comes before or after it.

For example, extra top padding can give a new content area more presence, while reduced bottom padding can visually pull the next area closer. This is especially useful when combining banners, text sections, collections, or image-led content.

If two neighboring sections both use generous padding, the gap between them can feel much larger than expected. When spacing looks too loose, reduce one side first before changing both sections.

Desktop and mobile spacing strategy

Separate desktop and mobile controls let you keep a spacious layout on larger screens while making smaller screens easier to scan. In most cases, it is best to set desktop spacing first, then refine mobile values only where the layout feels too tall or too compressed.

Zero padding can be useful when you want neighboring areas to feel visually connected. Use it carefully, though, because removing too much space can make content feel crowded or reduce contrast between different content types.

Usage notes

1. Match spacing to content. Use larger padding for feature content and smaller padding for denser, task-focused areas.
2. Check sections together. Review spacing with neighboring content so the full page feels balanced instead of uneven.
3. Refine mobile independently. Reduce mobile padding when content appears too far down the screen or the page feels overly stretched.
4. Use uneven spacing on purpose. Different top and bottom values can create better transitions than perfectly matched spacing.
5. Watch for stacked gaps. Large padding on adjacent sections can create unnecessary empty space even when each section looks fine on its own.
6. Preview both viewports. Desktop and mobile spacing can feel noticeably different, so check the section in both sizes before you finish.