How to place separator lines between sections

Store Design
, , ,

Topic summary

A user seeks to add horizontal separator lines between sections in the Dawn theme. A solution is provided via video tutorial, which successfully implements the separators.

Follow-up customization:

  • To change line color, modify the color code value (e.g., #ddd to #000 for black, #ff0000 for red)
  • Color picker tools like HTML Color Codes can help select custom colors

Troubleshooting:
When adding color customization to base CSS doesn’t work, an alternative method is suggested:

  1. Navigate to Shopify Admin → Online Store → Theme → Edit Code
  2. Locate theme.liquid file
  3. Insert custom CSS code with !important flag above the </head> tag
  4. Replace placeholder with actual section ID

The discussion remains open as the user tests the alternative CSS implementation method.

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

Hello.

I want to place separator lines between sections like showed on picture. I am using dawn theme. Does anyone know how to do this?

Skjermbilde (1).png
Skjermbilde (1).png1920×1200 186 KB

2

Hi @silenceclothing
You can easily add separator lines between sections by following this tutorial. Here’s a video walkthrough that will guide you step-by-step on how to achieve this in the Dawn theme: Video Tutorial.
Feel free to follow along and let me know if you encounter any issues!
Thank you

3

thanks, it worked! but how can i change color for the line?

4

You’re welcome! :blush: To change the line color, simply update the #ddd value in the code to any color code you like. For example:

  • #000 for black
  • #fff for white
  • #ff0000 for red

You can find more color codes and experiment with them using a color picker tool like HTML Color Codes. Here’s an example:

border-top: 1px solid #ff0000; /* Red line */

Feel free to explore and let me know if you need more help!

5

I tried adding here under the picture also

silenceclothing_0-1736420255601.png
silenceclothing_0-1736420255601.png1909×847 348 KB

but when i add the code inside base ccs, its not working?

silenceclothing_1-1736420328104.png
silenceclothing_1-1736420328104.png1895×980 120 KB

6

If adding the code in the base CSS didn’t work, you can try this method:
Steps:
Go to Shopify Admin → Online Store → Theme → Edit Code.
Search for the theme.liquid file.
Insert this code just above the tag:

Make sure to replace your-section-id with the correct ID of your section. Adding !important ensures the rule overrides other styles.
Let me know if this helps!