Shop the Look

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.

Quick Start

Add the Koral script to your website with the shopTheLook=true parameter:

<script>
  (function() {
    const script = document.createElement('script');
    script.src = 'https://script.koral.nu/dist/index.js?searchId=YOUR_SEARCH_ID&shopTheLook=true';
    document.body.appendChild(script);
  })();
</script>

Mark images or videos as shop-the-look hotspots using the data-koral-shop-the-look attribute:

<div data-koral-shop-the-look="unique-item-id">
  <img src="lifestyle-image.jpg" alt="Summer look" />
</div>

Configuration Options

The widget supports multiple configuration parameters in the script URL:

Parameter	Type	Default	Description
searchId	string	Required	Your unique search identifier
shopTheLook	boolean	false	Enable shop-the-look widget
useWidgetModal	boolean	false	Display results in main widget modal
stlEmitOnly	boolean	false	Headless mode - emit events instead of showing UI
sh	boolean	false	Enable slideout hover effect on icon
useV2	boolean	false	Use advanced embeddings for better results
ds	boolean	true	Enable drop shadow on icon

Example with Options

<script>
  (function() {
    const script = document.createElement('script');
    script.src = 'https://script.koral.nu/dist/index.js?' +
      'searchId=YOUR_SEARCH_ID' +
      '&shopTheLook=true' +
      '&sh=true' +        // Enable slideout hover
      '&useV2=true';      // Use advanced embeddings
    document.body.appendChild(script);
  })();
</script>

Display Modes

The widget offers three distinct display modes:

1. Built-in Modal (Default)

Creates a standalone modal with the image on the left and matching products on the right. Mobile-responsive with automatic layout adjustments.

<script src="https://script.koral.nu/dist/index.js?searchId=YOUR_ID&shopTheLook=true"></script>

2. Widget Modal Integration

Routes results through your main search widget modal for a unified experience. Requires the main widget to be present on the page.

<script src="https://script.koral.nu/dist/index.js?searchId=YOUR_ID&shopTheLook=true&useWidgetModal=true"></script>

3. Headless Mode (Custom Implementation)

Emits custom events without showing any UI, allowing you to build your own display interface.

<script src="https://script.koral.nu/dist/index.js?searchId=YOUR_ID&shopTheLook=true&stlEmitOnly=true"></script>

Setup

Image Hotspots

Add the data-koral-shop-the-look attribute to any element containing an image:

<div data-koral-shop-the-look="summer-casual-look">
  <img src="lifestyle-image.jpg" alt="Summer casual outfit" />
</div>

The attribute value should be a unique identifier for the item.

Video Hotspots

The widget also supports video elements. Add the video URL using any of these attributes:

<div data-koral-shop-the-look="video-look-1"
     data-video-stl="https://example.com/video.mp4">
  <video src="https://example.com/video.mp4"
         poster="https://example.com/poster.jpg"></video>
</div>

Supported video attributes (in order of priority):

• data-video-stl
• data-koral-video-stl
• koral_data_video_stl
• data_video_stl

Custom Events (Headless Mode)

When using stlEmitOnly=true, the widget emits events on document.body that you can listen to:

Loading Event

Fired when a search starts:

document.body.addEventListener('koral_stl_loading', (event) => {
  const { imageUrl, imageId, searchId } = event.detail;
  console.log('Loading products for:', imageId);
});

Results Event

Fired when products are successfully fetched:

document.body.addEventListener('koral_stl_results', (event) => {
  const { imageUrl, imageId, searchId, products } = event.detail;
  // Display products in your custom UI
  products.forEach(product => {
    console.log(product.title, product.price);
  });
});

Error Event

Fired when an error occurs:

document.body.addEventListener('koral_stl_error', (event) => {
  const { imageUrl, imageId, searchId, error } = event.detail;
  console.error('Shop the look error:', error);
});

Product Data Structure

Products returned from the API have the following structure:

{
  id: string;              // Product ID
  title: string;           // Product title
  price: number;           // Price in cents (divide by 100 for display)
  currency: string;        // Currency code (e.g., "DKK", "EUR")
  image_link: string;      // Product image URL
  link: string;            // Product page URL
  brand?: string;          // Brand name (optional)
  description?: string;    // Product description (optional)
  variants?: Array<{       // Color variants (optional)
    color: string;
    image_link?: string;
  }>;
}

Slideout Hover Effect

Enable the slideout effect to show “Shop looket” text when users hover over the icon:

<script src="https://script.koral.nu/dist/index.js?searchId=YOUR_ID&shopTheLook=true&sh=true"></script>

When enabled (sh=true), the icon expands on hover to show text, providing a more intuitive visual cue for users.

Advanced Features

Custom Templates

The widget supports custom HTML templates for product display. Templates are loaded from:

https://template.koral.nu/{searchId}.html

Contact support to set up custom templates for your search ID.

Advanced Embeddings

Enable improved search accuracy with advanced embeddings:

<script src="https://script.koral.nu/dist/index.js?searchId=YOUR_ID&shopTheLook=true&useV2=true"></script>

This uses Jina V4 embeddings for better product matching.

Mobile Optimization

The widget automatically adapts to mobile devices:

• Full-screen modal on mobile
• Slide-up animation when scrolling
• Touch-optimized interface
• Responsive product grid

Administration

To manage the products associated with each look:

1. Use our browser extension to configure shop-the-look items
2. Set up search filters in the dashboard to refine which products appear
3. Customize templates (contact support) for branded product displays

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>Shop The Look Example</title>
</head>
<body>
  <!-- Shop the look hotspot on image -->
  <div class="lifestyle-image" data-koral-shop-the-look="summer-look-1">
    <img src="summer-outfit.jpg" alt="Summer outfit" />
  </div>

  <!-- Shop the look hotspot on video -->
  <div class="lifestyle-video"
       data-koral-shop-the-look="video-look-1"
       data-video-stl="https://example.com/lifestyle-video.mp4">
    <video src="lifestyle-video.mp4" poster="video-poster.jpg"></video>
  </div>

  <!-- Initialize widget -->
  <script>
    (function() {
      const script = document.createElement('script');
      script.src = 'https://script.koral.nu/dist/index.js?' +
        'searchId=YOUR_SEARCH_ID' +
        '&shopTheLook=true' +
        '&sh=true' +
        '&useV2=true';
      document.body.appendChild(script);
    })();
  </script>
</body>
</html>