Open search bar instead of icon in the header of dawn

Store Design
, ,

Topic summary

A user seeks to replace the Dawn theme’s search icon with a visible search bar while maintaining the predictive dropdown functionality. A solution is provided involving custom code modifications to header.liquid and theme.liquid files.

Core Solution:

  • Replace specific code around line 296 in header.liquid with provided markup
  • Maintains predictive search dropdown while displaying the search bar permanently
  • Multiple users confirm the solution works successfully

Follow-up Customizations Addressed:

  • Full-width expansion: Add CSS to theme.liquid using width: 100% !important and max-width: 100% !important
  • Search results alignment: Adjust positioning by changing left: to unset and translateX(50%) to 0%
  • Background color changes: Question raised but not yet answered

Unresolved Issues:

  • Compatibility with mega menu and top-left logo layouts (multiple requests)
  • Mobile version not displaying the search bar
  • Request for updated code (original code may not be visible)
  • Left-aligned search bar positioning
  • Centering and widening the search bar

The thread remains active with several customization requests pending solutions.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
17

Is there any way to edit this code and center and widen the search bar in the header?