Open search bar instead of icon in the header of dawn

[AmetaComputer]

Hey,

does anybody know how to get an open search bare instead of an icon in the Dawn theme? But still has the dropdown effect with products coming up when you have finished the title you are looking for. So should still work as normally but just with the bar instead of an icon.

Best regards,

Oliver

[ThePrimeWeb]

Hey @AmetaComputer ,

Can you share the store link and password (if any) ?

[AmetaComputer]

Hey,

Thanks a lot for your reply,

The URL is: https://6b0cd1-3.myshopify.com/

And the Code is: Ameta1234

Also is it possible to make the corners curved? :))

[ThePrimeWeb]

Hey @AmetaComputer ,

That nearly exhausted me! It’s gonna be a little tricky so be very careful here alright

1. In your theme go to “Edit Code”

2. In the search bar type “header.liquid” and click on the file “header.liquid” in the “Sections” folder.

3. Around line 296, look for the following line that says {% render ‘header-serach’, input_id: ‘Search-In-Modal’ %}

4. Now here’s the tricky part. Replace it with the following. Be very careful not to touch anything else, and then hit “Save”!

      
        {% render 'header-search', input_id: 'Search-In-Modal' %}
      

      
              {%- if settings.predictive_search_enabled -%}
          
        {%- else -%}
          
        {%- endif -%}
      

You should see the changes now.

[AmetaComputer]

Thank you so much!!!

Is it possible to hire you for creating a product template for us? haha,

[eliamal]

Hi! I just tried this solutions. Still works great! How would I do to expand the search bar full widht? I’ve set the menu as a drawer followed by the logo and then to the right search, account and cart - and would like the search bar to extend all the way to the logo.

[ThePrimeWeb]

Hey @eliamal ,

Please share the link to your store, thanks!

[eliamal]

https://www.hjartgruppenshop.se/

[ThePrimeWeb]

Hey @eliamal ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

[eliamal]

I can’t get it to work. Did I do anything wrong?

[ThePrimeWeb]

Hey @eliamal ,

No. Could you add !important tag for these two

The final code should look like this, you can also remove the previous and replace with this.

[eliamal]

That worked! Do you think it’s also possible to get the search results aligned under the box? It looks a bit misplaced now

[ThePrimeWeb]

In the very first code, change left: to ‘unset’

and translateX(50%) to 0%

It should look like

left: unset;
transform: translateX(0%);

[KateD199]

you’re a legend, thank you!

[KateD199]

Hi, this is great and worked for our store! How do I change the background of the search box? not the dropdown menu that comes up with searching, just the actual search. To look like this, instead of white:

Thank you!

[liquordept]

my search bar is on the left side can you send me a code to make it work please and thank u.

[PartyFair]

Is there any way to edit this code and center and widen the search bar in the header?

[PartyFair]

Is there a way to get the search bar to be centered on the page, and maybe 50% wider? Thank you.

Link for reference: https://www.partyfairfreehold.com/

[Macomb636]

Can this code by coded for drop down or mega menu with logo in top left?

[AshfieldValet]

Can you make this work with the mega menu and the top left layout? i’ve tried tweeking a few things but cant get it to work.