Bigcommerce

Search

General #

To incorporate your embed code for either Live Search or Search Page, you’ll need to access your theme files. To do this, follow the path Theme > theme files > my themes > choose > edit themes > find files

  • First, create your Live Search Design and Content in my.clerk.io.

  • In your header file or live-search header file (likely header.html , or, in this example, header-search.html), the Live Search embed code should be placed.

  • Make sure to update the placeholder within “data-instant-search” to include the query class or ID used in your webshop (in this example, “#search_query_adv”).

Search Page #

  • First, create your Search Page Design and Content in my.clerk.io.

  • In your search page file (likely search.html), the Search Page embed code should be placed.

  • Make sure to update the placeholder within “data-query” to include the query used in your search results URL (in this example, “forms.search.query”).

Facets #

Clerk.js comes with built in support for Faceted Search.

Any product attributes you send to Clerk.io can be used as part of the Faceted Search.

Let’s start with a quick example:

<div id="clerk-search-filters"></div>
<div id="clerk-search-results"></div>

<span
  class="clerk"

  data-template="@search-page"
  data-query="shoes"
  data-offset="0"

  data-target="#clerk-search-results"

  data-facets-target="#clerk-search-filters"
  data-facets-attributes='["categories","manufacturer","gender"]'
  data-facets-multiselect-attributes='["categories","manufacturer"]'
  data-facets-titles='{"categories":"Categories","manufacturer":"Brand","gender":"Sex"}'
  data-facets-design='12234'>
</span>

The data-facets- parts allow you to enable and customise the Faceted Search.

By adding these to your Search Page embed code, facets will be displayed as soon as results are shown.

Below, you can see what each a part does:

Styling Facets #

Facets comes with a simple styling out of the box. To alter this, simply use CSS selectors (more about facet styling here, to add any custom styling.

Adding Facets to your BigCommerce Store #

To add facets to your Search Page within your BigCommerce webshop, simply add the appropriate data attributes to your Search Page embed code which you copied into the file where your Search Page lives, likely search.html.

For example:

You can also add any styling CSS to the same file. Make sure to surround all of the facets CSS withtags: