Skip to main content

​
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.

​
How it works

  1. Enable Multi-Product in your widget configuration (set max products: 2-5)
  2. The customer opens the widget and uploads a photo
  3. The widget UI lets them add additional products before generating
  4. All selected products are rendered together in the scene

​
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';
  }
});