Learn how to use the Spacer block to add precise vertical and horizontal spacing between blocks — and when to use it instead of the built-in padding on other blocks.
A Spacer is a layout utility block that creates empty space between other blocks within a section. Think of it as an invisible wedge you can slide between any two pieces of content to push them apart by an exact amount.
In the Boardwalk theme, the Spacer block gives you independent control over vertical and horizontal spacing. It is listed under the Layout category in the Theme Editor and can be added to any section that supports blocks. On mobile devices the spacing is automatically reduced to 75% of the desktop value, so your layout stays proportional on smaller screens without any extra work.
Most blocks in Boardwalk include their own padding settings. These add space inside the block — around its content. Increasing a block's padding makes that block taller or wider, but it affects the block itself, not the gap between blocks.
The Spacer block, on the other hand, is a completely separate, content-free block placed between two other blocks. It exists solely to create distance between its neighbors without changing anything about the blocks on either side.
When to use block padding: When you want to add breathing room around a block's own content — for example, adding more space above and below a heading block so its text doesn't feel cramped.
When to use a Spacer: When you need an exact gap between two blocks without altering either block's individual settings — for example, inserting a visual break between a text block and a button block, or nudging a block horizontally within a column.
In short, use padding when you want to adjust how a block looks on its own, and use a Spacer when you want to control the gap between two separate blocks.
Follow these steps to add a Spacer block to any section in the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Use the page
selector dropdown at the top center of the editor to
navigate to the page you want to edit.
In the Theme Editor sidebar, find the section where you want to insert a Spacer. Click on the section name to expand its list of blocks.
Click Add block inside the section and choose Spacer from the Layout category. The block will appear in the sidebar's block list.
Drag the Spacer block in the sidebar to place it between the two blocks where you want extra space. The order of blocks in the sidebar matches the order they appear on your page.
Click the Spacer block to open its settings. Use the Vertical and Horizontal sliders to set the amount of space you need. The preview will update in real time.
Click Save in the Theme Editor. Preview your page to confirm the spacing looks correct on both desktop and mobile.
The Spacer block has two settings, both found under the Padding header when you click on the block in the Theme Editor.
Controls how much vertical (top) space the Spacer adds. Range: 0px to 40px (adjustable in 2px steps). On mobile, this value is automatically scaled down to 75% of the desktop setting.
Controls how much horizontal (left) space the Spacer adds. Range: 0px to 40px (adjustable in 2px steps). On mobile, this value is automatically scaled down to 75% of the desktop setting. This is useful for indenting content within a column or nudging a block away from the left edge.
The Spacer block automatically adjusts its spacing on screens narrower than 750 pixels. Both the vertical and horizontal values are reduced to 75% of the desktop setting. For example, if you set the vertical spacing to 40px on desktop, it will display as 30px on mobile. This happens automatically — there is no separate mobile setting to configure.
Tip: If you need more precise control over mobile spacing, consider using a section's own mobile padding settings instead, since many sections offer separate desktop and mobile padding sliders.