How do I remove the search icon?

Store Design
, ,

Topic summary

A user seeks to remove the search icon from their store header. Multiple solutions are provided using CSS code to hide the icon.

Primary approaches offered:

  • Add custom CSS targeting .header__icon--search or .header__search with display: none !important;
  • Insert code via Theme Customizer’s Custom CSS section for the header
  • Alternatively, edit base.css or theme.css files directly in the theme code editor
  • One response suggests locating and deleting the search icon code block in header.liquid

Implementation paths:

  1. Via Customizer: Online Store → Themes → Customize → Header Custom CSS
  2. Via Code Editor: Online Store → Themes → Actions → Edit Code → Assets folder → base.css/theme.css

All respondents provide CSS snippets and screenshots demonstrating the solution. The discussion remains open with no confirmation from the original poster about which method worked.

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

Hey, how do i remove the search icon in the header?

https://changepodshop.com/products/the-change-pod

Screenshot 2025-03-18 at 12.04.22 AM.png
Screenshot 2025-03-18 at 12.04.22 AM.png602×138 8.6 KB

2 Likes
2

MustafA16_0-1742271222484.png
MustafA16_0-1742271222484.png1263×557 78.2 KB

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

3

HI @Simon159

You can add this code to Custom CSS of Header in Online Store > Themes > Customize to remove that icon.

.header__icon--search { display: none !important; }
4

Hello @Simon159

  • Go to Online Store > Themes.​
  • Click on “Actions” next to your active theme and select “Edit Code”

In the Assets folder, find and click on base.css or theme.css

Add the following css code

Option 2:
Find and click on header.liquid or a similarly named file that controls the header layout.
Within this file, look for the code that renders the search icon.
Delete or comment out this block of code.

If you need any further assistance, feel free to ask. If you found my help useful, kindly consider liking this message and marking it as the Accepted Solution.

Best regards,
MP

5

Hello @Simon159
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.header__search {
display: none !important;
}

result

35.png
35.png374×547 215 KB

If this was helpful, hit the like button and accept the solution.
Thanks