Dawn theme search bar outline change colors

Store Design
, ,

Topic summary

A user seeks to customize the Dawn theme’s search bar outline color, specifically wanting to change the animated border color that appears when clicking the search bar from black to a custom color (#732D26).

Current Issue:

  • The search bar outline uses the theme’s default foreground color
  • When clicked, an animation changes the outline to black
  • User wants this active state to display #732D26 instead

Solutions Attempted:

  • Multiple support teams (GemPages, PageFly) provided CSS code snippets to add to theme.liquid before the closing body tag
  • These solutions partially work but have bugs:
    • Color changes on hover instead of click
    • Still shows black outline on mobile when clicking away
    • Black border visible when zooming on desktop

Additional Problems Identified:

  • Search results page shows an unwanted small search bar at bottom left
  • Search bar displays incorrectly when no products match the query

Current Status:

  • PageFly-Victor notes the form uses box-shadow (not standard border), making complete color customization difficult
  • Recommends contacting Shopify or theme support for deeper investigation
  • Site URL shared: royalpeace.com (password-protected)
  • Issue remains unresolved with no fully working solution
Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I want to change the color around my search bar in the dawn theme. Currently, It’s using the standard foreground color of the theme. While I want to use a custom color for just the outline of the bar.

To be more specific, there is an animation that changes the color outline when clicking on the bar. I want the color changed of the bar after you’ve clicked on the bar. I’l attach 2 files of the before and after when you click on the bar currently. When the outline goes black. I want the black to be #237D62
Hopefully, someone knows a solution.

Picture underneath here is before. This should not change

Outline search bar before.png

Picture underneath here is after clicking on the bar. I’d preferably make the outline the color #237D62

Outline search bar after.png

Thanks for your help already!

2

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hello @BramVrolijk

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file.

  3. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

4

Hi @BramVrolijk

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_0-1676128695704.png
PageFlyVictor_0-1676128695704.png1600×777 194 KB

Hope this answer helps.

Best regards,

Victor | PageFly

5

Hi,
This helps. However, it could be better. Because this makes it so that when you hover it changes color. On phone, it’s still becoming black sometimes when you click off. Also when you zoom in on pc, you see the old black line around it.

Is it not possible to change what color it picks from in the theme → settings → color
This would make it so it will function without bugs.

Hopefully there are more solutions that could fix the issue.

Thanks for the help anyway!

6

Hi, I responded to another suggestion that was similar to yours. It’s not fully waterproof. And does not solve the issue in the end. Some bugs make it unusable.

But thanks for the suggestion it does work but not without its issues.

7

Can you share the URL so I can check more about this?

8

Hi,
URL: https://royalpeace.com/
Password: Vitamins1970’s

The search bar is also wrong when searching for products we don’t have.
Here an example: https://royalpeace.com/search?q=gg&options%5Bprefix%5D=last
It also has a small search bar at the bottom left that should not be there.

Thanks for looking!

9

The default border of the form is currently bow-shadow so I can’t change the color completely on click I can only change the border color of the form on mobile I hope this code can help you

The problem is that the search can’t find the product you want, you should contact the theme or Shopify so they can check more deeply about the data.