Automated Integration
We are pleased to announce that the Klevu Smart Recommendations can be enabled directly from within the Shopify App. Simply navigate to the settings area of your Klevu App, where you would normally find the settings to enable or disable quick search, and you will find a new section for Recommendations.
When changing this setting to Enable and clicking the Save button, Klevu will automatically inject the prerequisite scripts into your active 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.
Manual Integration
This document will guide you through the platform specific aspects of integrating Klevu Recommendations with your Shopify 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.liquid 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 template == 'collection'%}
var klevu_page_meta = {
"pageType": "category",
"categoryName": "{{collection.title | escape }}",
"categoryUrl": "{{shop.url}}{{collection.url}}",
};
{% endif %}
{% if template == 'product'%}
var klevu_page_meta = {
"pageType": "pdp",
"itemName": "{{product.title | escape }}",
"itemUrl": "{{shop.url}}{{ product.url}}",
"itemId": "{{product.selected_or_first_available_variant.id}}",
"itemGroupId": "{{product.id}}",
"itemSalePrice": "{{product.price | money_without_currency}}",
"itemCurrency": "{{shop.currency}}"
};
{% endif %}
{% if template == 'cart'%}
var cartRecords = [];
{% for item in cart.items %}
cartRecords.push({'itemId': {{item.variant_id}} ,'itemGroupId': {{item.product_id}} });
{% endfor %}
var klevu_page_meta = {
"pageType": "cart",
"cartRecords": cartRecords
};
{% endif %}
</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+.