How to add a search box to a Shopify theme Print

Modified on: Mon, Nov 15, 2021 at 8:43 AM


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 theme code, you can also try to add the search box 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 themes.
  5. Copy the following 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:
  6. Save the changes.

That's it. You can now go to the storefront and make sure that the search box has appeared and the app is built into it.



Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.