How to Remove the Search Icon from Your Shopify Store: 2 Easy Ways

Every element in your online store should serve a purpose and for some brands, a search bar does more harm than good.

If you run a one-product store or simply don’t need a search feature, that default magnifying glass icon is just adding unnecessary clutter.

Fortunately, getting rid of it is simpler than you think.

In this quick guide, we will discuss exactly how to remove the search icon from your Shopify store in less than five minutes.

Why Merchants Remove the Shopify Search Icon

Not every Shopify store needs a header search icon. Stores with a single product have nothing meaningful for customers to search. Minimalist brand designs prioritize whitespace over utility icons. Some merchants replace the icon with a full inline search bar for better UX. Others simply want a cleaner header layout on mobile, where the search icon competes with the logo and cart.

Whatever your reason, Shopify gives you three clean ways to handle it. The right method depends on whether you want a reversible tweak or a permanent change.

Here are a few situations where removing the Shopify store 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 – When everything is on the homepage (one page), search isn’t needed 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 are using advanced tools or apps for product discovery. Once AI search or recommendations using apps are in place, the search icon may not be needed.

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 100% 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.

Prerequisite: Back Up Your Theme Before Editing Code

Any time you edit theme files, you risk breaking something. A single misplaced character in base.css or header.liquid can take down your entire storefront header. Before you touch any code, create a theme backup.

In Shopify, you can duplicate your theme manually. Go to Online Store > Themes, click the three-dot menu next to your active theme, and select Duplicate. Shopify saves a copy you can restore instantly if anything breaks.

For automated backups, Syncora is the Shopify app built for this. It backs up your entire store automatically so you are never one edit away from a broken store.

Syncora: Backup & Restore

Automatically back up your Shopify theme, products, and store data. Restore with one click if anything breaks. Essential before any code edit.

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.

“Hide the Search Icon with CSS” is the safest approach. You add a single CSS rule to base.css that hides the icon visually. The underlying Liquid code stays untouched, so you can undo it in seconds by deleting the one line you added. No code knowledge required beyond copy-paste.

Step 1: Open the Shopify Theme Code Editor

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

This opens the theme code editor where you can safely edit CSS and Liquid files.

Step 2: Open base.css in the Assets Folder

In the left sidebar, find the Assets folder and click on base.css. This is the main stylesheet for your Shopify theme. It controls how all elements on the storefront look, including the search icon in the header.

Step 3: Add the CSS Code at the Bottom

Scroll to the very bottom of the base.css file. On a new line, paste this CSS:

.header__icon--search {
    display: none ;
}

.header__icon--search {
    display: none ;
}

Click the Save button in the top-right corner of the editor.

Note: if this code is not working, you can use display: none! important; to prioritize the display none tag.

Step 4: Verify on Your Storefront

Open your store in a new browser tab. The search icon should no longer appear in the header. To undo the change at any time, go back to base.css and delete the CSS rule you added.

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 the Search Icon by Deleting the Responsible Code

If you want a permanent removal and are comfortable editing Liquid files, this method deletes the search icon render tag directly from the header template. Unlike the CSS method, you are removing the code itself. This means there is no icon to restore unless you revert to a backup.

Step 1: Access Theme Code Editor

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

You need to access the Sections or Snippets folder depending on your theme.

Step 2: Find and Delete the Search Icon Code

In the code editor search bar, type header-search. Open the file named header-search.liquid under the Snippets folder. Select all the code inside this file and delete it, then click Save.

Step 3: Save and Verify

Click Save. Open your storefront in a new tab to confirm the search icon is gone. Both on desktop and mobile, the header should display without a search icon. If your layout breaks, restore from your theme backup immediately.

Which Method Should You Use?

Both methods get the job done. The difference comes down to how permanent you want the removal to be and how comfortable you are editing code files.

For the majority of Shopify merchants, Method 1 (CSS) is the right choice. It is fast, reversible, and does not put your header layout at risk. Only use code deletion if you have a specific reason to remove the Liquid code entirely, and always back up first.

How to Hide the Search Icon from the Mobile Version in Shopify

Some stores want the search icon visible on desktop (where there is enough header space) but hidden on mobile (where it crowds the header next to the logo, hamburger menu, and cart). Shopify makes this straightforward with a CSS media query.

To do that:

Step 1: Open the Shopify Theme Code Editor

Go to Online Store > Themes > Edit code. This time you will be editing theme.liquid in the Layout folder, not base.css.

Step 2: Open theme.liquid and Add the Mobile CSS

In the left sidebar, expand the Layout folder and click theme.liquid. Scroll to the very bottom of the file, just above the </html> closing tag. Paste this CSS block:

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

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

Paste it above</html>, not after it. Click Save.

This targets screens 767px wide or narrower. Desktop and tablet views are not affected.

Step 3: Save and Test on Mobile

Click Save. Open your storefront on a mobile device (or use your browser’s developer tools to simulate a mobile screen). The search icon should be gone on mobile while remaining visible on desktop.

How to Remove the Search Icon in Shopify Dawn Theme

Dawn is Shopify’s flagship free theme and the base for Online Store 2.0. It is built to be lightweight, but merchants frequently want to strip the default header search icon for cleaner brand layouts. Here is exactly how it works in Dawn.

The Dawn Theme Search Icon CSS Class

In Dawn, the search icon button in the header is controlled by the CSS class .header__icon--search in the Assets > base.css file. This is the same CSS method described in Method 1, and it works directly on Dawn without any modifications.

/* Dawn theme: remove search icon from header */ .header__icon–search { display: none; }

Where the Search Icon Lives in Dawn’s Liquid Code

For developers who want to remove the icon at the Liquid level, the search icon in Dawn is rendered in Sections > header.liquid via a snippet. The relevant render call looks for the header-search snippet in the Snippets folder (Snippets > header-search.liquid).

Deleting the content of that snippet or removing the render call from header.liquid gives you a permanent removal.

Dawn Theme vs. Older Shopify Themes

The .header__icon--search class is specific to Dawn and most Online Store 2.0 themes. If you are on an older theme like Debut, the CSS class name may differ. Common alternatives include .site-header__search-toggle or .header-search depending on the theme.

Once you have organized your products on Shopify and set up your Shopify sub collections, a clean header becomes even more important. The search icon is a small detail, but it contributes to the overall visual hierarchy of your store. Removing it in Dawn or any theme is a five-minute change with a visible impact on how your header feels.

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

Removing the search icon does not mean removing the search experience. Many merchants replace the compact icon with a full inline search bar that sits directly in the header. This gives customers an always-visible input field instead of a two-click process (click icon, then type).

This approach is especially effective for stores with large inventories where search is a primary navigation tool. If you have invested in Shopify conversion rate optimization, improving search discoverability is a direct lever for reducing bounce and improving time-to-purchase.

Step 1: Access Theme Code Editor

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

Step 2: Find the Search Icon Render Tag and Replace It

In the search bar, type header. Open the header.liquid file located inside the Sections folder and search for.

{% render 'header-search', input_id: 'Search-In-Modal' %}

{% render 'header-search', input_id: 'Search-In-Modal' %}

Replace that entire line with this search bar code:

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

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

Click Save. The screenshot below shows the replacement code in position.

Step 3: Save and Preview

Click Save and preview your storefront. The header now shows an inline search bar instead of the icon. On mobile, the bar adjusts to fit the smaller viewport. If the layout looks off, adjust the CSS width or positioning in base.css.

Boost Your Store’s Product Visibility

If you are tweaking your header to improve product discovery, EasyBoost can help. It is a Shopify app built by the ShopiDevs team that makes your products more visible through dynamic showcasing, product sliders, and smart display sections. A clean header is step one. EasyBoost handles the rest of the discoverability work.

EasyBoost: Product Showcase for Shopify

Add product sliders, featured collections, and dynamic display sections to your Shopify store without touching code. Built and maintained by the ShopiDevs team.

If you want to go further with your store design, Slider Revolution for Shopify gives you full creative control over your homepage and section layouts. See the full guide on how to design your Shopify store with Slider Revolution.

FAQs

Md. Jakaria Islam

Jakaria is an SEO Content Writer in Shopify, Ecommerce, WordPress, and Tech Industry with 5+ 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 growth marketing strategies and Shopify trends.