Editing section divider color in Dawn theme

Technical Q&A
, , ,
1

Hello, I cannot seem to figure out how to edit the color of the section dividers/color between sections on my Dawn product page. I’ve tried in theme settings and some CSS, but I’m admittedly not the best when it comes to working with code. Any insight on how to make this change (remove section dividers, change color or dividers) would be greatly appreciated.

1.jpg
1.jpg1080×1080 68.3 KB

2.jpg
2.jpg1080×1080 68 KB

2

Hi @kprieto1023

Looks like not a divider to me, its a background color. PLease, share your store URL. Thanks!

3

I appreciate your response - this is the URL https://celestenoir.shop/

4

Hi @kprieto1023

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.rich-text.content-container {
    border-color: red !important;
}

Here is the result:

image_720.png
image_720.png720×284 88.1 KB

I hope this helps

Best,

Daisy

5

Super simple and worked perfectly - I very much appreciate it.

6

This trips a lot of people up on Dawn, so you’re not alone. On product pages, those “dividers” you’re seeing are usually either borders (like border-top) on specific sections or just background colors that create that line effect — there isn’t a single “divider color” control in Dawn’s theme settings.

First thing to check is Theme settings → Colors and Theme settings → Layout — some Dawn versions let you reduce or remove borders globally. If those don’t affect it, then it’s coming from specific section styles.

A quick way to find what’s adding the line is to open your browser inspector (right-click the line → Inspect), click the divider, and see which CSS rule is giving it a border or background. Once you find that, you can override it with something like:

.product__info-container,
.product__accordion {
  border-top: none;
  /* or a different color: border-top-color: #000; */
}

That targets the main product info and accordion sections so the lines go away or change color.

I also made an app called Easy Edits (https://apps.shopify.com/easy-edits) that makes these kinds of tweaks easy without code. You can click the section or the divider right on the page and visually change or remove it, or just describe what you want and let the AI apply it — basically click-and-change or talk it through like you’re talking to a person.