Quick Start: BigCommerce

This tutorial will guide you through adding Klevu Theme to your BigCommerce store. We will be making some small changes to your BigCommerce Theme, so please navigate to Storefront > My Themes, find the theme you wish to edit, then select Edit Theme Files.

templates > layout > base.html

We will be including the Klevu Quick Search Theme on every page, since that will be used to power the quick search bar. Then, based on some simple conditions, we will also include the Klevu Search Results Theme and optionally the Klevu Category Theme.

Add the following within <head/>, near the top so it will begin loading as quickly as possible after the customer loads your website:

Tip: You may wish to try this on an unpublished theme first, to make sure everything works as you expect.

<!-- Include Klevu JavaScript Library -->
<script src="https://js.klevu.com/core/v2/klevu.js"></script>

<!-- Include Quick Search Theme -->
<script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

{{#if page_type '===' 'search'}}
<!-- Include Search Results Landing Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/search-results-page.js"></script>
{{/if}}

{{#if page_type '===' 'category'}}
<!-- Include Category Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/category-page.js"></script>
<script type="text/javascript">
    var klevu_pageCategory = "{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}";
    sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
</script>
{{/if}}

<!-- Initialise Klevu for your store -->
<script type="text/javascript">
    klevu.interactive(function () {
        var options = {
            url : {
                landing: '/search.php', // your BigCommerce Search Results Page
                search: klevu.settings.url.protocol
                    + '//eucsXXXv2.ksearchnet.com/cs/v2/search' // your Klevu APIv2 Search URL
            },
            search: {
                minChars: 0,
                searchBoxSelector: "#search_query", // your BigCommerce Search Input
                apiKey: "klevu-XXX" // your Klevu JS API Key
            },
            analytics: {
                apiKey: 'klevu-XXX' // your Klevu JS API Key
            }
        };
        klevu(options);
    });
</script>

There are some small modifications you will need to make to the above code in order to use your Klevu credentials:

  • Landing Page: ‘/search.php’
    This is the URL that we will send customers to when they use your search bar to access the full search results.
  • Search URL: eucsXXXv2.ksearchnet.com/cs/v2/search
    This is your Klevu APIv2 Cloud Search URL. You can find this from Shop Info within your Klevu Merchant Centre.
  • Search Box Selector: “#search_query”
    This is the class or ID to locate your BigCommerce theme’s input search box. You may need to change this depending on your theme.
  • Api Key: “klevu-XXX”
    This is your public Klevu JS API Key. You can find this from Shop Info within your Klevu Merchant Centre.

Important: If you are not using Klevu Smart Category Merchandising to power your BigCommerce Collection pages, please omit the section {{#if page_type '===' 'category'}}.

Search Results Page

Next we need to update the SRLP to use Klevu Theme instead of native search results. Within your theme editor go to templates > pages > search.html. Replace the entire template with the following:

{{#partial "page"}}
<section class="page">
    <div class="klevuLanding klevuTarget"></div>
</section>
{{/partial}}
{{> layout/base}}

Tip: The only important part here for Klevu to function correctly is <div class="klevuLanding"></div>. The rest of the code is to align with your BigCommerce theme, so feel free to edit accordingly.

Category Pages

This section is only applicable if you have opted for the Klevu add-on to also power your BigCommerce Collection Pages: Klevu Category Merchandising.

Edit your BigCommerce Theme once more and navigate to templates > pages > category.html. We will edit this template in the same manner we did for search.html:

{{#partial "page"}}
<section class="page">
    <div class="klevuLanding klevuTarget"></div>
</section>
{{/partial}}
{{> layout/base}}

Tip: The only important part here for Klevu to function correctly is <div class="klevuLanding"></div>. The rest of the code is to align with your BigCommerce theme, so feel free to edit accordingly.

Try it!

That’s all of the changes complete. Once saved, you can view your frontend (or preview your unpublished theme) to see Klevu powered quick search, search results and collection pages on your BigCommerce store!

Klevu Quick Search on BigCommerce

Help!

If you have any problems, please feel free to reach out to us at community.klevu.com, where you can get help from the Klevu JavaScript development team directly.