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
1343 111 181

Please Share a Store url to better assist.

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
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
964 38 115

Dear Dan90,

 

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

Thanks & Regards
MS Web Designer
Get Free Store Audit Report
20000+ Task Completed
1000+ Satisfied Client
9.9*/10 Customer Rating
10*/10 Shopify Services Marketplace
0 Likes
Highlighted
Shopify Expert
1343 111 181

try this 

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

if you face any issue feel free to reachout 

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Shopify Expert
2917 497 668

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