Adding a Landing Page to BigCommerce

If you are not familiar with BigCommerce Theme management, we recommend you contact your BigCommerce 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 four steps:

  1. Download your active BigCommerce theme.
  2. Add files to your BigCommerce theme.
  3. Use stencil bundle to package, upload and apply your theme.
  4. Create a new BigCommerce 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.

Download your active BigCommerce Theme

BigCommerce does not allow you to add new files to your theme via the Admin panel, so in order to add the JavaScript, HTML and CSS files required for Klevu Landing Pages to work, we must first download the active theme so we can make changes to it.

We will then be using the BigCommerce Stencil CLI tool to re-package the theme. If you are not familiar with this process, please request support from your BigCommerce Theme developer.

Add files to your BigCommerce Theme

You will already have a Landing Page ZIP file which contains the three files that must be added to your BigCommerce Theme. The file locations below are just a guide, but we recommend a convention of lpb-123 to represent “Landing Page Builder” plus the ID of the particular page you are integrating.

  • scripts.js: A JavaScript file, containing the functionality required for the Landing Page.
    • Add this to assets/klevu/lpb-123/scripts.js.
  • styles.css: A CSS file, containing some basic CSS for styling your Landing Page.
    • Add this to assets/klevu/lpb-123/styles.css.
  • templates.tpl: A Micro-Template file, containing the HTML for rendering your Landing Page.
    • You could add this to templates/klevu/lpb-123/templates.html, 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.

Next we need to create a BigCommerce Page template that we can use to tie the above assets together. We recommend the following naming convention: templates/pages/custom/page/klevu-lpb-123.html

{{#partial "page"}}

{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}

<main class="page">
    {{#unless theme_settings.hide_page_heading }}
    <h1 class="page-heading">{{ page.title }}</h1>
    {{/unless}}

    {{#if page.sub_pages}}
    <nav class="navBar navBar--sub">
        <ul class="navBar-section account-navigation">
            {{#each page.sub_pages}}
            <li class="navBar-item"><a class="navBar-action" href="{{url}}">{{title}}</a></li>
            {{/each}}
        </ul>
    </nav>
    {{/if}}

    <!-- Klevu PageBuilder Files -->
    <script src="{{cdn '/assets/klevu/lpb-123/scripts.js'}}" ></script>
    {{{stylesheet '/assets/klevu/lpb-123/styles.css'}}}

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

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

{{/partial}}

{{> layout/base}}

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 template file: templates/klevu/lpb-settings.html

<!-- 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 templates/layout/base.html:

<head>
    ...

    <!-- Klevu JavaScript Library: Page Builder -->
    {{> klevu/lpb-settings }}

    ...
</head>

Build the theme using Stencil CLI

Now that you have made the necessary changes to your theme, re-package as per your normal process using npm install and stencil bundle.

Upload the updated theme to BigCommerce and apply it as your active theme.

Create a BigCommerce Page

Next create a new BigCommerce Page and select klevu-lpb-123 as the template for that page. The URL you assign to this Page is the URL that your 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.

Using the same process as described above, add a new BigCommerce asset to your theme called assets/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 BigCommerce specific functionality
        if (!klevu.isUndefined(klevu.search.modules.addToCart)) {
            klevu.search.modules.addToCart.base.sendAddToCartRequest = function (variantId, quantity) {
                document.location.href = "/cart.php?action=add&amp;product_id=" + variantId;
            };
        }
    }
});

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

...

<!-- Klevu PageBuilder Files -->
<script src="{{cdn '/assets/klevu/lpb-123/scripts.js'}}" ></script>
<script src="{{cdn '/assets/klevu/lpb-123/overrides.js'}}" ></script>

...

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