How to Remove Search Icon in Shopify (2024)

How to remove the search icon in Shopify? This question comes to the Shopify store owners’ minds when they find this is unnecessary for their stores. It is obvious that all the stores do not need a search icon. Especially if you have only one product or a few products in your store, your customers may not need the search option. In that case, having a search option is unnecessary for your store. You will find that most of the Shopify themes have the search option, and there is no option to remove them. Today, I will share two different methods that you can use to remove the search icon in Shopify.

Let’s see the 1st method to remove the search icon in Shopify:

Step-1: Log in to your Shopify store and go to the front end of your store. On the right top corner, you can see the search icon.

Step-2: Right-click on the search icon and select Inspect.

Step-3: Now, you can find the elements responsible for showing the search icon button, as shown in the image.

Step-4: Select the elements and go to the Style tab on the right. Here you need to click on the “+” sign to add CSS code. Write “display: none ! important;” and see that the search icon is gone.

Step-5: Now select the section ” details-modal.header__search { display: none !important; } ” and copy it.

Step-6: Now, we will place the additional code. So, go to themes. Then go to the current theme and click on the “Actions.” Here, select the “Edit code” from the options.

Step-7: Click on “Assets” and select “(/)base.CSS.”

Step-8: Scroll down the page and end of the existing code, place the additional code ” details-modal.header__search { display: none !important; } ” and click on “Save”.

Step-9: Go to the frontend of your store and see the search icon is not there anymore.

This method is beneficial for those who want to get the search icon back later. It is also great to try an A/B test whether your customers need a search button or not. Then, as you stop showing your button, you can display it again quickly. I mean, if you want to regain the search icon, remove the additional code from your theme. Then, you should get the search icon back on your store just like before.

 

Check the other way to remove the search icon in Shopify:

 

Step-1: Log in to your Shopify store and go to the front end of your store. On the right top corner, you can see the search icon.

Step-2: Right-click on the search icon and select Inspect.

Step-3: Now, you can find the elements responsible for showing the search icon button, as shown in the image.

Step-4: As shown in the image, copy the class name “header__search.”

Step-5: Now, we will find the code from the theme editor. So, go to themes, then go to the current theme, and click on the “Actions.” Here, select the “Edit code” from the options.

Step-6: Go to the “Sections” and click on the “(/) header.liquid”

Step-7: Select the whole section from <details-modal class= “header__search”> to </details-modal> just like the way I did in the image. Delete the whole section or keep it as comments and click on “Save”.

Step-8: Go to the frontend of your store and see the search icon is not there anymore.

If you think you will never use the search icon in your store, you can apply the method. But, first, you should find the code responsible for showing the search icon and delete the code from the Theme code editor.

Some people struggle hard to find a solution to this issue. However, following these methods, you can easily remove the search icon in Shopify and regain it later if you want.