Landing Page Builder

This feature is available as part of Premium, Premium+ or Enterprise plan.
It is currently available as Private Beta, so to enable this feature please talk to your Klevu account manager or get in touch with support@klevu.com.

Introduction

The feature provides an interface that allows merchants to create and export all the code required to integrate dynamic product-based landing pages into all the major e-commerce platforms without the initial need for a developer or technical skillset.

Once you have the code generated by the Klevu interface you can then pass it onto your developers for platform integration. This is particularly relevant for BigCommerce and Magento where code cannot be added directly via the admin panel.

It is designed to provide maximum flexibility for designers, developers and merchandisers alike.

Getting Started

Before using the landing page feature, the first step is to ensure that it is enabled within your Klevu Merchant Center (KMC).

You can check to see if it is already active under the ‘Promotions’ tab. If it is not enabled then please talk to your Klevu account manager or get in touch with support@klevu.com.

Once enabled you can now begin building landing pages by selecting “Launch Landing Page Builder”:

landing-page-builder-kmc

This will launch a new tab and you can begin configuration.

In this knowledge base article, we will run through the steps required to build, edit and export a new landing page.

How It Works

The Landing Page Builder has multiple capabilities including the ability to select products from your catalogue using conditions, pin products, exclude products as well as maintaining multiple landing pages within the same management area.

Once you have configured and built a landing page, we provide a downloadable zip file that contains all the necessary assets required to integrate with any of the major eCommerce platforms including Shopify, Magento and BigCommerce.

Note: Once the page has been initially created you should seek the help of a developer to integrate the code assets into your site to ensure proper version control procedures are followed.

Creating a New Landing Page

Once you have launched the Landing Page Builder, the first step is to create a new landing page.

Simply click on the “Create new landing page” button:

image2

Now that you have an initial landing page created, you have a number of options that allow you to design the landing page easily using the Klevu interface. There are a number of options and configurations outlined below.

Creating a Page Name

You can configure a title for your landing page by selecting “Settings” from the left-hand side menu, simply add a title. This is a required configuration in order to be able to save and export the page once you are happy:

image4

Loading Products Into Your Landing Page

The Landing Page Builder provides two mechanisms for loading products into your layout:

  • Via a filter query
  • Via hand-picked searches

Filter Query

One of the key features of the Klevu Landing Page Builder is the ability to load products onto the page based on various criteria. It allows for dynamic content based on whichever conditions you, the merchant choose to specify.

To get started, turn your attention to the left-hand side panel query builder. This section allows you to configure the parameters from which to load products:

landing-page-builder-query

You can use both the auto-complete search functionality to search for specific product strings but also build a query based on various filters for example: product type, category, colour, size etc.

Note: these are all loaded directly from your Klevu product index so automatically ties into your catalogue sync process allowing for updates that are pushed from your site to Klevu at a later date.

Hand-picked Products

Further to being able to select products using a query filter, it is also possible to manually select individual products on a one by one basis using the ‘hand-picked’ tab within the same side tab:

image6-Optional

This allows you to find and add individual products from your site catalogue. Once selected they will be automatically added to the Landing Page within the main window.

Pinning and Positioning Products

A further feature of the Landing Page Builder is a mechanism that allows you to ‘pin’ products in a certain position. This is great for promoting selected products over and above the sort order by placing them at a fixed position at the top of the page (for example) while the remainder of the products sort based on product boosting score and your previous adjustments.

To pin a product, move the desired product into position and click on the pin icon that appears on the preview on hover. This will ensure the product retains that position within the layout:

Landing Page Builder - Pinned

Landing Page Builder – Pinned

Once you have pinned the relevant products to your layout, you can begin to adjust the sort order as needed. Simply click on the pinned product you wish to move and drag it into the desired new position within the layout.

A note on general sort order: The order in which the products appear by default will initially be dictated by the configuration that you have set elsewhere in the KMC under product boosting. The Landing Page Builder will honour this configured sort order. Pinning products effectively allows you to override the sort order for the scope of the current landing page.

Excluding Products

In some cases, there are products that match your filter query but you don’t wish to display for a given reason. For this purpose, you can explicitly tell the Page Builder to exclude it from the layout by selecting ‘exclude’ on the hover view.

Previewing Your Landing Page

Once you have completed your modifications to the layout of the page, we provide a live preview function to ensure that you are happy with the layout before proceeding with the go-live process for the page.

You can preview how your new layout will look within an interactive mode by clicking the ‘Save and Preview’ button within the top right corner of the page.

The preview includes functionality such as quick view and add to cart buttons and is aimed to give an indicative view of how the page will look once integrated. You should note that the styles in the preview are not site-specific, i.e they don’t load any custom CSS.

Note: Some functionality such as add to cart or quick view may not exactly match the functionality of your site, especially if it is heavily customized. This is due to the fact that the builder is not directly loading your site Javascript or CSS.

Exporting Your Landing Page

Once you are happy with the content you are ready to begin the integration of your landing page into your website. This marks the end of the non-technical part of the process for building a landing page. For the next step of the process which will involve taking the exported assets and integrating them into your live site, we recommend that you seek the assistance of your developers.

Note: While it is technically possible to integrate a landing page into Shopify via the admin this is not the preferred approach as it can impact other aspects of your site. Therefore a developer’s input is recommended. This is particularly true with regards to BigCommerce and Magento and you will definitely need to integrate via a proper version control process and therefore a developer will be required in order to complete the integration.

In order to export the created assets click on the download button. This will export all required assets based on the configuration just completed. The assets will include:

  • CSS (stylesheets)
  • Javascript
  • HTML markup

This will provide you with a zip file to your local machine. These files can then be passed to your development team for integration.

Integration On Your Store

Once you download the zip file, please follow the integration steps to integrate the landing page on your store.

Out of Stock Products

In Landing Page Builder, out of stock products will be displayed at the bottom of the results. Please note, if a product is pinned to top and after few days, it is out of stock then it will be displayed under Top Products section in Landing Page Builder however it will not be displayed in the results on landing page.

If you don’t want to show the Out Of Stock products on landing pages and search results then please go to KMC → Customizations → General Settings and uncheck “Show out of stock products in search results” box.

Adding Further Landing Pages

The Landing Page Builder allows you to create multiple layouts within the same interface and there is no upper limit in terms of the number of landing pages that can be prepared and built.

Simply repeat the above steps for each new layout that you wish to create.