How to add a search box to Shopify themes

The Smart Search & Filter app is built into the search box of a Shopify theme template. However, sometimes the search box is absent from the theme’s template. In this case, we recommend you contact the theme support team and ask them to add the search box.

If you feel comfortable editing the Shopify theme code, you can also try to add the search bar HTML code on your own. To do so, follow these steps:

Tip

Before changing the theme template, you should check out the Shopify guide on the matter – Editing theme code

  1. Go to Shopify admin panel > Online store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Decide where you want to place the search box in your theme template. For example, you can put it in the Header part.
  4. Find and open a file with the HTML code of the chosen theme’s part. The name and location of the file vary for different Shopify themes.
  5. Copy the following search form’s code and paste it into a suitable HTML element in order to display the search box.
    <form class="search" action="/search">
        <input type="text" placeholder="Search" name="q" value="{{ search.terms | escape }}"  />
        <input type="submit" value="Search" />
    </form>

    For example, in the demo theme, the Header code is located in the theme.liquid file. Open it and paste the code into the Nav HTML element:

    How to add a search box to Shopify themes

  6. Save the changes.

That’s it. You can now go to the storefront and make sure that the search box has appeared in your Shopify theme and the app is built into it.

How to add a search box to Shopify themes

How to add a search box to Shopify themes Discover how to optimize the search box in your online store. As a result, it can boost your sales.
Enjoying your experience with Searchanise?

We’d appreciate it if you could take some time to leave a review.

Updated on May 31, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support
Back to top