Default my cursor to the search box when search icon is clicked

Highlighted
Tourist
39 0 1

Hello,

 

I have a search icon on the top right of my webpage and when you click it the search bar pops up. However, the cursor does not automatically enter into the box. You must click on the search bar again to start typing your search. I would like it to automatically bring attention to the search bar when the icon is clicked so people can start typing as soon as they click on the search icon. 

www.GratefullyDyed.com

 

Any help is greatly appreciated.

 

Thanks!

0 Likes
Highlighted
Shopify Partner
42 0 9

Hi,

Paste the following into the bottom of your theme.liquid file. Let me know if this works!

<script>
	$('.search__open').click(function() {
		$(".search_field").focus();
	});
</script>

Thanks,

Joe

Web developer based in the UK, specialising in Shopify.
0 Likes
Highlighted
Tourist
39 0 1

Unfortunately, no. That did not seem to do it for me.

0 Likes
Highlighted
Shopify Partner
42 0 9

I've just taken a look at your theme.liquid and the code doesn't seem to be there? Not sure if you've removed it, or maybe put it in the incorrect place? I can do some quick debugging once it's in there.

Web developer based in the UK, specialising in Shopify.
1 Like
Highlighted
Tourist
39 0 1

You're a rockstar brother. 

I just put it back right before the </body> but I tried it in all the end spots to no avail. 

0 Likes
Highlighted
Shopify Partner
42 0 9

Looks like there's two different search fields in your code (one for mobile, one for desktop). Try amending the code to this and let me know!

<script>
	$('.search__open').click(function() {
		$(".search_field:first").focus();
	});
</script>

 

Web developer based in the UK, specialising in Shopify.
0 Likes
Highlighted
Tourist
39 0 1

Still nothing. :/

0 Likes
Highlighted
Shopify Partner
42 0 9

Looks to me like another JS error is interfering with the code. You're getting 'TypeError: e.target.hasAttribute is not a function' on some form of hit tracker embed.

Web developer based in the UK, specialising in Shopify.
0 Likes
Highlighted
Tourist
39 0 1

Not at all sure what that means but I appreciate you trying to help. Not the end of the world but it would be a nice function to have. Thanks anyway and thanks for all the help tonight with the other threads too!

0 Likes
Highlighted
New Member
3 0 0

did you find anything?

0 Likes