Change Big Search Bar to Lens Icon (Mobile Only, Dawn Theme)

[Sivadarshan]

Hi everyone,

I’m using the Dawn theme for my Shopify store. Currently, my search bar is large and visible on all devices. I’d like to change it to a lens (magnifying glass) icon on mobile while keeping the big search bar on desktop.

I’ve attached an image showing the position and style I’m aiming for. Could anyone please guide me on how to adjust the code or settings to achieve this?

Thank you in advance for your help!

website: https://ambersilverz.com/

I want it like this:

[Mustafa_Ali]

hey @Sivadarshan so you want change the search bar in to search icon so for that thing so their is some setting your store theme cuztomization so follow these steps
first open your shopify store and then go to the online store and then go to the cuztomization and the find the header option in your cuztomization and the open the header block and the your can see some setting your right hand side
and then find some setting in your search bar and then you can change your search bar in to the search icon

if the problem was solved
then don’t forget to like and mark as solution

best regart
mustufa ali

[Sivadarshan]

@Mustafa_Ali, Can you please share step by step

[Mustafa_Ali]

yes sure follow these following images
and you can solved your problem

and then

and then

and then

[tim_1]

That’s not a screenshot from Dawn; but neither is the @Sivadarshan’s search bar.

Unless somebody has access to this custom implementation code, it’s not possible to suggest any good solution…

Check the Snap Search app settings, maybe it has relevant settings?

[topnewyork]

Hi @Sivadarshan

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (max-width: 749px) { 
 .header__search { 
 display: none !important; 
 } 
}

In the code editor, find the header.liquid file under the “Sections” folder and open it.

Use Ctrl + F to search for

.

Inside this div, you’ll see the code for the cart icon. Paste the following code snippet right before or after the cart icon code, depending on where you want the search icon to appear:

<a href="/search" class="header__icon header__icon--search"> 
 <svg
 xmlns="http://www.w3.org/2000/svg"
 aria-hidden="true"
 focusable="false"
 class="icon icon-search"
 fill="none"
 viewBox="0 0 18 18"
 > 
 <path
 fill-rule="evenodd"
 clip-rule="evenodd"
 d="M11.959 10.546a7 7 0 111.414-1.414l3.954 3.954a1 1 0 01-1.414 1.414l-3.954-3.954zM14 7A5 5 0 114 7a5 5 0 0110 0z"
 fill="currentColor"
 > 
 </path> 
 </svg> 
 <span class="visually-hidden">Search</span> 
</a>

Go back to your base.css file and add the following CSS to make sure the icon is only visible on mobile:

@media screen and (min-width: 750px) { 
 .header__icon--search { 
 display: none !important; 
 } 
}

If that wroks for you, please mark my comment as solution.

Thanks!