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.
1

Can someone help me to add separator lines in between sections. Like this:

Screenshot 2024-06-29 at 09.24.30.png
Screenshot 2024-06-29 at 09.24.30.png832×250 6.22 KB

url: https://errival.com/products/errival%E2%84%A2-instant-period-cramp-relief-heated-belt

will donate!

1 Like
2

Hi @Ryan1998

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
div#price-template--21563658666313__main {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    height: 100px;
    padding: 20px;
}
1 Like
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
4

thank you! Would you be able do it below these pop up links also, will send coffee please.

Screenshot 2024-06-29 at 18.27.29.png
Screenshot 2024-06-29 at 18.27.29.png716×590 16.1 KB

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