How do I remove the search bar from a custom theme?

Store Design

Topic summary

A user asks how to remove the search bar from a custom Shopify theme.

Initial Solution:

  • Navigate to: Admin Page → Online Store → Themes → Actions → Edit code
  • Open the base.css file in the Assets folder
  • Add CSS code targeting the search icon/modal with display: none !important;

Alternative Solution:
When the first code snippet doesn’t work, another user suggests targeting .header__search instead with the same display property in base.css.

Limitations:
One user notes these solutions may not apply to themes without a base.css file (specifically mentioning the “Fresh” theme), leaving that question unresolved.

Effectiveness:
Multiple users confirm both CSS solutions successfully removed the search bar, with verification spanning from the original post through 2025. The alternative .header__search code worked on the Dawn theme when the accepted answer failed.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hey Idk how to remove the search bar (I’m using custom theme) if anyone has an idea please help me

my store: technymx.com

1 Like
2

Hi @Eman_Adawi ,

You can simply remove the search icon to remove the search bar. Please follow the instructions below

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
#shopify-section-header > sticky-header > header > div > details-modal {
    display: none !important;
}
3 Likes
3

it worked thanks :heart:

1 Like
4

Hello,

I did the same but it did not work

2 Likes
5

Just paste the code below at the very bottom of the base.css file.

.header__search {
    display: none !important;
}
13 Likes
6

this works thanks

7

Any solutions if there isn’t a “base.css”? I’m using the Theme called Fresh.

Thank you!

8

This worked on Dawn. Tried the “accepted answer” and didn’t work. Thanks bro

9

2025 and still working! Thanks