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.
3
  • Here is the solution for you
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.product__info-container>*+* {
    border-bottom: 1px solid !important;
    border-top: 1px solid !important;
    height: 100px;
    width: 100%;
    padding: 20px;
}
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like