How to Add a Visible Search Bar on Shopify (Dawn + Apps)

Shopify's Dawn theme and most free themes hide search behind a magnifying glass icon. Visitors have to find the icon, click it, and wait for an overlay before they can type anything. Nielsen Norman Group research found that replacing a search link with a visible search box increased search usage by around 91%.

In the EcomHint benchmark of 182 Shopify stores, around 97.8% failed the visible search bar check. If your store is one of them, this guide covers two ways to fix it: editing your theme code or installing a search app.

This guide focuses on making the search bar visible. For the data behind why it matters, see the icon-only search benchmark. For broader search UX (autocomplete, zero-results pages, field width), see ecommerce site search best practices.

Before You Start: Which Approach Fits Your Store

There are two main paths to adding a visible search bar on Shopify. Each has trade-offs.

Choose code if you want full control at zero cost. Choose an app if you want speed and lower risk.

Key takeaway: The theme code approach is free but carries a risk of breaking Predictive Search. The app approach costs money but avoids that risk entirely.

Method 1: Edit Your Shopify Theme Code

This method replaces the default search icon in your theme header with an always-visible search input field. The instructions below apply to the Dawn theme. Other themes follow a similar pattern but file names and code structure may differ.

Back Up Your Theme First

Before editing any code:

1. Go to Online Store > Themes in your Shopify admin.
2. Click the three-dot menu on your active theme.
3. Select Duplicate to create a backup copy.

If anything breaks, you can switch back to the duplicate.

Find the Search Code in header.liquid

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code on your active theme.
3. In the left sidebar under Sections, open header.liquid.
4. Search for this line (or similar, depending on your Dawn version):

{% render 'header-search', input_id: 'Search-In-Modal' %}

This single line controls how search appears in your header. It renders the magnifying glass icon that opens a search modal on click.

Replace With a Visible Search Form

Replace that line with the following code. It keeps the default search icon on mobile (where screen space is limited) and shows an expanded search bar on desktop. If Predictive Search is enabled in your store settings, the <predictive-search> component handles autocomplete automatically.

<style>
.mobile-search { display: none; }
.desktop-search { display: block; }

@media only screen and (min-width: 769px) {
  predictive-search[open] .predictive-search {
    position: absolute;
    min-width: 768px;
    left: -768px;
    transform: translateX(50%);
  }
}

@media only screen and (max-width: 768px) {
  .mobile-search { display: block; }
  .desktop-search { display: none; }
}
</style>

<div class="mobile-search">
  {% render 'header-search', input_id: 'Search-In-Modal' %}
</div>

<div class="desktop-search">
  {%- if settings.predictive_search_enabled -%}
    <predictive-search class="search-modal__form"
      data-loading-text="{{ 'accessibility.loading' | t }}">
  {%- else -%}
    <search-form class="search-modal__form">
  {%- endif -%}

  <form action="{{ routes.search_url }}" method="get"
    role="search" class="search search-modal__form">
    <div class="field">
      <input
        class="search__input field__input"
        id="{{ input_id }}"
        type="search"
        name="q"
        value="{{ search.terms | escape }}"
        placeholder="{{ 'general.search.search' | t }}"
        {%- if settings.predictive_search_enabled -%}
        role="combobox"
        aria-expanded="false"
        aria-owns="predictive-search-results"
        aria-controls="predictive-search-results"
        aria-haspopup="listbox"
        aria-autocomplete="list"
        autocorrect="off"
        autocomplete="off"
        autocapitalize="off"
        spellcheck="false"
        {%- endif -%}
      >
      <label class="field__label" for="{{ input_id }}">
        {{ 'general.search.search' | t }}
      </label>
      <input type="hidden" name="options[prefix]" value="last">
      <button class="search__button field__button"
        aria-label="{{ 'general.search.search' | t }}">
        <svg class="icon icon-search" aria-hidden="true"
          focusable="false">
          <use href="#icon-search">
        </svg>
      </button>
    </div>

    {%- if settings.predictive_search_enabled -%}
      <div class="predictive-search predictive-search--header"
        tabindex="-1" data-predictive-search>
        {%- render 'loading-spinner',
          class: 'predictive-search__loading-state' -%}
      </div>
      <span class="predictive-search-status visually-hidden"
        role="status" aria-hidden="true"></span>
    {%- endif -%}
  </form>

  {%- if settings.predictive_search_enabled -%}
    </predictive-search>
  {%- else -%}
    </search-form>
  {%- endif -%}
</div>

This code is based on the Dawn theme's built-in search components. If your Dawn version uses different class names or a different Liquid structure, you may need to adjust it. Back up your theme before making changes.

Customize the Appearance

To adjust the search bar styling, add the following CSS to Assets > base.css or inside a <style> tag in the header section.

@media screen and (min-width: 750px) {
  .header predictive-search {
    width: 32rem;
  }
  .search__input.field__input {
    border-radius: 30px;
    border: 1px solid rgba(var(--color-foreground), .1);
  }
}

The width: 32rem sets the search bar width on desktop. Adjust this value based on your header layout. Baymard Institute's search field design research recommends matching search bar prominence to your catalog size. A large catalog store benefits from a wider, more prominent search field. A small boutique can use a narrower one.

If the predictive search dropdown appears misaligned, change left to unset and adjust the translateX value in the <style> block above.

Common Issues After the Code Edit

Based on Shopify Community reports, these are the most frequently reported problems:

• Predictive Search stops working. This happens when the replacement code doesn't include the JavaScript hooks that Shopify's Predictive Search API needs. The fix is to make sure your form includes the predictive-search web component or connects to the /search/suggest API endpoint. Shopify's Predictive Search documentation details the required structure.
• Search results dropdown misaligned. The predictive search overlay may appear offset from the search bar. Adjust positioning by changing left to unset and modifying translateX values in the CSS.
• Mobile display issues. The search bar may not appear on mobile, or it may overflow the header. Use @media queries to control width and visibility at different breakpoints.
• Broken after theme updates. When Shopify updates the Dawn theme, your custom code may conflict with new template changes. Keep a record of what you changed so you can re-apply it after updates.

Key takeaway: The code approach gives you full control but requires ongoing maintenance. If Predictive Search breaks, the Shopify Community Dawn theme thread has version-specific fixes and troubleshooting tips.

Method 2: Install a Shopify Search App

If editing Liquid code feels risky, a search app handles the key pieces: visible search bar, autocomplete, analytics, and mobile responsiveness. No theme code changes needed.

What Shopify Search & Discovery Does (and Doesn't)

Shopify offers a free, built-in app called Search & Discovery. It improves search quality (synonyms, autocomplete, product boosting) but does not change how the search bar appears in your theme. If your theme shows an icon, Search & Discovery keeps the icon. It's a search quality tool, not a search visibility tool.

This matters because many store owners install Search & Discovery expecting it to add a visible search bar. It won't. You still need either a code edit or a third-party search app to change the icon into an expanded input field.

Third-Party Search Apps Compared

These apps replace your theme's default search with their own widget, including a visible search bar.

Pricing as of June 2026. Check each app's listing for current plans.

Rapid Search has the lowest-priced paid tier in this table, starting at around $14/month for an always-visible AI search bar with typo tolerance, synonym matching, and a search analytics dashboard. It also offers a free plan covering up to 2,000 search sessions per month with the app's branding, which suits a small store that wants to confirm a visible search bar lifts usage before paying for it.

Searchanise is a good fit for most Shopify stores. It has a free plan with unlimited queries that carries its branding, plus paid tiers from around $19/month that raise product limits. It installs in minutes, adds a visible search bar to your header, and handles autocomplete and analytics out of the box. The setup guide walks through the full process.

Boost Commerce offers AI-powered search with personalization and product recommendations. At $29/month, it costs more than Searchanise but includes features like collection merchandising and promotional banners on higher plans.

Algolia targets larger stores and enterprises. It has a free Build tier for low-volume usage, but its Shopify-focused plans scale into custom enterprise pricing. It's worth considering if you have a development team and need fine-grained control over search relevance and ranking.

How to Install a Search App (General Steps)

1. Go to the Shopify App Store and pick a search app.
2. Click Add app and authorize it in your Shopify admin.
3. Follow the app's setup wizard. Most apps ask where to place the search bar (header, below navigation, full-width).
4. Customize the appearance: placeholder text, colors, border radius, width.
5. Preview your store and confirm the search bar shows on page load.

Most search apps inject their widget automatically. Some may require a small code snippet in your theme. The app's documentation covers this.

What to Configure After Adding the Search Bar

Whether you used the code approach or an app, a few settings affect how well the visible search bar performs.

Placeholder Text

The default "Search..." tells visitors nothing about what they can find. Placeholder text that includes real product examples teaches users what to type and encourages search usage.

• Bad: "Search..." (generic, gives no guidance on what the store sells)
• Good: "Search 'red hoodie' or 'size L'" (shows concrete examples, sets expectations)

Keep placeholder text concise. On mobile, long text gets truncated, so stick to one or two short examples.

Search Bar Width

NNGroup guidelines recommend a search input wide enough for at least 30 characters. Most product search queries are 2-3 words, but the field should handle longer queries without scrolling.

On desktop, aim for at least 300-400px width. On mobile, the search bar should stretch to full screen width.

Autocomplete and Predictive Search

If you edited the theme code, verify that Shopify's built-in Predictive Search still works. Type a product name and check that suggestions appear in a dropdown below the input field.

If you installed a search app, the app's autocomplete replaces Shopify's built-in version. Test that it:

• Shows product suggestions as you type
• Displays product images and prices in the dropdown
• Handles typos (typo tolerance)
• Returns results for partial queries

How to Test Your New Search Bar

After making changes, run through this checklist before publishing.

Desktop Testing

1. Load your homepage. The search bar should be visible on page load without clicking anything.
2. Type a product name. Predictive search suggestions should appear.
3. Click a suggestion. It should navigate to the correct product page.
4. Submit a search query. The search results page should show relevant products.
5. Check the search bar on category pages, product pages, and the cart page.

Mobile Testing

1. Open your store on a phone (or use browser dev tools).
2. Verify the search bar is visible and accessible without tapping or scrolling.

3. Type a query and check that autocomplete suggestions display correctly on the smaller screen.
4. Verify the search results page renders properly on mobile.

Predictive Search Validation

If you edited theme code, this is the most important test:

1. Open your browser's developer console (F12).
2. Type a search query in the search bar.
3. Look for fetch requests to /search/suggest in the Network tab.
4. If no requests appear, Predictive Search is broken. Your code edit likely removed the JavaScript hooks that trigger the API call.
5. Refer to Shopify's Predictive Search documentation to fix the connection.

Key takeaway: The search bar itself is just the first step. Placeholder text, autocomplete, and cross-device testing determine whether visitors actually use it.

FAQ

How do I add a search bar in Shopify?

Two options: edit your theme's header.liquid file to replace the search icon with an expanded input field, or install a search app like Searchanise or Boost Commerce that adds a visible search bar without code changes. The app approach is faster and lower-risk.

How do I have a search bar instead of a search icon in Shopify?

In the Dawn theme, open Sections > header.liquid and find the line that renders the search icon (typically {% render 'header-search', input_id: 'Search-In-Modal' %}). Replace it with a search form that includes an expanded input field. This is a code change that varies by Dawn version, so back up your theme first.

Does Shopify Search & Discovery add a visible search bar?

No. Shopify Search & Discovery improves search quality (autocomplete, synonyms, product boosting) but does not change how the search bar appears in your theme. If your theme shows an icon, the app keeps the icon. You need a code edit or a third-party search app to make the bar visible.

Will editing my theme code break Predictive Search?

It can. Shopify's Predictive Search relies on specific JavaScript and Liquid components. If your replacement code doesn't include the predictive-search web component or the fetch call to /search/suggest, autocomplete suggestions stop appearing. Test after making changes and keep a backup of your original theme.

Which Shopify search app is best for small stores?

For stores under 500 SKUs, Searchanise at around $19/month offers a good balance of features and price. It adds a visible search bar, handles autocomplete, and includes analytics. Boost Commerce at $29/month adds AI-powered personalization if your budget allows it.

Want to see how your store handles search and other conversion elements? Run a Shopify store audit. For the data on why search visibility matters, see the icon-only search benchmark. For search UX guidelines beyond visibility, see ecommerce site search best practices. For a broader view of Shopify conversion issues, see the Shopify CRO benchmarks and the our Shopify CRO guide. For search placement context, see our homepage optimization guide.