How to activate search box cursor when clicked on the search icon on header Brooklyn theme

Okay, so here’s the deal. When I click on the search icon on our store header (using the Brooklyn theme), it brings up the search box - as it should. However, to me, it seems obvious that the cursor should have been activated at this point to allow me to start writing. Well, this isn’t the case. I have to then click again on the search box to begin writing my search query. It would definitely be a better customer search experience if they could start typing with a single click rather than with two separate clicks.

I feel like there should be a fairly simple way to fix this, I just can’t seem to figure it out. It most likely has something to do with the JS rather than CSS of the standard version of the Brooklyn theme.

If it helps, the search box and function of my store are the same as in the standard Brooklyn theme, and you can find the store at https://classywomencollection.com

Any help is much appreciated.

Hi @Mike_from_CMC , go to edit code > snippets > search-bar.liquid, find this element:


Replace it with:


Now, go layout > theme.liquid, and find this:


                      
                        
                        {{ 'general.search.title' | t }}
                      
                    

Replace it with:


                      
                        
                        {{ 'general.search.title' | t }}
                      
                    

And add this in your theme.liquid file (before ):


Thank you for the reply, Marina! I tried the solution but, unfortunately, it didn’t work. The code you mentioned from theme.liquid was actually located under the header section. I don’t know if that made the difference but I couldn’t get it to work even after adding the id’s and trying to put the script in different places in theme.liquid and even theme.js…

The code I’ve sent you is probably in snippets/search-bar.liquid. You should check there. :slightly_smiling_face:

Okay, so I found the code you were referring to but still couldn’t get it to work. It seemed like a pretty simple and straightforward solution but for some reason, it doesn’t work. I tested it with both IDs set correctly and with the script added in theme.liquid but nothing.