It is currently available as Private Beta, so to enable this feature please talk to your Klevu account manager or get in touch with firstname.lastname@example.org.
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.
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.
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 email@example.com.
Once enabled you can now begin building landing pages by selecting “Launch Landing Page Builder”:
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:
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:
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
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:
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.
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:
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:
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.
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.
New! We are pleased to introduce a new section of our landing page builder: Modules.
Right now we only have a few available but we plan to grow this section and even open it up to third parties to add custom widgets and additional functionality to the landing pages. Please find more information below about the Modules currently available.
To try the modules, simply enable them then click on Save & Preview to see how they look!
Add to Cart
This module will include an add to cart button in each of your product cells.
This module will add a button to each product cell which can be clicked to open up more information about that product, including a description. We have included a default template but your development team can easily override this with any content they like.
The Swatches module adds some coloured squares to your product cell when other variants are available, for example if your product comes in red, blue and green those swatches can be displayed within your product cell.
The module for Filters, or facets, allows you to specify whether or not to include a left sidebar on your landing page for customers to fine-tune which products should appear.
Furthermore, you can also control the look & feel of those facets for that specific page, overriding any settings you’ve already made in the Klevu Merchant Centre. This includes the order they appear, whether they should be expanded or collapsed by default and whether they should allow single or multiple selections per facet.
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.
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.
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)
- 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.