I want to hide search bar from mobile and only need to show the icon

Shopify Discussion

Topic summary

A user added a custom search bar to their Shopify header using inline HTML but needed it hidden on mobile devices, showing only an icon instead.

Solution Provided:

  • Add CSS code to the theme.liquid file, placed above the closing </body> tag
  • The code uses media queries to hide the search bar on mobile viewports
  • User confirmed the solution worked successfully

Alternative Approach:
Another participant suggested using CSS media queries with @media (max-width: 768px) to:

  • Hide elements with .search-bar class
  • Display elements with .search-icon class
  • Requires adjusting class names to match the theme’s HTML structure

Status: Resolved - the original CSS solution successfully addressed the mobile display issue.

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

i have added this code in the header.liquid

this helped me add the search bar in the header but it is also showing on mobile. I need to hide it in the mobile and only need the icon on the mobile.

store preview: - https://tdqj42h0560o5qro-63402672304.shopifypreview.com

please help.

1 Like
2

Hey @VineetRed

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-1739364978215.png
Moeed_0-1739364978215.png372×661 148 KB

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

Best Regards,
Moeed

1 Like
3

Thanks. It worked.

1 Like
4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like
5

To hide the search bar on mobile devices while keeping the icon visible, you can use CSS media queries. Add the following CSS to your theme’s stylesheet (usually in theme.css or theme.scss.liquid):

css

CopyEdit

@media (max-width: 768px) { .header .search-bar { display: none; } .header .search-icon { display: block; } }

 

This code hides the search bar and only displays the search icon on mobile devices (below 768px screen width). You’ll need to ensure that the search bar has a class like .search-bar and the search icon has a class like .search-icon. Adjust the classes as necessary based on your theme’s HTML structure.