How To Change Search Icon To A Search Bar In Shopify, Small icon to big Bar Easily 2026

On a default Dawn theme, the storefront header shows the logo, navigation links, a country/currency selector, and a small magnifying-glass search icon on the right. Customers click that icon to open a search modal instead of typing directly into a visible field. Everything else in the header stays put; only the search element gets swapped for something bigger and always visible.

Shopify's own documentation recommends duplicating a theme before editing its code, specifically so there's a backup copy to revert to if something breaks. From Online Store → Themes, use the "..." menu on the live theme and choose Duplicate first, then make the code change on the duplicate.

Publish it once you've confirmed the search bar works. Shopify also notes that if a theme update lands while custom code changes are incompatible with it, those code changes get removed from the updated copy — one more reason not to edit the theme you're currently publishing from directly.

From Shopify admin, go to Online Store → Themes, find the theme card, and click the "..." menu next to Customize. Choose Edit code to open the raw theme files rather than the visual customizer, since this change isn't available as a toggle.

Inside the editor, open header.liquid from the sections folder and search the file for "header-search" — on the Dawn theme version checked for this guide (15.4.0), that turns up the line `{% render 'header-search', input_id: 'Search-In-Modal' %}`. This single line is the hook for the whole feature: it's what swaps in the icon-triggered modal, and it's the piece to replace or wrap with your own markup for a persistent visible bar instead.

Replace the icon-only render with markup for a visible input field and submit button, styled to sit inline in the header instead of popping a modal. Dawn's exact class names and layout can shift between theme versions, so work from a known-good snippet rather than writing the HTML from scratch, and paste it into the same spot the original render tag occupied so the header's flexbox layout doesn't shift around it. Save the file — Shopify's code editor autosaves changes on the duplicate theme, but nothing reaches the live storefront until that duplicate is published.

A search bar sized for desktop will often overflow or crowd the logo and cart icon on mobile widths, so check the header at a phone-sized viewport specifically. Dawn's header uses a small-hide/medium-hide class pattern for responsive elements, worth reusing rather than inventing new breakpoints, since it keeps the search bar's behavior consistent with the rest of the header.

Before publishing, use the theme preview to click into the new bar and run an actual search, confirming it returns real product results rather than just looking right. It's easy to get the visual part correct while accidentally breaking the form's action or input name — a search bar that looks great but returns nothing is worse than the small icon it replaced.