Multi-Product visualization

When multi-product mode is enabled on a widget, customers can select 2-5 products to visualize together. This is useful for showing how items complement each other. For example, a sofa with a matching coffee table and rug.

Multi-product mode is configured in the widget settings in the dashboard, not through the SDK. The SDK passes individual product context; the widget handles multi-product selection in its UI.

Providing product data

Even with multi-product enabled, you open the widget with a single product. The customer adds more products through the widget UI:

Selektable.open('widget_room', {
  productId: 'sofa-001',
  productTitle: 'Modern Blue Sofa',
  productImage: 'https://myshop.com/images/sofa.jpg',
  productImages: [
    { id: 1, src: 'https://myshop.com/images/sofa.jpg', alt: 'Blue Sofa' }
  ]
});

The widget will show the initial product and provide an interface for the customer to browse and add more products from your store.

Cart integration with multi-product

When multi-product is enabled and the customer adds to cart, the onAddToCart callback is called once per product:

Selektable.open('widget_room', {
  productId: 'sofa-001',
  productTitle: 'Modern Blue Sofa',
  productImage: 'https://myshop.com/images/sofa.jpg',

  onAddToCart: async function (product, quantity) {
    // This is called for each product the customer adds
    // product.id might be 'sofa-001', 'table-002', or 'rug-003'
    const response = await fetch('/api/cart', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        productId: product.id,
        quantity: quantity
      })
    });

    return { success: response.ok };
  },

  onViewCart: function () {
    window.location.href = '/cart';
  }
});

Client SDK

Examples

Multi-Product visualization

Multi-Product visualization

How it works

Providing product data

Cart integration with multi-product

​Multi-Product visualization

​How it works

​Providing product data

​Cart integration with multi-product

Multi-Product visualization

How it works

Providing product data

Cart integration with multi-product