How to move Dawn theme search bar to header

Store Design
, , , , , ,

Topic summary

Goal: Move the Dawn theme search bar into the header (left of the cart icon) because it overlaps dropdown menu items and isn’t selectable in the theme editor.

Attempts:

  • The store owner couldn’t locate/edit the search element via the theme editor or code.
  • A community member suggested adding custom code in theme.liquid above the tag and shared a result screenshot, but this fix did not work for the store owner. (Note: The exact code snippet was not visible in the post.)

Actions taken:

  • Another member requested collaborator access to the store. The owner provided the collaborator code and approved the request.
  • After accessing the store, the collaborator implemented changes and asked the owner to check.

Outcome:

  • The search bar was successfully moved to the header. The owner confirmed the fix and requested an explanation of the method used.

Status:

  • Resolved for the original poster. The precise implementation steps were not documented publicly in the thread.

Notes:

  • Screenshots were shared to illustrate the desired placement and result.
Summarized with AI on December 25. AI used: gpt-5.
1

How do I move the Dawn theme search bar to the header? As of now, it blocks my drop down menu items and I can’t fix it.

Screenshot 2024-07-08 222051.png
Screenshot 2024-07-08 222051.png1264×812 95.5 KB

I would like to move this search bar to the header, left of the ‘cart’ icon. I am unable to select the search bar element while in theme editor, and I have tried everything possible to find the element in the code and edit it but nothing seems to work.

Website: showroomatl.com

2

Hi @MattP2022

Would you mind if I send a collab request to access your store so I can help you?

3

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Result:

AnneLuo_0-1720493344720.png
AnneLuo_0-1720493344720.png1321×274 10.4 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

4

Thank you for the help, but unfortunately that did not work.

5

Sure!

6

Your store’s collaborator request code, please.

7

I can help you with it. So I need to access your store as a collaborator if possible.

8

4594

9

Request sent.

10

Accepted

11

Hi @MattP2022

Please check now

12

You’re the man, thanks!
Do you mind telling me how you did it?