Padding settings

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings

4. https://help.shopify.com/en/manual/online-store/themes/customizing-themes

5. https://help.shopify.com/en/manual/online-store/themes/features-list

6. https://help.shopify.com/en/manual/online-store/themes/unlicensed-themes

Reference videos

1. Online store — The official Shopify guide

Overview

The Padding settings group manages the vertical space above and below content areas throughout your storefront. Setting these values globally ensures a balanced and visually appealing layout on all devices. These settings provide the default spacing for your site, but you can override them on specific sections or blocks as needed.

Thoughtful use of Padding settings helps your storefront maintain visual cohesion, streamlines whitespace management, and supports consistently clear separation between sections. This group is fundamental to keeping your content organized as your storefront grows.

⚠️ Important: Consistent padding enhances visual flow and supports accessibility, creating a more comfortable and welcoming experience for all visitors.

Padding settings

The Padding settings group gives you dedicated controls for desktop and mobile devices. This distinction allows you to fine-tune vertical whitespace for different device experiences and optimize how your content appears in all browsing contexts.

Padding top (desktop)

This setting defines the vertical space above content areas on desktop screens. Adjusting this value helps create an open, spacious design or a more compact layout.

1. Value range is 0 to 120 px, in 4 px increments.

2. Default value is 32 px.

Padding bottom (desktop)

This setting determines the space below content sections on desktop devices, ensuring clear separation between stacked sections.

1. Value range is 0 to 120 px, in 4 px increments.

2. Default value is 32 px.

Padding top (mobile)

This control adjusts the padding above sections when viewed on mobile devices. Using a distinct value here helps optimize the use of limited vertical space and improves mobile readability.

1. Value range is 0 to 120 px, in 4 px increments.

2. Default value is 16 px.

Padding bottom (mobile)

This setting manages the space below content areas on mobile. Adjusting this value supports user-friendly, touch-optimized layouts on smaller screens.

1. Value range is 0 to 120 px, in 4 px increments.

2. Default value is 16 px.

💡 Tip: Separate desktop and mobile controls allow you to address real-world design needs, such as more generous padding for a desktop banner or reduced space on mobile for a tighter layout. The right balance depends on your content and layout goals.

Usage notes

Global Padding settings help you quickly establish and maintain vertical spacing across your entire storefront, reducing the need for repetitive, section-by-section adjustments. Tuning these defaults makes your shop easier to browse and ensures all content remains readable on any device.

Dedicated controls for desktop and mobile align with best practices in responsive design, letting your visual presentation adapt seamlessly. Properly set vertical spacing enhances comfortable navigation, clarity, and a tidy appearance.

Changing padding does not impact page load or performance, but it does have a significant effect on how polished, clean, and accessible your storefront feels.

📝 Note: It is always a good idea to preview your storefront on both desktop and mobile after changing Padding settings. Small adjustments can quickly improve clarity, navigation, and overall appearance.