Mainpage Horizontal Line Divider with Text

Store Design

Topic summary

Main topic: add a horizontal divider with centered text between sections on the main page; an example image illustrates the desired look.

Proposed implementation: insert a separator element in the page’s Liquid template and add CSS in the theme stylesheet. The CSS uses flexbox for centering and ::before/::after pseudo-elements with a bottom border to draw lines on each side, with small margins when text is present.

Outcome: a reusable divider component was suggested; no confirmation yet that it worked for the original request.

Open issue: another user asks how to implement this in the Symmetry theme using Custom Liquid, reporting failed attempts. No theme-specific guidance or resolution is provided.

Technical note: ::before/::after are pseudo-elements that can render decorative lines, and flexbox ensures the text is centered between them.

Attachments: the example image is central to understanding the intended design.

Summarized with AI on February 4. AI used: gpt-5.
1

Hi there!

I would like to add a horizontal line with text in between different sections on my main page, like the one in the image below:

Screen Shot 2021-08-17 at 12.06.22 AM.jpg
Screen Shot 2021-08-17 at 12.06.22 AM.jpg1409×104 5.1 KB

Any help would be appreciated, thank you!

2 
<div class="separator">Next section</div> 
add this code in page.templage.liquid

add this below code in theme.scss.liqid

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}
3

Hi! Any idea/suggestion of how I can add this to the Symmetry theme? Have been playing around trying to add it directly in-theme with custom liquid but nothing is working :disappointed_face: