How do i remove the search icon form the Brooklyn theme?

[hyggety]

Please help

[May · Accepted solution]

Hi, @hyggety!

This is May from Shopify, and welcome to our Shopify Community!

Before we dive into this, I have moved your post to the Shopify Design board, since the question is related to themes. Moving the post to this board also means your question will get more traction from other theme experts on the platform.

Our themes are designed to give the best user experience, and the search function is an essential part of it. It allows customers to do a quick search across the site, from searching products to store policies. That being said, I generally do not recommend completely removing a search function on your store, unless this feature is completely irrelevant to the type of business/store you are running. 

If you would still like to remove it, feel free to follow the steps below to edit your theme code. Before making any changes to your code, I highly recommend making a duplicate of your theme, to ensure that your customers aren’t affected by any unintended results.

1. From your admin, go to 'Online Store > Actions > Edit code'.

2. Open up 'header.liquid' file, located inside the 'Sections' folder. You can also look up for this file by using the search function on the left.

3. Scroll down to the bottom of this file, and paste this code:

<style>
  .icon-search{
    display: none !important;
  }
</style>

Your code should look like this:

4. Click 'Save'.

For future reference, if you would like to place the icon back to your store, you can always roll back to an older version of your theme. If you are not comfortable with making this change, since you are using a theme made by Shopify, our theme specialists may be able to look into this for you if your account is eligible. Alternatively, you can also reach out to our Shopify Experts for some help.

Let me know how it goes! If you have any followup questions, feel free to reply to this comment or contact our 24/7 support.

Cheers!

[hyggety]

Thank you! This solved my problem 🙂 

[OrrsumSpirits]

Warning this fix does not remove the search option from the mobile site!  Caused alot of issues for us 😞

[spbeebe]

I would have a Q (query) button and a Search button on my header/main page. They both lead to the same screen. I would prefer to keep the Search button and move the Q button. How do I remove one and not the other?

Thank you

[liftini]

Thank you!