Adding Hyper Search to your site

To add Hyper Search to your storefront you will need to make some small modifications to your BigCommerce theme to let Hyper Search know where to add the search input and search results.

Add the search box to the header

Add the following HTML to your theme where you would like the search input to be shown.

<div class="s48_hypersearch"></div>

We recommend replacing the original search input with this snippet. In the Cornerstone theme, this would be in templates/components/common/quick-search.html:

<div class="container">
  <div class="s48_hypersearch"></div>
</div>

Replacing the search results

To display Hyper Search on the search results page, you will need to add the following HTML to your theme:

<div id="s48_hypersearch-results"></div>

We recommend replacing the original search results with this snippet. In the Cornerstone theme, this would be in templates/pages/search.html

---
product_results:
    limit: {{theme_settings.searchpage_products_per_page}}
---
{{inject 'categoryTree' forms.search.category_options}}
{{inject 'searchProductsPerPage' theme_settings.searchpage_products_per_page}}
{{inject 'searchResultsCount' (lang 'search.results.count' count=result_count search_query=(sanitize forms.search.query))}}
{{#partial "head"}}
  {{#if pagination.product_results.previous}}
    <link rel="prev" href="{{pagination.product_results.previous}}">
  {{/if}}
  {{#if pagination.product_results.next}}
    <link rel="next" href="{{pagination.product_results.next}}">
  {{/if}}
{{/partial}}
​
{{#partial "page"}}
{{{ stylesheet '/assets/scss/vendor/jstree/style.css' }}}
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
<section class="page">
  <div id="s48_hypersearch-results"></div>
  {{{region name="search_below_content"}}}
</section>
{{/partial}}
{{> layout/base}}

You're almost there; now enable Hyper Seach

Once you've made these theme changes, you can enable Hyper Search within Settings > Storefront in the app. This will add the required JavaScript and enable Hyper Search on your store.

Customizing the product grid template

When using our out-of-the-box storefront integration, it's common to want to change the HTML of the product cards to more closely match that of your own theme.

This can be achieved by going to Settings > Storefront and viewing the Developer tab.

The product card templates are in JSX format. And so fields can be output with braces, e.g. {product.name}

Available product fields

The fields available by default are:

https://cdn11.bigcommerce.com/s-nqivp06qsb/products/113/images/376/5060758402902__89412__02605.1704205148.220.290.jpg?c=1 

Available product functions

We also provide a selection of helper functions. Predominantly, these are to help show pricing information in the correct currency.

  const options = {
    lazyLoad: true, // enable lazy loading
    width: '320w', // default width (from srset option below)
    rollover: false, // enable secondary image on roll over
    srcsets: { // list of responsive image sizes
      '80w': '80w',
      '160w': '160w',
      '320w': '320w',
      '640w': '640w',
      '960w': '960w',
      '1280w': '1280w',
      '1920w': '1920w',
      '2560w': '2560w'
    }
  }
  

Custom Integrations

If you would prefer, we provide the option to implement a custom storefront experience. Under the hood, our app is powered by Typesense and so you can consider their documentation on building search UIs to consider how this might be achieved.

Please get in touch for more information & support on this approach.