Multipurpose theme documentation
Multipurpose Fashion Theme
Header Divider
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Utility Sections > Header Divider
Overview
The Header divider section displays a simple horizontal line. Use it to separate sections visually and add structure to your layout. Minimal configuration—typically just color. No blocks; purely visual. Ideal for breaking up long page flows or adding subtle separation between content blocks.
Where to Add This Section
- Go to Online Store > Themes > Customize.
- Select Homepage or desired template.
- Click Add section.
- Choose Header divider.
- Position between sections where you want visual separation.
- Save.
đź“· Image placeholder: Add a screenshot of Header divider in context.
Quick Setup (1 Step)
- Add section — Place between sections; set Divider color if needed.
Section Settings
| Setting | Description |
|---|---|
| Divider color | Color of the horizontal line (default: #e5e5e5) |
Minimal configuration; the divider is a simple semantic horizontal rule
(<hr>).
Step-by-Step Setup
Step 1: Add the section
Add Header divider where you need visual separation:
- Between hero and featured collection
- Between product sections and testimonials
- Above the footer
- Between any two distinct content blocks
Step 2: Configure (if available)
- Divider color — Set to match your design (or use default).
- Save.
Use cases
- Section separation — Between hero and products
- Visual rhythm — Break up long scrolling pages
- Footer boundary — Above footer for clear delineation
- Content grouping — Between related content blocks
Best practices
- Use sparingly—too many dividers can feel repetitive.
- Match divider color to your design system.
- Consider spacing; some themes add padding automatically.
- Use when content blocks blend together without clear separation.
For merchants
- Add only where it improves readability.
- Match Divider color to your theme for consistency.
- Simpler layouts may not need dividers.
Common mistakes
| Mistake | Fix |
|---|---|
| Too many dividers | Use 1–3 per page maximum |
| Wrong placement | Place between distinct content blocks only |
| Color clashes | Match Divider color to theme palette |
FAQs
The Header divider section adds a thin horizontal line to visually separate content sections. It is purely decorative and does not contain text, images, or blocks.
You can add it to:
- Homepage
- Custom templates
- Header group layouts
- Any JSON template that supports sections
It is commonly placed between major content areas such as a hero banner and a featured collection.
No. The divider uses a semantic <hr> element marked
with aria-hidden="true", so it does not add indexable
content or impact search rankings.
No. The section:
- Uses no JavaScript
- Loads no external assets
- Adds only a single lightweight HTML element
It has negligible performance impact.
Not in the current version. The thickness is controlled by the theme's CSS and is set to 1px. If thickness control is required, it must be added as a schema setting in the section.
Spacing depends on surrounding sections and theme layout rules. This section does not include built-in spacing controls.
Yes. By default, it spans the full width of its section container. If your theme wraps sections inside a page-width container, it will align accordingly.
Yes. It uses a semantic <hr> element and includes
aria-hidden="true" to prevent unnecessary screen reader
announcements. This follows accessibility best practices for decorative
separators.
Yes, but it is recommended to use them sparingly. Too many dividers can make a layout feel repetitive or visually cluttered.
No. The Header divider is a single-element utility section and does not support blocks.
Yes. It uses JSON templates, a valid schema with presets,
section.shopify_attributes, and no deprecated markup. It is
fully compatible with Online Store 2.0.