Modera Cabinet Configurator

Step 1 of 5 — Select your space width

1
2
3
4
5
Width Sink Depth Layout Colours
Choose your space width
Will you be adding a sink?
ℹ️ Sink configuration is not available in this demo.
Choose your cabinet depth
ℹ️ This demo is configured for 24″ depth.
Configure your cabinet layout
Choose your finishes
Body Laminate & Toekick
Nogal
Roble
Black
White
Countertop & Backsplash
White
Black
Hardware
Black
Silver
Gold
Your Configuration
SDK Reference
// 1. Embed the web component in your HTML
<ld-configurator
  customer-id="4463d261-5a01-49a0-a607-f7f098dfdd14"
  sku="modera-375"
  show-configurator="false"
></ld-configurator>

// 2. Wait for the scene to finish loading, then push initial state
viewer.addEventListener('ready', () => {
  viewer.setFeature('body-color', 'NogalSlowAtlas');
  viewer.setFeature('upper-1', 'open-shelves-upper');
  // … one call per feature
}, { once: true });

// 3. Width change → swap the scene by updating the sku attribute
viewer.setAttribute('sku', 'modera-555');
SDK Reference
// Not available in this demo scene
// Full integration fires on selection:
viewer.setFeature('sink', 'yes' | 'no');
SDK Reference
// Locked to 24" in this demo scene
// Full integration fires on selection:
viewer.setFeature('depth', '12in' | '24in');
SDK Reference
// Called when user selects a cabinet type for a slot
viewer.setFeature('upper-1', 'open-shelves-upper');
viewer.setFeature('upper-2', 'single-door-right-upper');
viewer.setFeature('lower-1', 'single-door-left-base-24');
viewer.setFeature('lower-2', 'three-drawer-base');
SDK Reference
// Called when user selects a finish
viewer.setFeature('body-color',     'NogalSlowAtlas');
viewer.setFeature('inner',          'MatteBlack');
viewer.setFeature('accent-handles', 'BlackHandle');

// Get the full active configuration — use this to pass to cart
const config = await viewer.getCurrentSelection();
// Returns: { 'body-color': 'NogalSlowAtlas', 'upper-1': 'open-shelves-upper', … }
addToCart(config);