Refresh Theme - Make A Search Bar Instead Of An Icon On Desktop Version But Leave The Icon On Mobile

Store Design
, , ,

Topic summary

A Shopify store owner wants to customize their Refresh theme’s search functionality:

Goal:

  • Display an open search bar in the header on desktop
  • Keep only the search icon on mobile devices

Current Status:

  • A solution was provided involving code replacement in the header.liquid file (line 545)
  • The store owner attempted the implementation but encountered issues
  • Screenshots show the code changes made, but the result didn’t work as expected

Remaining Issue:

  • The implementation appears unsuccessful based on the frontend result
  • The helper needs store access to troubleshoot and verify the changes properly
  • The discussion remains unresolved, awaiting further debugging
Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hello. I’d like to make a customization for my Shopify store.

I wan’t to display already open search bar in header on desktop version, but on mobile version I wan’t to leave the icon only as it is.

Store link: https://ontech-lt.myshopify.com

Password: 40002

Ignelis_0-1678176801044.png
Ignelis_0-1678176801044.png1879×980 172 KB

Ignelis_1-1678176830167.png
Ignelis_1-1678176830167.png360×836 40.1 KB

2

@Ignelis
Add below code in header.liquid file

replace below code(replace below code with the above one)
3

Okay. I think I did something wrong. I replaced this code in header.liquid - line 545

Ignelis_0-1678178274968.png
Ignelis_0-1678178274968.png1457×194 9.32 KB

to this:

Ignelis_1-1678178297836.png
Ignelis_1-1678178297836.png1489×469 41.2 KB

And unfortunately this is what i get:

Ignelis_2-1678178321322.png
Ignelis_2-1678178321322.png1879×980 169 KB

Ignelis_3-1678178333239.png
Ignelis_3-1678178333239.png360×836 36.8 KB

4

@Ignelis But in front -end it doesn’t visible perfectly for that i need access of your store .