NEW: AI Search & Discovery AgentExplore
Merchandising for Shopify MarketsLearn More
Refer & earn up to $1,000Refer Now
← Back to Help Center
Getting Started

How to Hide the Original Shopify Search Icon

Last updated April 2, 2026

When you enable the KX AI Search & Discovery agent — especially with the KX Inline Search Button added to your header — your storefront may end up with two search icons side by side: your theme's built-in one and the new KX one. Hiding the theme's default keeps the header clean and gives shoppers one obvious place to start a search.

Where to paste the CSS

The Shopify theme editor has a Custom CSS field on the theme's Header section. That's the right place for this rule, because:

  • The override targets the header, so it sits with the section it's modifying.
  • The field is scoped to that section only — "Adds custom styles to this section only" in Shopify's own wording.
  • No theme code editing, no file changes.

Steps

  1. In Shopify admin, open Online Store → Themes and click Customize on your active theme.
  2. In the left sidebar, click the Header section.
  3. Scroll the settings panel on the right down to Custom CSS.
  4. Paste the snippet below.
  5. Click Save.

Example CSS

details-modal.header__search { display: none; }
Shopify theme editor Header section Custom CSS field with the CSS rule pasted
Important: this snippet is just an example — it targets the search modal used by Shopify's Dawn theme and themes based on it. Every theme structures its header differently, so the exact selector you need may be different on yours.

Finding the right selector for your theme

If the example above doesn't hide your search icon, you'll need to find the selector your theme uses:

  1. Open your live storefront in a browser.
  2. Right-click the default search icon and choose Inspect (Chrome/Edge) or Inspect Element (Safari/Firefox).
  3. Look at the highlighted element and its parent — find a class or tag that clearly identifies the search control (e.g. .header__search, #search-icon-header, header-search).
  4. Write a CSS rule targeting it:
/* Replace with the selector from your theme */
.your-theme-search-class { display: none; }

If you're not comfortable with CSS, your theme developer or Shopify's theme support can point you at the right selector.

Alternative: edit the theme code directly

If your theme's Header section doesn't expose a Custom CSS field, you can add the same rule to one of the theme's stylesheets:

  1. In Shopify admin, go to Online Store → Themes.
  2. On your active theme click the … menu and choose Edit code.
  3. Open a global stylesheet — common names include base.css, theme.css, styles.css, or a header-specific file like component-header.css.
  4. Paste the CSS rule at the bottom of the file so it overrides existing styles.
  5. Click Save.

Verify it worked

Refresh your storefront (a hard reload — Cmd/Ctrl + Shift + R — clears cached CSS) and confirm the original search icon is gone. If it's still there, the selector likely doesn't match your theme — inspect the element and adjust the rule as described above.

Related