Make search bar smaller

Store Design
, , ,

Topic summary

A user working with the Impact Shopify theme wants to modify the search bar behavior. Currently, clicking search triggers a full overlay, but they prefer a simpler implementation—just a small text field that appears inline without the overlay effect.

Current Status:

  • Initial CSS/HTML solution was attempted (provided by @Sangeetanahar)
  • The proposed code is not working as intended
  • User has confirmed adding the code but requests further assistance

Technical Context:

  • Theme: Impact (Shopify)
  • Issue involves modifying default search overlay behavior
  • Likely requires custom CSS or theme file modifications

The discussion remains unresolved, with the user seeking additional help to achieve the desired search bar functionality.

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

Hello everyone I’m using Impact shopify theme . I want help with search bar. when you click search the shouldn’t come an overlay but just a small text field for entering what you are searching.
Is this possible? Thanks in advance :slightly_smiling_face:

Store preview URL: https://rebolet.shop/en?_ab=0&_fd=0&_sc=1&preview_theme_id=173253427464

2

Thank you so much @Sangeetanahar . However, it is not working you can check I added the codes. Is there any way you can help?

Store Preview: https://rebolet.shop/en?_ab=0&_fd=0&_sc=1&preview_theme_id=173253427464