Separator

Featured links

1. Company XYZ documentation on the separator block
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use the Separator block to add extra breathing room between nearby content or to place a simple divider between two parts of a page. It works well when a layout needs cleaner pacing, clearer separation, or different spacing on desktop and mobile. See the Separator block for setting details.

For a broader overview of how blocks work in the editor, see Shopify documentation on sections and blocks

Core settings

The main settings control two things: how much space the block adds and whether that space includes a visible line.

Set desktop and mobile height separately to keep spacing comfortable on larger screens without making smaller screens feel too stretched. In most layouts, mobile spacing benefits from a lower value than desktop.

Line style lets you choose between empty space and a visible divider. Use a line when you want to break up different content types or signal a stronger transition, and use None when spacing alone is enough.

Separator color changes the divider color when a line style is enabled. If you leave the color transparent, the block uses the theme border color, which is usually the easiest way to keep the separator visually consistent.

Note

Even at 0 height, this block can still show a small gap because the surrounding layout keeps a standard space between blocks.

Standard block settings

Visibility settings

Use visibility controls to show this block on all devices or hide it on desktop or mobile. This is especially useful when you want different spacing patterns for smaller screens or when a divider only improves one layout. See visibility settings.

Usage notes

1. Adjust each viewport. Review the separator on desktop and mobile, since spacing, alignment, visibility, and media-related behavior can differ between screen sizes.
2. Use mobile spacing carefully. Reduce mobile height first if the page feels too loose on smaller screens.
3. Keep fallback styling when possible. Leave color transparent or use default-style values when you want the separator to blend into the theme’s standard styling.
4. Make overrides count. Use explicit colors, gradients, or media-based overrides only when you want the separator area to stand out more from surrounding content.
5. Use lines deliberately. Add a divider line only when you need a stronger visual break than spacing alone can provide.
6. Expect a minimum gap. Do not rely on a 0 height setting for completely flush spacing between blocks.