Shop the Look

Here you can find information about how to implement the Shop the Look feature using Koral’s API and widget.

The Shop the Look feature allows customers to discover and purchase complete outfits or product combinations based on curated looks. This feature helps users recreate entire styles by showing them all the products needed to achieve a particular look, increasing engagement and average order value.

In order to use the Shop the Look feature, you need to add our search script to your website. This script will enable the Shop the Look functionality and allow you to customize its appearance and behavior. 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&shopTheLook=true'; document.body.appendChild(script); })(); </script>

When the script has been set up you can start using the Shop the Look feature. The feature will display a curated collection of products that work together to create a complete look, helping users discover complementary items and inspiring them to purchase multiple products.

Setup

To display a Shop the Look section, you need to add an attribute to the items you want to activate the feature on. In order to display our shop the look modal from an image, the image element needs to have a data attribute called “data-koral-shop-the-look”. The value of the attribute must be a unique identifier for the item. This attribute will be used by the Koral script to inject the Shop the Look products into the placeholder.

<div data-koral-shop-the-look="summer-casual-look"></div>

If you want to filter the products in the look, you can do so using the search filters in our dashboard.

Administration

To manage the products associated with each look, you use our extension which allows you to configure the shop the look items.