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-suggest"></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-suggest"></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 class="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="nav">

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

</section>

{{/partial}}

{{> layout/base}}

Adding instant search results

The step is required if you would like to show search results as you type rather than redirecting to the search results page.

You will need to add the following HTML element to the body of your page, ideally in the footer.

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

In the Cornerstone theme, this would be at the end of templates/components/common/footer.html

...

</footer>

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


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 under the Theme section of Settings > Storefront.

For further design options, see customizing the design.

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us