Adding a Landing Page to Shopify

If you are not familiar with Shopify Theme management, we recommend you contact your Shopify Theme developer to complete these steps for you. We also recommend you take a backup of your theme before making any changes.

These instructions assume you have already created a Klevu Landing Page using our UI via the Klevu Merchant Centre. The process involves three steps:

  1. Add some assets to your Shopify Theme.
  2. Create a new Shopify Page Template with these assets.
  3. Create a new Shopify Page to display your Landing Page.

The below video gives you an idea how easy the integration process is. Please watch this video but when you integrate for yourself, please follow the steps outlined within this page which will reflect the most recent changes required.

Add files to your Shopify Theme

You will already have a Page Builder ZIP file which contains the three files that must be added to your Shopify Theme. Do this via Shopify Admin > Online Store > Themes > Live Theme > Actions > Edit Code.

When you upload these files to Shopify it is up to you how you name them, however we recommend a naming convention to easily identify them in the future by including the Page ID, eg: klevu-lpb-123.js, where 123 is the Page ID.

  • scripts.js: A JavaScript file, containing the functionality required for the Landing Page.
    • Add this as a Shopify Asset klevu-lpb-123.js.
  • styles.css: A CSS file, containing some basic CSS for styling your Landing Page.
    • Add this as a Shopify Asset klevu-lpb-123.css.
  • templates.tpl: A Micro-Template file, containing the HTML for rendering your Landing Page.
    • This could be a Shopify Snippet klevu-lpb-123.liquid, however see the note below.

Note that by default, templates.tpl is just for reference. A base64 encoded version of the HTML found in templates.tpl is already included within scripts.js, eg. setTemplate( “f00b4rbase64encoded” , “template-name” , false );. If you want to override any of the HTML micro-templates, please see the section at the bottom of this page.

Create a Shopify Page Template

Once these assets have been uploaded to your Theme, next create a Shopify Template liquid file to tie them all together, eg: page.klevu-lpb-123.liquid

<!-- Klevu PageBuilder Files -->
<script src="{{ 'klevu-lpb-123.js' | asset_url }}" ></script>
{{ 'klevu-lpb-123.css' | asset_url | stylesheet_tag }}

<!-- Note: Omit this next include if your scripts.js
     already has base64 encoded versions of the templates -->
{% include "klevu-lpb-123" %}

<!-- Placeholder where the content will be injected -->
<div class="klevuLanding"></div>

Power-up Klevu on every page

For performance reasons the analytics calls to Klevu which need to be associated to a product click or an add to cart request do not fire until you reach the target page. For this reason, the Klevu Library must be included on every page it is possible to exit the landing page towards via a click.

Here we will include the Klevu power-up on every page, so no matter what functionality you add to your landing page, any tracking events will still be fired. Create a new Snippet: klevu-lpb-settings.liquid

<!-- Klevu JavaScript Library -->
<script src="//js.klevu.com/klevu-js-v2/2.2/klevu.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="//js.klevu.com/klevu-js-v2/2.2/klevu.css">

<!--
    Initialisation script.
    If you are already using Klevu JS Library on your website,
    and have a klevu-settings.js file included on every page,
    please merge the below with your existing initialisation.
-->
<script type="text/javascript">
    /**
     * Power-up Klevu library for your store.
     */
    klevu.interactive(function() {
        var options = {
            url : {
                // replace with your own search endpoint
                search: klevu.settings.url.protocol + '//eucs18v2.ksearchnet.com/cs/v2/search',
                protocolFull: klevu.settings.url.protocol + "//"
            },
            localSettings: true,
            search : {
                // replace with your own API Key
                apiKey: "klevu-12345678901234567"
            },
            analytics: {
                // replace with your own API Key
                apiKey: "klevu-12345678901234567"
            }
        };

        klevu(options);
    });

    /**
     * Also power up Analytics to handle clicks
     * which exit away from the Page Builder on
     * to another page, eg. Cart or Product Page.
     */
    klevu.coreEvent.build({
        name: "analyticsPowerUp",
        fire: function () {
            if (
                !klevu.getSetting(klevu.settings, "settings.localSettings", false) ||
                !klevu.analytics.build
            ) {
                return false;
            }
            return true;
        },
        maxCount: 500,
        delay: 30
    });
    klevu.coreEvent.attach("analyticsPowerUp", {
        name: "attachSendRequestEvent",
        fire: function () {
            klevu.analyticsUtil.base.sendAnalyticsEventsFromStorage(
                klevu.analyticsUtil.base.storage.dictionary,
                klevu.analyticsUtil.base.storage.term
            );

            klevu.analyticsUtil.base.sendAnalyticsEventsFromStorage(
                klevu.analyticsUtil.base.storage.dictionary,
                klevu.analyticsUtil.base.storage.click
            );

            klevu.analyticsUtil.base.sendAnalyticsEventsFromStorage(
                klevu.analyticsUtil.base.storage.dictionary,
                klevu.analyticsUtil.base.storage.categoryClick
            );
        }
    });
</script>

Then include this Snippet within the <head/> section of your theme.liquid:

<head>
    ...

    <!-- Klevu JavaScript Library: Page Builder -->
    {% include "klevu-lpb-settings" %}

    ...
</head>

Create a Shopify Page

Next create a new Shopify Page and select page.klevu-lpb-123.liquid as the template for that page. The URL you assign to this Page is the URL that your Klevu Landing Page can be accessed from by your customers.

Once you save this Page, your Landing Page will be live on the URL you specified.

Overriding Styles, Templates and JavaScript Logic (optional)

Should you wish to modify the CSS of the landing page, you should override using standard CSS approach rather than modifying the CSS included in the ZIP file. This will make future updates to your page easier.

Similarly for HTML or JavaScript modifications, you can override using the method below. The following is an example of an override to modify the ‘Quick View’ button and change how the ‘Add to Cart’ functionality works.

First create a new Shopify Asset, using the same process as described above, called klevu-lpb-123-overrides.js with the following contents:

klevu.coreEvent.attach("setRemoteConfigLandingPage123", {
    name: "page-specific-overrides-123",
    fire: function () {
        // update the template that renders the 'quick view' button
        // to pull from an element with ID 'idOfContainerWithNewHtml'
        klevu.search.landingPage123.getScope().template.setTemplate( klevu.dom.helpers.getHTML("#idOfContainerWithNewHtml") , "product-quick-view-landing" , true );

        // add to cart override with Shopify specific functionality
        if (!klevu.isUndefined(klevu.search.modules.addToCart)) {
            klevu.search.modules.addToCart.base.sendAddToCartRequest = function (variantId, quantity) {
                if (klevu.isUndefined(quantity)) quantity = 1;
                document.location.href = "/cart/add/?id=" + variantId + "&amp;quantity=" + quantity;
            };
        }
    }
});

Finally include this override in your Page Template, immediately after the original scripts.js file inclusion:

...

<!-- Klevu PageBuilder JavaScript -->
<script src="{{ 'klevu-lpb-123.js' | asset_url }}" ></script>
<script src="{{ 'klevu-lpb-123-overrides.js' | asset_url }}" ></script>

...

Once your Page Template is saved, your overrides will be active on your Page Builder Page.