Integration Steps for Shopify

Automated Integration

Klevu Smart Recommendations can be enabled via the Klevu Javascript embed in the Shopify Theme Editor. You can access this either via the Customize button for your chosen theme via the Shopify Admin Themes section (Sales Channels > Online Store > Themes) or via the Integrate section within the Klevu App.

• Open the Klevu App (Apps > Klevu - AI Search & Filter)
• Navigate to the Integrate section
• Select the theme on which you wish to enable Smart Recommendations
• Click Embed under Configure Klevu Solutions > Embed Klevu JS
  
• Enable the Klevu Javascript embed and ensure you have also checked the Javascript for Smart Recommendations option.
  
• Save your theme

Klevu will now automatically output the prerequisite scripts on the storefront when using the theme you selected. 

At this point, you can either 

• Manually add the Klevu DIV wherever you would like a Recommendations banner to appear, or 
• Embed Recommendation banners directly into templates through the Shopify Theme Editor.

See our integration guide for more details on adding blocks to 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 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+.

Manual Integration

For manual integration into your theme, please refer to our integration guides here.