Related Products
Here you can find information about how to implement related products based on visual similarity using Koral’s API and widget.
In order to use the related products feature, you need to add our search script to your website. This script will enable the related products functionality and allow you to customize its appearance and behavior. To activate related products you have to add the related 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&related=true'; document.body.appendChild(script); })(); </script>If you don’t want to use image search you can set the display parameter to “NONE” and the related parameter to true. This will prevent the image search icon from appearing.
<script> (function() { const script = document.createElement('script'); script.src = 'https://script.koral.nu/dist/index.js?searchId=11111111-2222-3333-4444-555555555555&related=true&display=SA'; document.body.appendChild(script); })(); </script>When the script has been set up you can start using the related products feature. The related products feature will show a list of related products based on the product that the user is currently viewing. This will help users discover new products and increase engagement on your website.
To display related product, you have to add a placeholder to your site. This placeholder needs to have a data attribute called “data-koral-related-products”. The value of the attributes must be the id of the product that you want to find related product for. This attribute will be used by the Koral script to inject the related products into the placeholder. You can add this placeholder anywhere on your site, but it is recommended to place it close to the product that the user is currently viewing.
<div data-koral-related-products="88776655"></div>We also recommended that you add some styling to the placeholder with at least a min-height to prevent the page from jumping when the related products are loaded. You can also add some styling to the related products to make them look better. Here is an example of how to style the placeholder and the related products.
<div data-koral-related-products="88776655" style="min-height: 350px;"></div>If you have configured an advanced template using the feed admin dashboard, the related product teaser card will use this template. If you have not configured an advanced template, the related product teaser card will use the default template. You can find more information about how to configure an advanced template in the advanced template documentation.
If needed you can set a data-limit attribute on the placeholder. This attribute will limit the number of related products that are displayed. The value of the attribute should be a number. This is useful if you want to limit the number of related products that are displayed to the user. The default value is 5.
<div data-koral-related-products="88776655" data-limit="4"></div>If you want to filter the related products, you can use the data-koral-similar-filter attribute. The value of this attribute should be the category that you want to filter by. Its preferred 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 related products based on the category you specify.
<div data-koral-related-products="88776655" data-koral-similar-filter="category:children"></div>Customization
Section titled “Customization”If you want to use your own template for the related products, you can manage the carousel actions using these functions:
// Slide carousel left KoralCarousel.slideLeft('[data-koral-related-products]');
// Slide carousel right KoralCarousel.slideRight('[data-koral-related-products]');