Open navigation

Integration Steps for BigCommerce

Automated Integration

We are pleased to announce that the Klevu Smart Recommendations can be enabled directly from within the BigCommerce App. Simply navigate to the “Integrate Klevu” area of your Klevu App, where you would normally find the options to integrate search into your theme, and you will find two options: 

  • Automated Template Integration 
  • Manual Template Integration 

For Automated Integration, clicking on Integrate will present you with some more options:

Klevu Smart Recommendations is a paid add-on, so if you do not see the section in your admin panel, please contact Klevu Support  who will be able to either enable this for you or discuss your plan.

Check the “Smart Recommendations” checkbox and click on Start Integration to begin the process. Klevu will then download your theme and create a copy, and apply the prerequisite scripts to your theme. After which point, you only need  to add the Klevu DIV  wherever you would like a Recommendation banner to appear. If you prefer to perform these steps manually, you can refer to the guide below.

If you have previously integrated Search or Category Merchandising, you do not need to check those boxes again. You only need to check the services you would like to add. Leaving them unchecked will not remove them from your theme.


Manual Integration

Please note that whilst the modifications detailed in this guide are quite minor, they do involve modifying the HTML/JavaScript code of your website, so you may prefer to hand this task over to your frontend developer.

This document will guide you through the platform specific aspects of integrating Klevu Recommendations with your BigCommerce store. Once you are finished with this guide, please refer to the generic instructions for other aspects like creating a banner and adding it to your store, editing a banner, etc.

To include the core Klevu JS Libraries required, edit your theme -> templates -> layout -> base.html and add the JS inclusion scripts referenced in the instructions below. Add the following to the end of the <head/> section of your template.

<script type="text/javascript">
{{#if page_type '===' 'category'}}
var klevu_page_meta = {
'pageType': "category",
'categoryName':'{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}',
'categoryUrl': '{{category.url}}',
};
{{/if}}
{{#if page_type '===' 'product'}}
var klevu_page_meta = {
"pageType": "pdp",
"itemName": "{{product.title}}",
"itemUrl": "{{product.url}}",
"itemId": "{{product.id}}",
"itemGroupId": "{{product.id}}",
"itemSalePrice": "{{#if product.price.with_tax}}{{product.price.with_tax.value}}{{else}}{{product.price.without_tax.value}}{{/if}}",
"itemCurrency": "{{currency_selector.active_currency_code}}"
};
{{/if}}
{{#if page_type '===' 'cart'}}
var cartRecords = [];
{{#each cart.items}}
{{#if type '===' 'Item'}}
cartRecords.push({ 'itemId':'','itemGroupId': {{product_id}} });
{{/if}}
{{/each}}
var klevu_page_meta = {
'pageType': "cart",
'cartRecords': cartRecords
};
{{/if}}
</script>
<script src="https://js.klevu.com/core/v2/klevu.js"></script>
<script src="https://js.klevu.com/recs/v2/klevu-recs.js"></script>
<script type="text/javascript">
klevu.interactive(function () {
var options = {
powerUp: {
recsModule: true
},
recs: {
apiKey: 'klevu-12345'
},
analytics: {
apiKey: 'klevu-12345'
}
};
klevu(options);
});
</script>

Please replace klevu-12345 with your own Klevu JS API Key. Also, for any customers already using Klevu JavaScript Library (aka JSv2) you may already have the klevu.js library included, and a klevu.interactive initialisation. If so, please merge the powerUp and recs nodes into that existing implementation you already have. The minimum version of Klevu JS Library for Klevu Recommendations to work correctly is 2.3.5+.

Note: According to the code added above, 

"itemSalePrice": "{{#if product.price.with_tax}}{{product.price.with_tax.value}}{{else}}{{product.price.without_tax.value}}{{/if}}"

it will render price.with_tax.value if present else will render price.without_tax.value.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.