fbpx

How to Remove Search Icon in Shopify (2024)

Share Post:

How to Remove Search Icon in Shopify

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.

How to Remove Search Icon in Shopify

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

inspect shopify search icon

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

shopify serach icon elements

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.

Shopify style tab

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

Shopify style tab copy

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.

Shopify themes actions

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

Edit theme assets

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”.

Shopify theme code edit

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

removed search icon shopify

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.

How to Remove Search Icon in Shopify

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

inspect shopify search icon

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

shopify serach icon elements

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

copy Shopify search icon elements

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.

Shopify themes actions

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

Edit theme sections shopify

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”.

Shopify search icon remove delete code

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

removed search icon shopify

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.

Boost Sales with the Product Showcase App

Easy Display Product Showcase featured

Boost your sales with the Product Showcase app with customizable display option

  • Awesome Conversion-based Templates
  • Slide or Grid view to display products nicely
  • Best Selling Products, Related Products
  • Latest Products, Discounted, Recently Viewed Products
  • Specific Products, Specific Collections, Collection Slider
  • Product Labels & Badges, Sale Countdown Timer to create urgency
  • Integrate with popular rating apps: Judge.me, LAI Review, Loox, Yotpo, Junip, Stamped
Shopify App Store Badge Final Black

Join Our Growing Community!

Subscribe to our newsletter and never miss our Products latest offer news and useful shopify tips & tricks.

1 thought on “How to Remove Search Icon in Shopify (2024)”

Leave a Comment

Your email address will not be published. Required fields are marked *

Explore the #1 Shopify Slider today

🚀🔥 Create Shopify Sliders, Sections, Banner, Video, Pages & more

X
Scroll to Top