How can I customize the search icon in Dawn?

Store Design
, ,
1

Hello there,

I would like to ask you for help with changing search icon from original setting to custom as on the picture.

Screenshot 2023-08-20 at 18.16.29.png
Screenshot 2023-08-20 at 18.16.29.png345×106 1.46 KB

Is there any way to change it please? Thank you very much in advance.

1 Like
2

Hey @EliskaM ,

Please provide store URL

1 Like
3

Hey there, it’s:

https://krasopiska.myshopify.com/

Password: chedow

Just to clarify my request: The point is to display the text all the time, not only when clicked. Also my e-shop is in czech language, so the text should be something like: Potřebuji vyhledat

Thank you very much for your effort and time :slightly_smiling_face:

4

Hello again @EliskaM ,

Inside you header.liquid file, replace the code for the search icon with the following code:

And add the following code to the bottom of your base.css file:

.search-field {
  display: inline-flex;
  align-items: center;
  background-color: #f0f0f0; /* Set your desired background color */
  padding: 10px 20px; /* Adjust padding as needed */
  border-radius: 5px; /* Rounded corners */
  border: 1px solid #ccc; /* Add a border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-field svg {
  margin-right: 10px; /* Adjust the spacing between icon and text */
}

.icon-text {
  font-weight: bold;
  white-space: nowrap;
}

Of course you can edit the parameters so the field will look as you wish.

We are here for any questions, hope we helped!

1 Like
5

Thank you very much!! Really appreciate your effort :heart:
Could you please navigate me where exactly put this code? l’m begginer :slightly_smiling_face:

6

Of course!

  1. From your Shopify admin proceed to Online store > Themes
  2. Next to the “Customize” button you will find the three dots button, click it and choose “Edit code”
  3. From there, same instructions as my previous response - find the file and add/change the code.

If you have any further questions, don’t hesitate to reply. If you managed to apply the changes, please mark our reply as a solution :wink:

1 Like
7

Nice to hear from you :slightly_smiling_face:

Thank you for your help, I just don’t know where exactly to put the first code. Like how to exactly do this:
Inside you header.liquid file, replace the code for the search icon with the following code:

8

Let us make the changes for you, we have sent a collaborator request.

1 Like
9

Hello again @EliskaM ,

We have made the changes, done!

10

Hey there!
I can see it now. I’m very sorry but its very different from my request. Can I customize it to the same design as on my first message?

11

Yes, at the end of your base.css file, change the values as you wish

1 Like
12

hello can you tell me how can I change the search icon, I have the SVG to be placed but I dont know which code to be replaced with