Edit your storefront search results

You can edit your storefront search to narrow down the kinds of results that are displayed. You can adjust your theme code so that your storefront search results include only products, only pages, or only blog articles.

Search results

Sectioned and non-sectioned themes

Edit your search form code to narrow your search results

To narrow your storefront search results:

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. You will need to find and edit the search form for your theme. Some themes have only one instance of the search form code, and others have two. If you use a theme that has two instances of the code, then you will need to edit both. If you use a free Shopify theme, then you will find your search form code in the following file(s):

    Boundless

    • search-template.liquid in the Sections directory

    Brooklyn

    • search-bar.liquid in the Snippets directory

    Debut

    • search.liquid in the Templates directory
    • search-form.liquid in the Snippets directory

    Jumpstart

    • search.liquid in the Templates directory

    Minimal

    • search-bar.liquid in the Snippets directory (There are two instances of search form code in this file. To successfully narrow your search results, you will need to edit both instances.)

    Narrative, Pop, Supply

    • search-bar.liquid in the Snippets directory

    Simple

    • search.liquid in the Templates directory
    • header.liquid in the Sections directory

    Venture

    • search.liquid in the Templates directory
    • search-bar.liquid in the Snippets directory
  3. To locate your search form code in the file, find the following text:

    /search
    
  4. Between the opening <form> tag and closing </form> tag, paste the following form field:

    <input type="hidden" name="type" value="product">
    

    The above code will restrict your search results to show only products. If you want to narrow your search results to show a different type of result, then replace value="product" with one of the following:

    • value="page" to include only pages
    • value="article" to include only blog articles

    Your code should look something like this (the exact HTML used for your search form may be different depending on your theme):

    <label class="form-label--hidden">
      <span class="visuallyhidden">{{ 'general.search.placeholder' | t }}</span>
    </label>
    <form action="/search" method="get" class="input-group search-bar" role="search">
      <input type="hidden" name="type" value="product">
      <input type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" class="input-group-field" aria-label="{{ 'general.search.placeholder' | t }}">
      <span class="input-group-btn">
        <button type="submit" class="btn icon-fallback-text">
          <span class="icon icon-search" aria-hidden="true"></span>
          <span class="fallback-text">{{ 'general.search.submit' | t }}</span>
        </button>
      </span>
    </form>
    
  5. Click Save.

Edit your search form code to narrow your search results

To narrow your storefront search results:

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Layout directory, click theme.liquid.

  3. To locate your search form code, find the following text:

    /search
    
  4. Between the opening <form> tag and closing </form> tag, paste the following form field:

    <input type="hidden" name="type" value="product">
    

    The above code will restrict your search results to show only products. If you want to narrow your search results to show a different type of result, then replace value="product" with one of the following:

    • value="page" to include only pages
    • value="article" to include only blog articles

    Your code should look something like this (the exact HTML used for your search form may be different depending on your theme):

    <label class="form-label--hidden">
      <span class="visuallyhidden">{{ 'general.search.placeholder' | t }}</span>
    </label>
    <form action="/search" method="get" class="input-group search-bar" role="search">
      <input type="hidden" name="type" value="product">
      <input type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" class="input-group-field" aria-label="{{ 'general.search.placeholder' | t }}">
      <span class="input-group-btn">
        <button type="submit" class="btn icon-fallback-text">
          <span class="icon icon-search" aria-hidden="true"></span>
          <span class="fallback-text">{{ 'general.search.submit' | t }}</span>
        </button>
      </span>
    </form>
    
  5. Click Save.

  6. In the Templates directory, click search.liquid.

  7. Repeat steps 4 through 6.

Want to discuss this page?

Visit the Shopify Community