How to make a "clear" button in search box?

Highlighted
New Member
4 0 0

I have searched and can't find an answer to this. I want implement dynamic search, so it makes sense to have an "x" button in the search box so users can clear out the box to start over. How to I code such a button?

 

Example from the Target web site -- see the little "x" at the right side of the search box? I want to add that to my Shopify search box.

 

Search box X.JPG

 

Thanks!

Dan

0 Likes
Highlighted
Shopify Expert
1381 111 205

Please Share a Store url to better assist.

0 Likes
Highlighted
New Member
4 0 0

I'm not sure the store really matters in this case, but mine is fastwrx.com.

 

Dan

0 Likes
Highlighted
Shopify Partner
1747 108 313

Dear Dan90,

 

I think you are looking for something like this? https://mssignature.myshopify.com/

Best Regards
MS Web Designer | MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
9.9/10 Customer Rating | 1000+ Happy Clients | 100% Satisfaction Or Money Back Guarantee
0 Likes
Highlighted
Shopify Expert
1381 111 205

try this 

https://shopify.dev/tutorials/add-predictive-search-to-your-shopify-theme

if you face any issue feel free to reachout 

0 Likes
Highlighted
Shopify Expert
3657 549 883

HI @Dan90 

For that you have to change your search box type, do it by following:

1. Section->header.liquid file and find [name="q"] and then change it like below

 <input type="search" name="q" placeholder="Search FastWRX.com" value="" autocapitalize="off" autocomplete="off" autocorrect="off" height="15px">

Here just change type="search" from type="text"

 

Now add this css in asset->theme.scss file at bottom:

.menu form [name="q"]{border-radius: 4px;border: 1px solid #ccc;padding: 8px 8px 8px 12px;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
4 0 0

Jasoliya, you nailed it. A "search" input type will automatically have a clear button in most browsers. I changed the input type from "text" to "search" and the clear button appears now.

 

Thanks,

 

Dan

0 Likes
Highlighted
New Member
2 0 0

Hi,

Is there a way I can remove the clear button from the search bar? 

Thanks

0 Likes
Highlighted
Shopify Expert
3657 549 883

Send your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
2 0 0

Hi Jasoliya,

 

The store is password protected. Do you really need the store url?

0 Likes