Templates

There is a section called "Templates" under the Recommendations tab where you can customize the look and feel of your recommendation banners.

Here you can create multiple templates to assign a different look & feel to each of your recommendation banners. Each template's HTML, JavaScript, and CSS is fully customizable.

Klevu Recommendations is powered by Klevu JavaScript Library, so chances are you are already familiar with how it works and how easy it is to customize, allowing you to showcase any custom attributes from your product data within your banner product cells.

How to make the Klevu Recommendations templates your own?

Here are some common customizations to give you a better idea of customizing the recommendation banner look & feel.

• Implementing Add to Cart
• Adding a Discount Badge
• Displaying Quick View button with a popup modal
• Adding Swatches with an image hover

Klevu Recommendations GUI Editor

The Klevu GUI editor for Smart Recommendations makes it even easier to customise the look & feel of the Recommendation banners your customers will see. You can add, remove and rearrange individual components and build up a complete design, all without writing a single line of code.

This brief guide introduces the core elements of the GUI editor for Klevu Smart Recommendations.

The best way to get started is to take a look at this brief video, which will guide you through the core components of the GUI Editor:
Link to the video

Areas

Each “area” defines a section of your recommendation banner which can have child elements added to it. The area of most interest is the product listing, as this is where each of your product cells will appear, and you can specify components like images, text, price to appear for each product.

The main areas of interest are as follows:

• Banner Area:This is the top level of your recommendation banner which contains all other elements. Think of this as your wrapper, to which you may add a banner title, a product listing, etc.
• Title Area: This is what will appear above (or below if you prefer) your product listing, for example “Other customers also bought” would appear here, to introduce the context of your banner.
• Product List Area:This is the wrapper for where your product cells will appear. You can add things like carousel and navigation functionality, and you should add a product area to it.
• Product Area: Here you will see your individual product cells, and is where you will likely spend most of your time customising. You can add product name, image, price, etc. in here.

Components

You can add various components to each area, and the individual component types you can add will vary from area to area. For example, you cannot add product-related components like 'name' or 'price' to the title area, since that area has no product context.

The components should be self-explanatory, so we will not explain them all, and rather share some information about one or two of them so you can get a good idea how things work.

For example, within Product Area you will find the following

• Name: To display the name of each product in your banner.
• Price:To show the was/now price. If you prefer to show a static price, ie. without was/now or 'starting at', you can enter salePrice as your List Price Attribute, and leave the other two fields blank.
• Image: The image of your product, defaulting to your products' image attribute.
• … and many more!

Styling Controls and Override CSS

Within each component you will also find various controls to tweak the look and feel, such as font family, margin, border and background colour, etc. All of these controls will power the CSS that is used for your recommendation banner.

If you wish to take even more control, click on the “Override CSS” link, where you can edit the CSS rules yourself. You can then manually type in CSS rules and click on ‘APPLY’ to see your changes.

Live Preview

Throughout this editing experience you will see a live preview on the right hand side, showing what your banner will look like. You can switch this view between:

• Desktop View
• Tablet View
• Mobile View

This gives you the chance to see what your banner will look like on all of your customers' devices.

Save and Publish

Once you are finished with your changes, please click on save and publish. You will then be able to assign your new template to one or more of your recommendation banners, and more importantly share your creation with your customers!

Convert to Code Based Template

Once you are happy with your initial design, if you want to take even more control, you can convert your creation into a version where you can access the full HTML, CSS and JavaScript. This allows your development team to add any number of customisations, directly within the Klevu UI.

One caveat here, however, is once you convert to the code based template, you cannot convert back, so please ensure this approach matches your own use cases. For this reason, we first clone your template and then convert it, meaning you still have access to the original, just in case.

FAQ