This procedure is intended for Page Designer administrators who need to create intentional spacing between components and sections of a page.

Horizontal Spacing is a layout utility rather than a content component. It should be used to manage the visual separation between Page Designer components without introducing artificial spacing inside the content itself.

Component Objective

The Horizontal Spacing Component creates additional space between Page Designer components.

It can be used to:

• Give related components additional breathing room
• Improve the rhythm and readability of a page
• Separate different ideas or sections
• Prevent components from appearing visually crowded
• Create different spacing treatments for desktop and mobile

The component contains no visitor-facing text, image or CTA.

Its only purpose is to control spacing.

Placement and Compatibility

Horizontal Spacing can be used almost anywhere that additional separation between components is required.

Most nested Page Designer structures accept Horizontal Spacing.

However, not every nested component or structure necessarily supports it.

If a particular location does not accept the component, use the available Page Designer structure rather than attempting to recreate the spacing through artificial text formatting.

Responsive Configuration

Horizontal Spacing provides two separate required settings:

• Mobile Spacing Class
• Desktop Spacing Class

This allows administrators to control spacing independently according to the device.

The spacing selected for desktop does not need to be identical to the spacing selected for mobile.

This is particularly important because large spaces can become much more visually dramatic on smaller mobile screens.

Available Spacing Classes

The available spacing options are:

• Small
• Medium
• Large
• Extra Large

Although all four options are available, they are not equally recommended for everyday Page Designer usage.

Recommended Spacing Logic

Medium: Components Belonging to the Same Idea

Medium should be the preferred spacing when the surrounding components belong to the same general idea, chapter or content flow.

For example, use Medium when several components work together to tell the same story but need some additional breathing room between them.

Think of Medium as:

Same idea → some breathing room → continue the same idea

For most spacing requirements within a related group of content, Medium is the go-to option.

Large: Moving From One Idea to Another

Use Large when the spacing needs to communicate a clearer transition between different ideas or sections.

Think of Large as:

End of one idea → stronger visual separation → beginning of another idea

Large provides enough separation to help visitors understand that the page is transitioning into another section without creating an unnecessarily excessive gap.

Small: Generally Not Recommended

Small is technically available.

However, the resulting difference is so small that it provides little practical value when the objective is to create meaningful separation between components.

For this reason, Small is generally not recommended.

Extra Large: Generally Not Recommended

Extra Large is also technically available, but it creates a very significant amount of empty space.

There are few practical scenarios where such a large separation is necessary.

The effect can become particularly excessive on mobile.

For this reason, Extra Large should generally be avoided unless there is a very specific and justified design requirement.

Recommended Decision Model

As a general rule:

Content relationship	Recommended spacing
Components belong to the same idea, chapter or flow	Medium
Moving from one idea or section to another	Large
Very subtle separation	Small available, but generally not recommended
Very large separation	Extra Large available, but generally not recommended

The objective is not to create the largest possible amount of whitespace.

The objective is to create a clear and consistent visual rhythm throughout the page.

Horizontal Spacing vs. Empty Lines in Text Components

This is an important Page Designer best practice.

Use the Horizontal Spacing Component to create space between components. Do not add empty lines or repeated line breaks inside a text component to manufacture spacing.

For example, do not open a Textbox or Textbox Plus and add blank lines simply because additional space is required before the next component.

The text component should contain the content.

Horizontal Spacing should control the space between components.

The recommended structure is:

Content Component

↓

Horizontal Spacing

↓

Next Content Component

rather than:

Content Component + several empty lines

↓

Next Content Component

Why Dedicated Spacing Should Be Used

Using Horizontal Spacing keeps content and page layout separate.

Text Components Should Contain Content

Textbox and Textbox Plus should be used for actual textual content.

Blank lines should not be used as a substitute for page-layout controls.

Spacing Should Be Intentional

Horizontal Spacing makes it clear that the gap between two components is deliberate.

When another administrator later reviews the page structure, the reason for the spacing is easier to understand.

Desktop and Mobile Can Be Managed Separately

Horizontal Spacing provides separate:

• Mobile Spacing Class
• Desktop Spacing Class

Artificial spacing created through blank lines inside text content does not provide this dedicated responsive control.

Versatility

Horizontal Spacing is one of the most general-purpose Page Designer utility components.

It is not tied to a particular content type.

It can be used between many different combinations of components whenever additional separation is required.

Its usefulness comes from its simplicity.

It does not create content. It improves the relationship between existing content components.

Pairing With Other Components

Horizontal Spacing is designed to be paired with other components.

Unlike components such as Header Banner, Crossroads or FAQ Section, Horizontal Spacing has no meaningful standalone visitor-facing purpose.

Its purpose exists entirely in relation to the components positioned around it.

It can therefore be paired with virtually any compatible Page Designer component that requires additional visual separation.

Do Not Use Empty Text Lines to Create Spacing

Do not create visual spacing by adding blank lines or repeated line breaks inside Textbox, Textbox Plus or another text field.

Use Horizontal Spacing instead.

Small Is Generally Too Subtle

Small spacing is available but generally provides too little visual difference to be useful.

Medium should normally be preferred when related components simply need breathing room.

Extra Large Is Generally Excessive

Extra Large creates a substantial amount of empty space and is generally not recommended.

Be particularly cautious on mobile, where the resulting gap can feel significantly larger.

Mobile Spacing Requires Particular Attention

Do not configure spacing based exclusively on the desktop presentation.

Whitespace can feel much more dramatic on a smaller mobile viewport.

Always consider and validate the Mobile Spacing Class independently.

Not Every Nested Structure Necessarily Accepts Horizontal Spacing

Horizontal Spacing can be used in most relevant Page Designer structures, but some nested components may not accept it.

Do not assume universal compatibility.

More Space Is Not Automatically Better

Whitespace should support the structure of the page.

Use Medium and Large deliberately according to the relationship between the surrounding content rather than systematically adding large gaps throughout the page.

1. Identify Where Additional Space Is Required

Review the relationship between the surrounding Page Designer components.

Determine whether additional breathing room is actually required.

Do not add spacing automatically between every component.

2. Determine the Relationship Between the Components

Ask whether the components on either side of the intended spacing belong to:

• The same idea or chapter
• Different ideas or sections

This distinction should guide the spacing selection.

3. Use Medium for Related Content

If the components belong to the same idea, chapter, story or content flow, use Medium as the preferred starting point.

Think:

Same idea = Medium

This provides breathing room while preserving the visual relationship between the components.

4. Use Large for a Change of Idea

If the spacing marks a transition from one idea or section to another, use Large.

Think:

New idea = Large

This creates a clearer visual break between the two sections.

5. Avoid Small Unless There Is a Specific Reason

Small is available but generally creates too little difference to provide meaningful separation.

Prefer Medium for normal spacing requirements.

6. Avoid Extra Large Unless There Is a Specific Reason

Extra Large creates a very significant gap.

It should not be the default method for separating sections.

Prefer Large when a stronger section break is required.

7. Add the Horizontal Spacing Component

Locate Horizontal Spacing in the Page Designer component list.

Drag and drop it between the components that require separation.

If the intended nested structure does not accept Horizontal Spacing, do not recreate the gap using empty lines inside a text component.

8. Configure Mobile Spacing Class

Locate the required Mobile Spacing Class field.

Select the appropriate spacing option:

• Small
• Medium
• Large
• Extra Large

Use the recommended logic as the starting point:

Related content → Medium

Different ideas → Large

Be particularly cautious with larger spacing options on mobile.

9. Configure Desktop Spacing Class

Locate the required Desktop Spacing Class field.

Select:

• Small
• Medium
• Large
• Extra Large

Again, use the relationship between the surrounding components to determine the appropriate amount of separation.

The mobile and desktop values can be configured independently.

10. Review the Page Structure

Before saving, confirm that the Horizontal Spacing Component is positioned between the correct components.

The page structure should clearly communicate:

Component

Horizontal Spacing

Component

Avoid hiding spacing inside the content of one of the surrounding components.

11. Click Apply

Once the Mobile Spacing Class and Desktop Spacing Class have been configured, click Apply to save the Horizontal Spacing Component.

12. Validate the Spacing on Staging

Validate the completed page on the appropriate staging storefront.

Review both desktop and mobile.

On desktop, confirm that:

• The spacing is visible and intentional.
• Related content still feels visually connected when Medium is used.
• Different sections have sufficient separation when Large is used.
• The gap does not interrupt the page unnecessarily.

On mobile, confirm that:

• The spacing does not become excessive.
• The page does not contain unnecessarily large areas of empty space.
• Related content remains visually connected.
• Section transitions remain clear.
• The spacing contributes positively to the overall page rhythm.

If the gap feels too large on mobile, adjust the Mobile Spacing Class independently rather than compromising the desktop spacing.

As a general working rule:

Same idea = Medium. New idea = Large. Use Horizontal Spacing instead of blank lines inside text components.