How to Remove Search Icon in Shopify Store – 2 Easy Ways

The search icon could be unnecessary if you have a single-page store, limited products, or you’re focusing on minimalist design. But, most of Shopify themes, including the ‘DAWN’ theme, have a default search icon. Don’t know how to remove search icon on Shopify?

You can remove the search icon in Shopify using simple CSS, or permanently remove it by deleting the responsible code from the theme file. Also, you can hide the search icon by deactivating the relevant code from the theme file by adding a <!– HTML comment tag –>.

In this blog, you will get all the safe methods to hide it. Even, I have guided to hide the icon on mobile only, or you can replace it with a full search bar.

Let’s get started with the step-by-step guide.

When Should You Remove the Search Icon in Shopify

If your store is simple or has limited products, the search feature might just clutter your design. In such cases, removing the search icon can improve user experience and make your store look cleaner.

Here are situations where removing the search icon makes sense:

• One-Product Stores – When you have only one product on your Shopify store, you can remove the search icon.
• Single Page Store – Everything is on the homepage (one page), so search isn’t helpful here.
• Minimal Design Preferences – If you prefer a clean layout on your Shopify store, it looks better without extra icons like the search icon.
• Enough Alternative Navigation – Already, you have organized products using menu, sub-menu collections, tags, Shopify sub collections, etc, then the search icon could be removed.
• Custom Navigation or AI Search – You use advanced tools or apps for product discovery. Then, if AI search or recommendations using apps are in place, the search icon may not be needed.

These are the most common reasons for removing the search icon in Shopify stores. You may have other reasons and specific needs for hiding the search icons. So, let’s start the step-by-step process of removing the icon from your Shopify store.

How to Remove the Search Icon in Shopify – 2 Easy Methods

You can remove the search icon by following the 2 different methods I have provided below. Both are safe to implement on your Shopify store and won’t affect the theme file. However, having a backup gives you peace of mind while changing your theme code.

Before You Begin: Backup Your Theme File

There are two different ways to backup your theme file. First, you can do it manually by logging in to the Shopify store dashboard > Online Store > Themes > 3 dots (beside the ‘customize’) > Download theme file.

Also, you can automate the backup process with the Syncora: Backup & Restore app. This app can help you to protect your store with real-time data backup for products, themes, videos, and files. 

• Protect your store 24/7 with real-time automatic backups of products, themes, videos, and more files.
• Keep backups safe in Google Drive, which can give you secure, remote access anytime.
• Restore lost data instantly and fix mistakes or recover your store with just one click.
• Recover specific items or entire store data without affecting any single code.
• Schedule it once, and automate daily or weekly backups to ensure your data is always protected.

Method 1: Hide the Search Icon in Shopify by Adding CSS Code

Let’s dive into the ultimate guide to removing the search icon from your Shopify store.

Step 1: Access Theme Code Editor

• Login to your Shopify store admin dashboard.
• Click on the “Online Store > Themes > 3 Dots > Edit Code”

Step 2: Copy the Code Below

You need to add this code to your Shopify theme code to hide the search icon from your store.

So, copy the code from here:

.header__icon--search {
    display: none;
}

Step 3: Open the “base.css” File and Paste the Code

• Search for the ‘base.css’ code file to inject the CSS code that will hide the search icon.
• Open the </base.css file under the “assets” folder.
• Scroll down and go to the bottom of the page.
• Paste the code you have copied from the previous step.
• Click on the “Save” button.

Step 4: Preview the Storefront

• Now visit your storefront, and you won’t see the search icon on your Shopify store.

Note: You can safely hide the search icon by adding the CSS code provided in this method. This method is non-destructive and won’t affect your store’s functionality. If you prefer a more permanent solution by removing the code entirely, continue to the next method.

Method 2: Remove Search Icon by Deleting the Responsible Code

You can permanently remove the search icon from your Shopify store by removing the search icon code from the theme file. Let’s start the step-by-step process:

Step 1: Access Theme Code Editor

• Login to your Shopify store admin dashboard.
• Click on the “Online Store > Themes > 3 Dots > Edit Code”

Step 2: Remove the Search Icon Code

• In the code editor, search for “header-search”.
• Open the file named header-search.liquid under the Snippets folder.
• Select all the code inside this file and press the ‘delete’ button. You can also delete the comment code at the top (DAWN theme) or keep it.
• Remember, you shouldn’t delete the header-search.liquid file. If you delete this file, it will see an error at the search icon location. So, keep the blank file.
• Click the “Save” button in the top right corner.

Step 3: Preview the Storefront

Here, you can see that the search icon has been removed permanently by removing the responsible code. However, you may keep the search icon from the small screen, like a mobile phone, but keep the icon on the desktop.

How to Hide the Search Icon from Mobile Version in Shopify

You can remove the search icon from mobile phone by adding a short CSS code. To do that:

Step 1: Access Theme Code Editor

• Login to your Shopify store admin dashboard.
• Click on the “Online Store > Themes > 3 Dots > Edit Code”

Step 2: Copy the CSS Code Below

<style>
@media screen and (max-width: 767px){
.header__search {
display: none; 
}
}
</style>

Step 3: Open the ‘theme.liquid’ File & Paste the Code Before </html>

In your Shopify admin, go to Online Store → Themes → Actions → Edit Code

• In the search bar, type “theme.liquid”
• Click to open the theme.liquid file under the Layout folder.
• Scroll to the very bottom of the file, just above the </html> tag.
• Paste the CSS code you have copied in step 2.
• Click the “Save” button in the top-right corner.

Step 4: Preview Shopify Store on Mobile Phone

Here, you only see that the search icon will be available on desktop, tablet, or a wider screen than 767px. Generally, mobile screen size is around 320px to 480px, so you can’t see the search icon on your mobile or any screen smaller than 767px.

How to Show a Search Bar Instead of Search Icon in Shopify

If you don’t want to disable the search function from your store, but the search icon of the DAWN theme doesn’t go with your store, then you can replace it with a search bar.

Step 1: Access Theme Code Editor

• Login to your Shopify store admin dashboard.
• Click on the “Online Store > Themes > 3 Dots > Edit Code”

Step 2: Replace the Responsible Code for Search Icon

• In the search bar, type header
• Open the header.liquid file located inside the Sections folder
• Search for: {% render ‘header-search’, input_id: ‘Search-In-Modal’ %}
• Replace the render code {% render ‘header-search’, input_id: ‘Search-In-Modal’ %} with:

<form action="/search" method="get" class="site-header__search" style="display: flex; align-items: center; gap: 8px; max-width: 300px; margin-left: 20px;">
  <input type="search" name="q" placeholder="Search products..." style="flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; width: 100%;">
  <button type="submit" style="padding: 8px 14px; background-color: #000; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">
    Search
  </button>
</form>

• Now click on the “Save” button.

Step 3: Preview the Storefront

Conclusion

In conclusion to the blog, I can say that removing the search icon in your Shopify store is simple and safe. It doesn’t matter which level of tech-friendly you are; just follow the steps I have provided above.

You now have two easy methods to do it. You can hide the icon with a small CSS code or remove the code entirely from your theme files. Both options work well, so you need to choose what feels right for you.

If you’re new to editing themes, using CSS is a great place to start. It’s quick, doesn’t change core files, and you can undo it anytime. Want more control? Then, deleting the icon code is the way to go.

Also, I have shown you how to add a full search bar instead of an icon and how to hide the icon only on mobile. So, you will have a customized, professional, and clean look on your Shopify store after implementing the method provided in this blog post.

Best wishes for your business and big thanks for staying with ShopiDevs!

You can try our Shopify Apps to design your store using a wide range of ready-made templates.

Boost Sales with the Product Showcase App

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

FAQs

How Do I Get Rid Of The Search Icon On Shopify?

The search icon is really boring in Shopify, especially on the DAWN theme’s default search icon. So, removing this icon could be a game-changer decision for your Shopify store. You have two different options to get rid of the search icon.

First, you can just hide it with a tiny bit of CSS—no code editing needed. Second, if you want it gone for good, you can remove the search icon code from your theme files. Both are safe ways, and I have explained step-by-step guides above in this article.

Where Is The Search Icon Code Located In Shopify Themes?

The search icon code is usually located inside a file called header-search.liquid (under the Snippets folder). If you haven’t found this file on your theme, you can check the header.liquid file.

Can I Hide The Shopify Search Icon Without Editing Code?

No, you can’t hide the search icon without editing your theme code. But don’t worry, you don’t need to do any complex edits. Just access your theme code editor and open the base.css file > scroll down to the bottom > add the CSS code below > and save.

.header__search {
  display: none;
}

What’s The Best Way For Beginners To Remove The Shopify Search Icon?

If you’re new to Shopify, I’d say go with the CSS method I have provided above. It’s the easiest and doesn’t mess with your theme files. But if you want a cleaner approach, you can remove the code directly (just make sure to back up your theme first).

Md. Jakaria Islam

Jakaria is an SEO Content Writer in Shopify, Ecommerce, WordPress, and Tech Industry with 4+ years of experience. He specialises in developing engaging, helpful content by simplifying complex topics into an amazing story for B2B, SaaS, and Shopify businesses. He’s also passionate about staying updated on SEO strategies and Shopify trends.