Adding a search bar to the Dawn theme: how can it be done?

Hello,

I tried pages of solutions for the last few hours, and none of them worked.

The website currently has a search icon, and I’m trying to replace or add to it a search bar.

SCS.png

I’m currently using the Dawn theme. Please let me know if you need access to the site or a copy/paste of code.

I appreciate any and all feedback.

Thanks,

D2RGEAR

2 Likes

Hi @D2RGEAR
You want to make the search box alway show on top page??

Yes.

1 Like

@D2RGEAR

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

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

I have tried to time and time again. Have gotten it to work a few times but it caused a few other problems. The latest my Cart Drawer wouldn’t work and since then I gave it a rest. It’s doable. Are you just starting to create your site or have you done a of work to it already?

Official

I hear ya. I’ve done a lot of work already, so my options are limited.

now I’m curious what D2R is. Haha!

how good are you with code?

this is the best link I have found for the code but don’t copy and replace it all (if you do it will remove all of your customizations):

https://community.shopify.com/c/shopify-design/search-bar-in-dawn-theme/td-p/1635928

first copy your current code and test using the copy in order to not ruin your existing work.

so I compared the code vs my base.css code and found two separate areas that were unique and copied them into my code. it was tedious yet it worked. yet you may need your search Icon on the right instead of left. and you would want to move your logo to the top left instead of center.

this is the best I can tell you but I did get it to work and still have it working on a non published Debut theme but I have not worked out all the bugs yet. I’m not great at code so I just try and copy others and play around until it works.

Good Luck!

I sell in-game items for a video game (Diablo 2 Resurrected).

I’m on the same level as you when it comes to coding.

The link you posted was one of the many suggestions that I tried and didn’t work.

On a side note, I copy and pasted the entire code and it didn’t make any changes. I ctrl + z to go back to the previous code or select an earlier time in the top left of the window.

I usually just send a download of the theme to my email, but it wouldn’t hurt to have an extra layer of security, by copying the theme and testing the copy.

Also, I’d prefer to have the logo at the top/middle, because any other orientation doesn’t look as good, especially with so many categories.

I don’t know why it automatically jumps to the left side, and I don’t know why a search bar isn’t a default option, with it being a popular design and everyone asking around.

Thanks, and best of luck to you as well.

Hi @D2RGEAAR

Go to Shopify admin panel > Online store > Themes. Find the theme you want to edit, and then click Actions > Edit code. Decide where you want to place the search box in your theme template.

I hope your problem will be solved

@jesse011

I think we know that the code needs to be edited. lol. We are looking for the correct code to add an always open search bar/box in Dawn instead of the small clickable magnifying glass and cannot find anyone besides the link I provided above that has an answer yet that answer is incomplete.

the best solution I have found to create an open text box in Dawn theme is to create a Custom Liquid box and enter code to create the box. you can copy some of the code from main-search.liquid or start anew and enter completely new code. this would create a new block and you can move it to the top just under the Header if that is where you want it but it will not add it to the header itself (which is what I find to create all of the problems associated with getting this done). hope this helps!