how to change shopify search icon to my own .svg icon (in Dawn 14.0)

Solved

how to change shopify search icon to my own .svg icon (in Dawn 14.0)

PedroPrado
Excursionist
42 0 6

Please, can anyone help me.
How do I change all Shopfy search icons to my own icons? I've looked everywhere and none of them work. It turns out that if I change some codes to mine, either the icon doesn't appear or my store is completely blank.
My theme is Dawn 14.0.
Thank you very much for your attention. I hope help.

Accepted Solutions (3)

Darshanp712
Shopify Partner
137 21 16

This is an accepted solution.

Hello @PedroPrado, To change this search icon in Dawn 14.0.0 please follow the steps below.

Edit code -> sections -> header.liquid -> check this svg with "#icon-search" You can change it here.

search1.png

Edit code ->  Sippets -> header-search.liquid -> Here that svg is called by that id "#icon-search". 

search2.png

 

Feel free to reach out if you have any questions or need assistance.

Best Regards.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.

View solution in original post

Dan-From-Ryviu
Shopify Partner
8550 1687 1695

This is an accepted solution.

Hi @PedroPrado 

You can go Online Store > Themes > Edit code, open header-search.liquid file, search "icon-search", replace SVG code in this file with your own SVG

- Helpful? Like and Accept solution to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Darshanp712
Shopify Partner
137 21 16

This is an accepted solution.

Hello @PedroPrado, The Problem is with your newly added SVG's height and width which are inline attributes of the SVG, whose values equal 2000mm.

Please see the screenshots below.

 

Before width and height.

Screenshot from 2024-06-17 18-48-02.pngScreenshot from 2024-06-17 18-47-55.png

 

After removing width and height.

Screenshot from 2024-06-17 18-48-25.pngScreenshot from 2024-06-17 18-48-17.png

 

Please check with these changes.

If I managed to help you then, don't forget to Like it and Mark it as a Solution!
Feel free to reach out if you have any questions or need assistance.

Best regards,

Darshan.

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.

View solution in original post

Replies 14 (14)

Darshanp712
Shopify Partner
137 21 16

This is an accepted solution.

Hello @PedroPrado, To change this search icon in Dawn 14.0.0 please follow the steps below.

Edit code -> sections -> header.liquid -> check this svg with "#icon-search" You can change it here.

search1.png

Edit code ->  Sippets -> header-search.liquid -> Here that svg is called by that id "#icon-search". 

search2.png

 

Feel free to reach out if you have any questions or need assistance.

Best Regards.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
PedroPrado
Excursionist
42 0 6

Hello. Thanks for responding.
When I do it this way my website is completely blank and the search icon doesn't even appear.
Thank you for your attention. I hope for your help.

Darshanp712
Shopify Partner
137 21 16

@PedroPrado, Please share the preview link.

Thanks!

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
PedroPrado
Excursionist
42 0 6

Sorry, but I don't know how to do this. 

Darshanp712
Shopify Partner
137 21 16

@PedroPrado See the screenshot below click on that green button and in the pop-up you will get a URL. Please share that URL.

download (25).png

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
PedroPrado
Excursionist
42 0 6

That's it!
thank you for the patience
https://1kxantij1nq6p11s-78296449301.shopifypreview.com

 

PedroPrado
Excursionist
42 0 6

I want to put this svg there:
I don't think it's wrong because I managed to put it on the bag icon.

<svg
   width="2000mm"
   height="2000mm"
   viewBox="0 0 2000 2000"
   version="1.1"
   id="svg1"
   xml:space="preserve"
   inkscape:export-filename="ÍCONE LUPA MAIOR-000000ff-ffffffff-000000ff.jpg"
   inkscape:export-xdpi="25.4"
   inkscape:export-ydpi="25.4"
   sodipodi:docname="ÍCONE LUPA MAIOR PARA O SITE.svg"
   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:document-units="mm"
     showborder="false"
     showguides="true"
     inkscape:lockguides="false"
     inkscape:zoom="0.08"
     inkscape:cx="3818.75"
     inkscape:cy="4143.75"
     inkscape:window-width="1920"
     inkscape:window-height="1009"
     inkscape:window-x="1358"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1"
     inkscape:export-bgcolor="#ffffff00" /><defs
     id="defs1" /><g
     inkscape:label="Camada 1"
     inkscape:groupmode="layer"
     id="layer1"><g
       id="g9-6"
       transform="matrix(1.0000444,0,0,1.0000426,-925.00496,-3326.796)"
       inkscape:label="Lupa"><ellipse
         style="fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:65;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
         id="path7-8"
         cx="1851.8973"
         cy="4234.9253"
         rx="331.61343"
         ry="331.70615" /><path
         style="fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:95.445;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1"
         d="M 2314.3318,4734.7806 2077.855,4500.8603"
         id="path9-9" /></g></g></svg>

Dan-From-Ryviu
Shopify Partner
8550 1687 1695

This is an accepted solution.

Hi @PedroPrado 

You can go Online Store > Themes > Edit code, open header-search.liquid file, search "icon-search", replace SVG code in this file with your own SVG

- Helpful? Like and Accept solution to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

PedroPrado
Excursionist
42 0 6

When I do it his way, he even changes the icon, but my store is completely white. Look at the photo there.
The blank photo is my website after doing what you said to do.
Thank you for your attention. I wait for your response.

Captura de tela 2024-06-17 090923.png

Captura de tela 2024-06-17 090847.png

Darshanp712
Shopify Partner
137 21 16

Hello @PedroPrado, The store looks completely fine! It's not in a white color or blank!! See the screenshot below.

Darshanp712_0-1718629561070.png

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
PedroPrado
Excursionist
42 0 6

That's because I'm back to normal. Let me do the process again, then you can take a look, please.

PedroPrado
Excursionist
42 0 6
Darshanp712
Shopify Partner
137 21 16

This is an accepted solution.

Hello @PedroPrado, The Problem is with your newly added SVG's height and width which are inline attributes of the SVG, whose values equal 2000mm.

Please see the screenshots below.

 

Before width and height.

Screenshot from 2024-06-17 18-48-02.pngScreenshot from 2024-06-17 18-47-55.png

 

After removing width and height.

Screenshot from 2024-06-17 18-48-25.pngScreenshot from 2024-06-17 18-48-17.png

 

Please check with these changes.

If I managed to help you then, don't forget to Like it and Mark it as a Solution!
Feel free to reach out if you have any questions or need assistance.

Best regards,

Darshan.

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
PedroPrado
Excursionist
42 0 6

My God, thank you so much for your help and patience! Everything went fine!