Empty Space & Line

Add breathing room between sections or draw a divider, without touching CSS.

A page built from stacked sections tends to read as one continuous block: everything sits equally close to everything else, so nothing stands out. These two sections are how you give a page rhythm. Empty space opens a gap, Line draws a horizontal rule. Neither adds content, and both do more for how a homepage scans than most styling settings.

At a glance

Where to find it	Add section → Layout
Two sections	Empty space (a gap) · Line (a horizontal rule)
Allowed on	Line: any template, plus header and footer · Empty space: templates only
Content	Neither section adds any — they only shape the page

---

How to add

1

Add the section

In Add section → Layout they're listed as Empty space and Line. Line can also be added inside the header and footer section groups; Empty space is available on page templates only.

2

Drag it into place

Move the section to sit between the two sections you want separated. Both take effect immediately in the editor preview.

3

Set the size

For Empty space, set Height — a multiplier from 0 to 4 in 0.5 steps. For Line, decide whether Make full-width is on, and set the Top and Bottom spacing around it.

4

Check the color scheme

Both sections take their background, and the line's color, from Color scheme. Where two neighbouring sections use different backgrounds, this decides which one the gap belongs to.

Height is a multiplier, not a pixel value. It multiplies the theme's own section padding, so the gap shrinks along with the rest of the layout on smaller screens instead of staying stubbornly tall on a phone. A Height of 0 collapses the section to nothing — handy when you want to keep it in place but temporarily remove the gap.

Good to know

• Empty space has a Color scheme of its own. Where two neighbouring sections use different backgrounds, that setting decides which one the gap belongs to.
• Line has no thickness or color setting. The rule takes its color from the section's Color scheme.
• Make full-width on Line removes the side margins so the rule runs edge to edge. Leave it off and the line stays within the grid.
• Disable grid max-width can already be in effect without you enabling it: if Theme settings make the chosen grid full-width, the Line section follows that automatically.

Customization ideas

Separate two sections that share a background

Put a Line between a banner and a product row using the same color — it separates them without introducing a second color scheme.

A colored band above the footer

Stack an Empty space with a distinct color scheme directly above the footer. It reads as a deliberate break rather than leftover space.

Build a spacing system

Use Height 0.5 between tightly related sections and 2 before a new topic. Consistent small and large gaps do the work of headings without adding any text.

Frame a full-width banner

A full-width Line directly under a full-width banner makes the banner feel framed rather than floating.

---

Settings reference

Empty space — settings

Setting	What it does
Height	Gap height as a multiple of the theme's section padding, 0–4 in 0.5 steps.
Color scheme	Background color of the gap.

Line — settings

Setting	What it does
Grid	Which grid the line sits in: Page, Alternative, Secondary or Custom.
Max width	1040–2560 px. Visible only with Grid set to Custom.
Disable grid max-width	Lets the line stretch past the grid's maximum width.
Make full-width	Removes the side margins so the line runs edge to edge.
Color scheme	Determines the line's color.
Top / Bottom	Spacing above and below, 0–2×.

Best practices

• Pick two or three spacing values and reuse them down the page. Ten slightly different gaps look like a mistake; two deliberate ones look like a system.
• Don't use Empty space to compensate for a section that's already too tall — reduce that section's own Bottom spacing instead, or the page keeps growing on every screen size.
• A line between every pair of sections stops being a separator. Use one where the content genuinely changes subject.

Related

• Custom HTML & Custom Liquid
• Anchor Link