How can I remove the search icon in Dawn 7.0.1?

Technical Q&A
,

Topic summary

Issue: User seeks to remove the search icon from Shopify’s Dawn theme version 7.0.1.

Initial Solutions Attempted:

  • Multiple CSS codes tried but failed to hide the icon
  • PageFly-Victor provided CSS targeting a[href="#icon-search"] in base.css - did not work

Working Partial Solution:

  • PageFly-Victor suggested adding inline <style> tag in theme.liquid before </body> with span[href="#icon-search"] { display: none !important; }
  • Successfully removed the icon visually
  • However, clickable search button area remains active on hover

Additional Recommendations:

  • Cedcommerce proposed CSS code .header__icons .header__icon--search { display: none !important; } in base.css
  • PageFly-Victor offered alternative targeting details.modal__header.search { display: none !important; } in base.css

Current Status: Discussion remains open with user seeking complete deactivation of search functionality, not just icon removal. Multiple CSS solutions provided but full resolution unclear.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have tried multiple codes to remove the search icon in Dawn 7.0.1 but none seem to work?

How can i remove the search icon?

Any help is appreciated.

Thank you

https://silicorestudios.com/

2

Hi @scotticus ,

This is PageFly - Advanced Page Builder.

You can try with this code:

Follow this:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: paste below code in bottom of file → save.

[href=“#icon-search”] {

display: none;

}

PageFlyVictor_0-1668743750652.png
PageFlyVictor_0-1668743750652.png726Ă—210 1.52 KB

Hope that my solution works for you.

Best regards,

PageFly

1 Like
3

Hey @PageFly-Victor ,

Thanks for your quick reply!

I tried the code but the search icon is still there so it did not work.

Any other ways?

Thanks

Screenshot 2022-11-18 at 03.59.42.png
Screenshot 2022-11-18 at 03.59.42.png1591Ă—697 52.3 KB

Screenshot 2022-11-18 at 04.00.03.png
Screenshot 2022-11-18 at 04.00.03.png1016Ă—469 1.78 KB

1 Like
4

Hi @scotticus ,

You can again try with this code:

Follow this:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

PageFlyVictor_0-1668756272090.png
PageFlyVictor_0-1668756272090.png1365Ă—651 47.6 KB

span [href="#icon-search"] { display: none !important; }

Hope that my solution works for you.

Best regards,

PageFly

1 Like
5

Hey @PageFly-Victor ,

Thank you for the reply! Ive tried the code and it worked, the icon is no longer there, but if i hover i can still click the button to search, how can i deactivate the option completely?

Thanks again

1 Like
6

Hello @scotticus ,

This can be fixed with the help of a custom code.

Add the below code in your base.css file and your problem will be fixed:

  • Go to Online store âžť Select theme âžť Click on actions
  • Edit code âžť Open base.css from assets folder
  • add the below code in the end of the file
  • Save the changes and check

Find the code below

.header__icons .header__icon–search{

display: none !important;

}

Result:-

Cedcommerce_0-1668835073406.png

image.png

Hope this works, let us know if you need any further help with your Shopify store.

All the best,

CedCommerce

1 Like
7

@scotticus You can try again with this code:

Follow this:

Step 1: Go to Online Store-> Theme-> Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of file → save.

details-modal.header__search {
    display: none !important;
}

Hope that my solution works for you.

Best regards,

Victor | PageFly

1 Like