Getting Started
Quickstart : Smart Recommendations

3min
App/Plugin Integration
If you are integrating Smart Recommendations on a platform using one of the supported apps or extensions, please consult the applicable Knowledgebase article for specific instructions on implementation.
Shopify - Integration Guide﻿
Magento - Integration Guide﻿
BigCommerce - Integration Guide﻿
﻿
Basic Integration
Below we have highlighted the generic skeleton which will work on any platform. Please ensure these elements are included within the <head/> of every page of your website where you wish to show Klevu Recommendation banners.
Please refer to the Recommendations Getting Started guide for other aspects like creating a banner and adding it to your store, editing a banner, etc. 
Any customers already using Klevu JavaScript Library (aka JSv2) may already have the klevu.js library included
HTML
<html>
<head>
        <script type="text/javascript">
        // use your own logic to determine the current page type
        var page_type = 'REPLACE ME!';

        if (page_type == 'category') {
            var klevu_page_meta = {
                'pageType': "category",

                // If your catalogue supports category hierarchy, please provide the full path of category names separated by semi-colon. For example Mens > Shoes > Sneakers would be Mens;Shoes;Sneakers
                'categoryName': 'REPLACE ME!',

                // The full URL to the category. For example https://your.store.com/mens/shoes/sneakers
                'categoryUrl': 'REPLACE ME!'
            };
        }
        if (page_type == 'product') {
            var klevu_page_meta  = {
                "pageType": "pdp",

                // The name of the current product
                "itemName": "REPLACE ME!",

                // The full URL to the product. For example https://your.store.com/mens/shoes/sneakers
                "itemUrl": "REPLACE ME!",

                // The ID you specify here must match the one provided to Klevu as <id/>
                "itemId": "REPLACE ME!",

                // The ID you specify here must match the one provided to Klevu as <item_group_id/>
                "itemGroupId": "REPLACE ME!",

                // The final selling price of the product, eg. 123.45
                "itemSalePrice": "REPLACE ME!",

                // The currency code of the above price, eg. USD
                "itemCurrency": "REPLACE ME!"
            };
        }
        if (page_type == 'cart') {
            var cartRecords = [];

            // Repeat this block for each item the customer has in their cart
            cartRecords.push({'itemId': 'REPLACE ME!' ,'itemGroupId': 'REPLACE ME!'});

            var klevu_page_meta = {
                'pageType': "cart",
                'cartRecords': cartRecords
            };
        }
    </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'
                }
            };
            klevu(options);
        });

    </script>
</head>
<body>
    <div class="klevu-recs" id="ABC-123"></div>
</body>
</html>
<html>
<head>
        <script type="text/javascript">
        // use your own logic to determine the current page type
        var page_type = 'REPLACE ME!';

        if (page_type == 'category') {
            var klevu_page_meta = {
                'pageType': "category",

                // If your catalogue supports category hierarchy, please provide the full path of category names separated by semi-colon. For example Mens > Shoes > Sneakers would be Mens;Shoes;Sneakers
                'categoryName': 'REPLACE ME!',

                // The full URL to the category. For example https://your.store.com/mens/shoes/sneakers
                'categoryUrl': 'REPLACE ME!'
            };
        }
        if (page_type == 'product') {
            var klevu_page_meta  = {
                "pageType": "pdp",

                // The name of the current product
                "itemName": "REPLACE ME!",

                // The full URL to the product. For example https://your.store.com/mens/shoes/sneakers
                "itemUrl": "REPLACE ME!",

                // The ID you specify here must match the one provided to Klevu as <id/>
                "itemId": "REPLACE ME!",

                // The ID you specify here must match the one provided to Klevu as <item_group_id/>
                "itemGroupId": "REPLACE ME!",

                // The final selling price of the product, eg. 123.45
                "itemSalePrice": "REPLACE ME!",

                // The currency code of the above price, eg. USD
                "itemCurrency": "REPLACE ME!"
            };
        }
        if (page_type == 'cart') {
            var cartRecords = [];

            // Repeat this block for each item the customer has in their cart
            cartRecords.push({'itemId': 'REPLACE ME!' ,'itemGroupId': 'REPLACE ME!'});

            var klevu_page_meta = {
                'pageType': "cart",
                'cartRecords': cartRecords
            };
        }
    </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'
                }
            };
            klevu(options);
        });

    </script>
</head>
<body>
    <div class="klevu-recs" id="ABC-123"></div>
</body>
</html>
﻿
﻿
Recommendation Templates
Recommendations templates are managed within the store Klevu Merchant Center
Please refer to the Recommendations Getting Started guide for aspects like creating a banner and adding it to your store, editing a banner, etc. 
Updated 30 Oct 2023
Did this page help you?
Quickstart : Smart Category Merchandising
Shopify