Spacing

Vertical space between options, set in pixels.

A gap that adds empty space between elements. Nothing is displayed, it only creates space.

What customers see

Nothing is displayed. The options above and below it have more space between them.

Settings

Setting	What it does
Height	The gap in pixels. Starts at 10.
Conditional logic	Show or hide the space.
HTML class / Column width	Styling hook and width.

Choosing a height

Height	Reads as
8–12	A small breath between related fields
20–30	A clear break between groups
40+	A deliberate pause — before a final confirmation, or above the add-to-cart area

When to use it

• Give an important field more room. This makes it stand out rather than reading as another item in the list.

• Before a confirmation checkbox. Extra space makes it less likely to be overlooked.

• Balance spacing where a Divider feels too heavy.

• Separate a group after a long list. This keeps the groups from running together.

When not to use it

• In place of a Section. If the fields belong together, group them in a section.

• As a stack of Spacing options. Use one Spacing option with a larger height instead.

• To fix general widget spacing. Use custom CSS so the spacing is applied consistently across the widget.

Examples

Room before a confirmation

30px of spacing between the last engraving field and an "I confirm the spelling" switch.

Separating two groups without a line

24px between the personalization fields and the delivery fields, where a divider would be too strong a separation.

Space that only appears when needed

Conditional logic matching the group below it, so there is no unexplained gap when that group is hidden.

Notes

• Available on all plans.

• Works in Shopify POS.

• Vertical only.

• The height is the same on desktop and mobile, so a large value that looks right on desktop can look like a mistake on a phone. Check the mobile preview.