Remove search bar/icon from header - Refresh Theme

Store Design
,

Topic summary

Removing the search bar/icon from the Shopify Refresh theme header.

  • A CSS-based approach was provided: in Shopify Admin > Online Store > Themes > Actions > Edit code, open Assets > base.css and add a rule targeting the header search element (details-modal.header__search) with display: none !important to hide it.

  • An alternative was suggested via theme.liquid: edit code and add custom code above the closing tag. However, the specific code snippet was not included in the post, making this method unclear.

  • Attachments: screenshots were shared to illustrate the UI path and the end result (search removed), but the images are not necessary to apply the CSS method.

  • Status: No confirmation of resolution from the original poster. The CSS solution is actionable; the theme.liquid approach lacks the actual code and remains incomplete.

Summarized with AI on January 14. AI used: gpt-5.
1

Hello, I was wondering how to remove the search bar/icon from the header (Refresh Theme). Thank you in advance for your assistance!

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the Bottom of the file:
details-modal.header__search {
display: none!important;
}

ZestardTech_0-1699341414211.png
ZestardTech_0-1699341414211.png1915×477 84.3 KB

3

Hey @HenryA

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1699341504143.png
Moeed_0-1699341504143.png1896×879 141 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed