Hide the search bar and only display search icon in mobile view while in desktop view don't hide it

Store Design
,

Topic summary

A user seeks to implement responsive search functionality where:

Desktop view: Search bar remains visible and functional

Mobile view: Search bar is hidden, only the search icon displays

Two solutions were provided:

  1. PageFly-Victor’s approach: Add custom code to the theme.liquid file before the closing </body> tag. After clarification about the requirements, Victor offered a revised code snippet.

  2. oscprofessional’s solution: Insert CSS code into the base.css file (Online Store → Theme → Edit code → Assets → base.css) using a media query targeting screens 750px and wider. The CSS hides the search field label and modal elements while styling the search button.

Both solutions involve adding custom code to the Shopify theme files. The discussion includes screenshots demonstrating the desired outcome, though some text in the thread appears corrupted or reversed.

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

dont hide search bar in desktop view

niceeee_0-1681548478295.png
niceeee_0-1681548478295.png1805×785 244 KB

hide search bar in mobile view and only display the search icon

niceeee_1-1681548546995.png
niceeee_1-1681548546995.png836×781 139 KB

please help how to do this

2

Hi @niceeee

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_0-1681548701488.png
PageFlyVictor_0-1681548701488.png1600×794 164 KB

PageFlyVictor_1-1681548701477.png
PageFlyVictor_1-1681548701477.png1600×777 194 KB

Hope this answer helps.

Best regards,

Victor | PageFly

3

I mean sir, in desktop view the search bar will remain but in mobile view it is hide and only search icon is displayed

4

Hi @niceeee , Sorry you can try this code
5

Hello @niceeee

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (min-width: 750px){
input#Search-In-Modal {
    display: none !important;
}
.search label.field__label {
    display: none !important;
}
.search__button .icon {
    color: #fff !important;
}
.search__button {
    top: -15px !important;
}
}