Skip to content
Koral Documentation

Similar Products

Here you can find information about how to implement similar products based on visual similarity using Koral’s API and widget.

In order to use the similar products feature, you need to add our search script to your website. This script will enable the similar products functionality and allow you to customize its appearance and behavior. To activate similar products you have to add the similar url parameter to the search script. You can see an example below.

    <script> (function() { const script = document.createElement('script'); script.src = 'https://script.koral.nu/dist/index.js?searchId=11111111-2222-3333-4444-555555555555&similar=true'; document.body.appendChild(script); })(); </script>

When the script has been set up you can start using the similar products feature. This feature will activate the search widget using the clicked image as the reference for its search. It will display a list of similar products in the same way as if the user had uploaded an image. This will help users discover products and increase engagement on your website.

Setup

Section titled “Setup”

To activate similar products on an image you can either use parameters in the script or you can use the data-koral-similar attribute on the images you would like to enable the feature on.

The url parameter is cardId and the value of this parameter needs to be an html dom selector. This selector will be used to find the image wrapper that the feature will be inabled for. Then the wrapper has been found our script will identify all img elements inside and apply our similar images feature on it.

    <script> (function() { const script = document.createElement('script'); script.src = 'https://script.koral.nu/dist/index.js?searchId=11111111-2222-3333-4444-555555555555&similar=true&cardId=.image-wrapper'; document.body.appendChild(script); })(); </script>

You can also decide to control where the feature is enabled using html data attributes. This gives you a lot more flexibility but required more coding to set up.

The attribute is data-koral-similar and the value of this attribute should just be “true”. The data attribute should be placed as close to the image as possible. This will help our script to find the image and apply the similar products feature on it.

<div data-koral-similar-search="true"></div>

If you need to move the search similar icon up in the DOM tree, you can use a data-lift-levels attribute. This attribute will move the icon up in the DOM tree. The value of this attribute should be a number. The number defines how many levels up in the DOM tree the icon should be moved.

<div data-koral-similar-search="true" data-lift-levels="2"></div>

If you want to filter the similar products based on a specific category, you can use the data-koral-similar-category attribute. The value of this attribute should be the category that you want to filter by. Its prefered to use the category that is also in your google shopping feed, but you can also use the category name. This will help our script to filter the similar products based on the category you specify.

<div data-koral-similar-search="true" data-koral-similar-filter="category:<category>"></div>

Customization

Section titled “Customization”

There are a few parameters that you can set to customize the similar products feature. These parameters can be set in the feed admin dashboard.

You can manage the position of the search similar icon on the product card using these parameters:

  • posX: The horizontal position of the icon. Options are “left”, “right”, “center”.
  • posY: The vertical position of the icon. Options are “top”, “bottom”, “middle”.
  • offsetX: The horizontal offset of the icon. This is a pixel value.
  • offsetY: The vertical offset of the icon. This is a pixel value.