Swatches

In this guide we will enrich the Recommendation Banner product cell with swatches, to showcase the other colours or sizes you may have available for each product.

Klevu Recommendation banner with Swatches

Similar to the other guides in this section, we will be modifying the HTML, JavaScript and CSS within the Klevu Recommendation template.

HTML

Find the code <div class="kuRECSItemBottom"> within your HTML template, and add this immediately inside after the opening div:

CSS

Add the following CSS to the bottom of your existing CSS styles:

JavaScript

Open up the JavaScript section and add the following code to the bottom:

Use the Preview button to see what it looks like, and hit Save once you’re happy!