How can I keep the search bar always open on mobile?

Store Design
1

Hi,

We have a search icon on our website which expands upon click

However, we want to have it always open on the mobile version of the website, so that our customers can search much easier on it.

Can you please let us know if there is a solution you are implementing?

It might be an app, it might be a simple code which keeps the search bar open on mobile.

Any ideas will be appreciated.

Regards,

Gounay.

2

Hi There,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

Please share your store URL here and allow me to check for you.

Thanks & Regards,
Prezen Tech

3

Hi Prezen,

Thanks for your response.

Our website URL is youthandearth.com

An example of an open search bar can be lululemon.com. They have an open search bar.

Maybe, we can implement a similar solution to them.

Regards,

Gounay

4

Hi @Gunay_Zort

We can do like this.

Prezentech_0-1662560395037.png
Prezentech_0-1662560395037.png1025×321 25.3 KB

5

Hi Prezen,

Thanks for your response.

However, we don’t need any change on the desktop version.

We need it open on the mobile version.

Regards,

Gounay.

6

Sure,

Please check the attached sample screenshot.

Prezentech_0-1662560613801.png
Prezentech_0-1662560613801.png419×348 51.3 KB

7

Thanks for your reply.

Yes, this one looks better.

Is it the only place we can add it?

I would like to see a version where it appears below the banner, and compare them before deciding.

If not, we can go with this one.

Regards,

Gounay.

8

Hi @Gunay_Zort

Its not looking good after banner.

Generally, customer find the search bar on header and its habits of the customers.

If you want to make that change then, please share 4 digit Collaborator request code so, I can send you the collaborator account invitation.

So, I can do it quickly for you. :slightly_smiling_face:

9

Hi Prezentech,

Thanks you for your response.

I will send you a collaborator access.

However, is it possible to do it on a duplicate theme for now, so that I can publish it later when we are ready?

Also, do you think that we should be still retaining the search icon on the top left after we add this search bar? (image below)

Regards,

Gounay.

Gunay_Zort_0-1662561397153.png
Gunay_Zort_0-1662561397153.png417×347 88.7 KB

10

Yes, definitely first I will add the search bar on the duplicate theme once you are satisfied then, you can be published to the live theme.

No, we don’t need the search icon I will remove it.

Please send the collaborator account access to this email: info@prezentech.com

11

Hi Prezentech,

I have sent you our collaborator access code via private message.

Can you please send us a request using that code?

Regards,

Gounay.

12

Hi @Gunay_Zort

Please check the attached screenshot, we have made the changes for you.

Prezentech_0-1662631002311.png
Prezentech_0-1662631002311.png600×319 40.6 KB

If you like the solution, please don’t forget to accept it ‌ :face_savoring_food:

13

Hi Prezentech,

Thanks for your response.

However, our search bar used to have a smart search feature which was showing the products when we began to type product names. I can see that this feature is now disabled on mobile which is not ideal.

Also, I can see that the changes were done on the active theme, but we have requested it to be done on the duplicate theme.

I have created the duplicate theme called “Mobile Search Bar”.

Can you please revert the changes on the live theme and apply it on the duplicate theme?

Regards,

Gounay.

14

Sure, let me do that for you.