How to add separator lines?

Store Design
, ,

Topic summary

A user seeks help adding horizontal separator lines between sections on their product page, providing a screenshot example and store URL.

Solutions Provided:

Two community members offer CSS-based solutions:

  • Both suggest navigating to Online Store > Themes > Assets and editing the main CSS file (main.css, base.css, or theme.css)
  • Adding custom CSS code at the bottom of the file to create border lines with specific styling (black solid borders, padding, height)
  • One solution targets div#price-template while another targets .product__info-container

Follow-up Request:

The original poster requests additional separator lines below popup links (shown in a new screenshot) and offers to send coffee as thanks.

Status: One responder asks for clarification on the exact placement, providing a visual example. The conversation remains ongoing as the implementation details are being refined.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
5

Do you mean add another lines?

Like this?

Made4uoRibe_0-1719682886540.png
Made4uoRibe_0-1719682886540.png629×473 3.67 KB

If it is check this one. Same instruction.

.product-popup-modal__opener:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid black;
}

And Save.

1 Like