Separator settings

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use these settings to add a divider line above, below, or on both edges of a content area. Separators help break up long pages, define transitions between content, and add structure without changing the content itself. For a broader overview of how theme content is organized, see Shopify documentation on sections and blocks

Separator settings

You can style the top and bottom separators independently, so each edge can be emphasized or left clean. This gives you flexibility when one transition needs a clearer boundary than the other.

Choose the separator style based on how strong you want the visual break to feel:

1. Line creates the clearest, most minimal separation.
2. Dashed adds more texture and works well in more expressive layouts.
3. Dotted feels lighter and more decorative.
4. None removes the separator from that edge.

Avoid turning on separators for every content area in a sequence. Too many divider lines can make the page feel crowded and reduce the impact of important transitions.

Separator color

Use the separator color to match nearby borders or add a little more contrast between content areas. In most layouts, a subtle color works best because separators should support the page structure rather than compete with the content.

If you leave the color transparent, the separator uses the theme’s border color. Blank, transparent, or default-style values usually preserve the theme’s fallback styling, while explicit colors, gradients, or media overrides make the area feel more independent. This is usually the best choice when you want a consistent look across multiple areas without adjusting each one manually. For related theme editor controls, see Shopify documentation on the theme editor

Usage notes

1. Add separators selectively. Use them where they improve scanning or clarify a transition between two content areas.
2. Match the style to the layout. Solid lines suit cleaner designs, while dashed or dotted lines work better with softer or more decorative separation.
3. Keep contrast controlled. A separator that is too bold can distract from headings, images, and calls to action.
4. Use shared border color for consistency. Transparent color is a practical choice when you want separators to stay aligned with the rest of the theme.
5. Review both viewports. Desktop and mobile controls can produce different alignment, visibility, or media behavior, so check both sizes before publishing.
6. Use overrides intentionally. Explicit colors or media-based choices can make a local area stand out, so apply them only where you want a more independent look.