Change Search Icon (Magnifying Glass) in Refresh Theme

Store Design
, ,
1

Hello! I’m interested in changing the search icon in my Shopify store. I currently have the Refresh theme and the icon is just a small plain white magnifying glass. I’ve uploaded a new Icon image to my Shopify files, but I’m not very good with code. Also, for some odd reason I cannot find the search icon file in the code files.

Any help would be immensely appreciated.

Thank you all so very much!

1 Like
2

@Lfernandez45

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

Hello! Thank you for your help @KetanKumar . My shopify site URL is www.TheDetailingSupply.Com

I’d like to change the white magnifying glass icon on the top left of the header to a custom image, if possible.

4

Hello @Lfernandez45 ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1671506527666.png
GemPages_0-1671506527666.png1857×907 102 KB

  1. Open your header.liquid theme file

  2. Search key “header__icon–search”

GemPages_1-1671506583252.png
GemPages_1-1671506583252.png1917×963 79.8 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

1 Like
5

Thank you. That is very helpful. I do have another question though, would i insert an image link or file link to that section to replace the default search icon? @GemPages

6

You could please change code to like that

GemPages_0-1671507263894.png
GemPages_0-1671507263894.png1912×900 75.8 KB

Best regards,
GemPages Support Team

1 Like
7

@GemPages Wonderful! That worked perfectly. Is there any way I can make the icon larger? It seems a bit small. Thank you so much for all your help so far!

1 Like
8

Hi,

When I wrote this reply, @GemPages already wrote the reply for the solution.

However, to adjust the icon size, please follow the steps below.

20221220_123552.png
20221220_123552.png1871×880 95 KB

  1. Add a class for the search icon image (with alt tag) as below.

Add the code below to Asset > base.css file.

.top_search_icon {
  width: 64px;
  height: 64px;
}

It’s the same as the cart icon image size but you can change the size per your needs.

Hope it helps.

Thanks.

1 Like
9

@DavidEKim Thank you very much! You were amazing help!

@GemPages Thank you so much as well! You are wonderful!

1 Like
10

You could please try adding the below code to the bottom of the base.css file

.header__icon .icon-search img {
    width: 60px;
    height: 3rem;
}

Best regards,
GemPages Support Team

1 Like
11

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

1 Like