---
title: BigCommerce
slug: template-js/get-started-with-bigcommerce
docTags: 
createdAt: 2022-06-02T13:08:26.000Z
---



There are two options for implementing the Klevu Template JS on BigCommerce:

1. Automated via the Klevu BigCommerce App (available from the BigCommerce Marketplace)
2. Manual implementation of the files into the BigCommerce Theme

Manual install may be required for the following conditions:

- Your BigCommerce Theme has been modified or is otherwise preventing the Klevu App automation
- You are installing Klevu on a preview theme

## Marketplace App

If you are using a version of Klevu app installed *before* December 2021, please contact support for information about migrating to Klevu TemplateJS.

You can find detailed installation steps on the Klevu Knowledge base article for [BigCommerce Integration](https://help.klevu.com/support/solutions/articles/5000871271-integration-steps-for-bigcommerce)

Once installed, the template JS resources will be available as placed automatically by the <font color="#eb144c"> </font>available in the BigCommerce Marketplace.

The following is a summary of automated steps as part of the Big Commerce App<font color="#eb144c"> </font>installation:&#x20;

1. Places code reference files into ***templates/components/klevu***
   - head-scripts.html (main reference)
   - klevu-js-init.html (config/options)
   - klevu-add-to-cart.html (button functionality)
   - klevu-search-theme.html (search results)
   - klevu-catnav-theme.html (category results - if applicable)
   - klevu-recommendations.html (recommendations core - if applicable)
   - klevu-metadata.html (recommendations support - if applicable)
2. Adds core include to ***layout/base.html***
3. Adds display target \<div> in ***pages/search.html***
4. Adds display target \<div> in ***pages/category.html&#x20;***(if applicable)
5. Authorizes BC API for hourly Catalog Synchronization



## Manual Installation

If your BigCommerce Theme has been modified or is otherwise preventing the above automation, you can manually install Klevu Template JS using the steps below, or any variation of it that fits your architecture

:::hint{type="danger"}
We recommend implementing these steps on an unpublished theme to avoid any unforeseen conflicts with the live site.
:::



### Core and Configuration

Please see [Quickstart : Smart Search](docId\:AMGa2LZ3adsU1tVJxhg1K) for detailed instructions on incorporating core JavaScript and `klevu.interactive`

****

**Include the core files according to page\_type**

```javascript
<!-- 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}}
```

****

**Configure Klevu Options to fit your theme**

```javascript
<!-- Initialise Klevu for your store -->
<script type="text/javascript">
    klevu.interactive(function () {
        var options = {
            url : {
                protocol: 'https:',
                queryParam: 'search_query',
                landing: '/search.php', // your BigCommerce Search Results Page
                search: 'https://eucsXXXv2.ksearchnet.com/cs/v2/search' // your Klevu APIv2 Search URL + endpoint path
            },
            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>
```

:::hint{type="info"}
Note:  the `klevu.interactive` configurations should be set globally.
e.g. ***templates > layout > base.html***
:::

Here are common BigCommerce configuration values. Please adjust as needed to fit your specific theme.

- **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.
- **queryParam: 'search\_query'**
  This is the URL parameter used by the SRLP to fetch the search results.
- **Search URL: 'https\://eucsXXXv2.ksearchnet.com/cs/v2/search'**
  This is your Klevu APIv2 Cloud Search URL + endpoint path. You can find the base domain from Shop Info within your Klevu Merchant Center.
- **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-XXXXXXXXXXXXX'**
  This is your public Klevu JS API Key. You can find this from Shop Info within your Klevu Merchant Center.

See : [Configuration](docId\:eL9qchgzNERsiaeg_E-Lu)  section for more detail on these elements.



### QuickSearch

Ensure the `klevu.interactive : options` value for `searchBoxSelector` matches the handle used by the HTML search \<input> field(s) within your theme.&#x20;

See :  [Quickstart : Smart Search](docId\:AMGa2LZ3adsU1tVJxhg1K)  for more details on incorporating quicksearch



### Search Result Landing Page

Next, update the SRLP to use Klevu Template JS instead of native search results.&#x20;

Within your theme editor open ***templates > pages > search.html**.*

**Option 1 :** Replace the entire contents of the file with the Klevu landing grid

e.g.

:::BlockQuote
\{\{#partial "page"}}
\<section class="page">
&#x20;   \<div class="klevuLanding">\</div>
\</section>
\{\{/partial}}
\{\{> layout/base}}
:::

**Option 2 :** Keep any page components you need by placing the `klevuLanding` target div where the search results are to be displayed.

:::BlockQuote
\<div class="klevuLanding">\</div>
:::



### Category Landing page

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

Within your theme editor open ***templates > pages > category.html***.

**Option 1 :** Replace the entire contents of the file with the Klevu landing grid

e.g.

:::BlockQuote
\{\{#partial "page"}}
\<section class="page">
&#x20;   \<div class="klevuLanding">\</div>
\</section>
\{\{/partial}}
\{\{> layout/base}}
:::

**Option 2 :** Keep any page components you need by placing the `klevuLanding` target div where the product listing results are to be displayed.

:::BlockQuote
\<div class="klevuLanding">\</div>
:::



### Recommendations

Klevu Smart Recommendations integration options are covered in the Kowledgebase guide: [Smart Recommendations Integration Guide for BigCommerce](https://help.klevu.com/support/solutions/articles/5000871324-integration-steps-for-bigcommerce)