Sometimes the difference between a page that feels “fine” and one that feels polished comes down to spacing.

You can now control the padding (empty space) above and below each section directly inside the Page Builder — no custom CSS required.

Let’s walk through how it works.

Section spacing controls the amount of space:

This spacing helps create visual separation between content blocks and improves readability across desktop, tablet, and mobile.

Think of it as breathing room for your content.

We will cover:

This opens the spacing control modal.

After making adjustments, be sure to click Save Page.

At the top of the spacing modal, you’ll see three options:

You can set different spacing values for each device type.

This allows you to create a layout that feels spacious on desktop but more compact on mobile.

Example:

You’ll see a chain icon in the modal.

When to keep it linked:

When to unlink it:

There are two sliders:

You can set values between 0–100px.

Common spacing values:

If your product grid feels cramped:

Result: Cleaner, more premium feel.

If there’s too much space between your hero and the next section:

Result: Seamless transition into the next section.

Mobile screens are smaller — too much spacing forces extra scrolling.

A good rule:

Mobile padding = about 50% of desktop padding

Example:

Always preview your page after adjusting.

Most sections start with theme defaults such as:

If sliders show 0 but spacing still exists, the theme’s default styling may be applying padding. Adjust the slider to override it.

Spacing is subtle — but when done right, it dramatically improves the perceived quality of your site.

Spacing isn’t showing on the storefront

Spacing looks different on a real phone

Small spacing changes can make a big impact.

Use it intentionally.