Take Your Brand To The Next Level: Introducing, Landing Page Builder

Build beautiful and bespoke landing pages that leverage AI-driven content in just a few clicks. 

This feature is available to all users except for Klevu Growth Plan customers and is supported on Shopify, Magento and BigCommerce.

The new feature provides an intuitive interface designed with designers, developers and merchandisers in mind meaning that advanced technical knowledge is no longer a prerequisite in order to create dynamic and intelligent layouts. 

Why use a Landing Page Builder? 

Most e-commerce platforms provide at least a basic tool to create pages within a site. These, however, are often no more than a basic WYSIWYG editor that either require knowledge of HTML in order to use or are limited to basic layouts with static content which needs ongoing management. 

There is now a growing pressure for landing pages to do so much more and at the same time reduce the skills gap needed in order to create them. Gone are the days where a developer and high budget should be needed to create something truly unique and compelling. On top of this, there is also an opportunity to leverage machine learning algorithms as a part of your landing page to truly bring your conversion to life.

Let’s take a quick look at a typical use case where a landing page is needed: launching a new product range.

When a merchant launches a new product range on their site, they are likely to want to promote that beyond just listing the new product and adding banners. 

Ideally, it should be easy to create rich, dynamic landing page that can also feature products from the new product range. If a product happens to change in some way, this should be reflected within the landing page itself.

The product data already exists within your site catalogue so why spend valuable time and energy recreating this data and doubling down on effort when it is already available within the underlying system. Further to this, why not leverage AI in order to ensure the most relevant products are put before the end-user? With the Klevu Landing Page Builder you can achieve both and all within a simple interface. 

How it works

Klevu’s Landing Page Builder can be launched from within the Klevu Merchant Center (KMC). You can build, preview and save multiple landing pages and once you are happy, simply export a downloadable zip file that contains all the necessary assets required to integrate with any of the major e-commerce platforms including Magento, Shopify and BigCommerce.

Getting Started

Before using the landing page feature, the first step is to enable it via the 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” as shown below:

This will launch a new tab and you can begin configuration.  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 as shown below:

Once the landing page has been created you have a number of options that allow you to design the landing page easily using the native interface. In just a few clicks you are able to load the products of your choice based on either handpicked selections or by writing a simple query to select applicable products.

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:

Loading products into your landing page

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

1. Via a filter query
2. Via handpicked searches

Using Filter Queries to Select Products

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. This can include filters like product category, color, size type etc…

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

Let’s start with a basic select query to select all products containing the word “Jackets”. We can then filter the results further using the filters provided:

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. 

Handpicked Products

An alternative or addition to using the filter query search is the option to handpick selected products from your catalogue. This useful tab allows you to manually select products that you wish to explicitly feature within your landing page. 

Simply select the products that you want to manually add using the checkboxes and these will be added to your landing page preview within the main window. 

Pinning Products

Now that we have created our initial query to select the relevant products, we can then modify the sort order of the products on the page by using our simple and easy to use drag and drop interface.

As an example, we may be particularly excited about promoting a subset of our new collection by pinning selected products to the top of the page. With the Klevu Landing Page builder, this is simple. 

We simply use the drag and drop tool to position the products in the appropriate position and save the layout. Now this selected subset of products will stay pinned to the top of the page.

Excluding products

Equally, if there are products that match your filter query but you don’t wish to display for any reason (maybe they are not relevant for this particular promotion), we can explicitly tell the page builder to exclude this by clicking the cross which appears on product rollover within the user interface.

Previewing your page

Now that we have some basic content loaded into our landing page, let’s have a look at a preview of how it will look once live. Within the provided interface you can fully preview the layout before committing to putting the page live on your site. You can then repeatedly utilize this feature throughout your build process to ensure that you are happy with the layout as you create it. 

Note:  the styles in the preview are not site-specific, i.e they don’t load any custom CSS but rather it is intended to provide a general layout preview. 

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. 

We provide an export button which will export all required assets based on the configuration just completed. This includes:

• 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. 

For further integration instructions, please see here.

Summary

In this article, we have covered the basics for creating a bespoke landing page.  The possibilities of what can be achieved really are endless and it is up to you the merchant to get creative in building compelling and inviting layouts. 

You are no longer held back by developer-specific knowledge and clunky WYSIWYG editors, instead you can easily automatically pull in products from your catalogue and embed them into rich layouts in just a few clicks while still utilizing the power of AI driven content within your site.

If you are interested in learning more about our new Landing Page feature then please get in touch with us at info@klevu.com.