Getting Started

How to Hide the Original Shopify Search Icon

Last updated April 2, 2026

Why You Need to Hide the Default Shopify Search Icon

When activating app-based search, Shopify's original search icon often remains visible, potentially creating duplicate icons that confuse shoppers and clutter your storefront. Hiding the default icon maintains a cleaner user experience.

CSS Code to Hide the Original Search Icon

The recommended code snippet is:

details-modal.header__search {
  display: none;
}

This targets the default Shopify search modal to remove it from view without affecting app search functionality.

Where to Add the CSS Code

Go to Online Store in Shopify admin
Click Themes
Select Customize on active theme
Navigate to Header section
Scroll to Custom CSS
Paste the CSS code
Click Save

After saving, refresh your storefront to verify the icon is hidden.

Alternative Method: Add CSS to Theme Files

If Custom CSS is not available in the header, add the code to one of these files:

base.css
theme.css
styles.css
Header-related CSS files

Place the code at the bottom of the file to override existing styles.

Theme Differences to Keep in Mind

Themes vary, especially with customized or third-party versions. If the icon persists, your theme may use different CSS selectors, requiring adjusted code.