Loading
Live Interactive Demo

Lesuto Chameleon
Commerce SDK

Every module below is live — pulling real product data from the API. Browse, search, add to cart, and customize the theme in real time.

49 modules·16 with variants·10 industry presets
49
Modules
54
Variants
10
Presets
1
Script Tag

Auto-Theming + Full Control

The SDK automatically detects your site's colors, fonts, and dark/light mode on load. Every module renders as if it was built into your site — no CSS overrides needed. Override anything you want via config, or use the floating Theme Editor for live preview.

What Auto-Theming Detects

Font Family
Reads computed body font and applies it to all modules
Dark / Light Mode
Measures background luminance to auto-switch palettes
Primary Color
Scans link and button colors to match your brand accent
Border Radius
Inherits your button/card corner radius for consistency
Text Color
Adapts foreground color so text stays readable
Background
Detects card and page backgrounds for seamless blending

10 Industry Presets

Choose an industry preset from the Command Center or add data-preset to your script tag. Each preset configures colors, fonts, card styles, density, image ratios, and per-module layout defaults.

Modern
Clean, universal default
Realtor
Navy & gold, serif, spacious
Editorial
Magazine-style, border cards
Fitness
Dark theme, lime & orange
Architect
Minimal, flat, spacious
Medical
Cyan, clean, trust-first
Boutique
Warm amber, serif, portrait
Grocer
Compact, green, 4-column
Artisan
Handcrafted, warm, serif
Tech
Dark slate, glass cards

Configured from the Command Center

All theme and module settings are managed from your Command Center dashboard — no code needed. The SDK fetches your configuration via Site Key, so changes you make in the admin apply everywhere instantly.

Theme & Colors
Set primary color, accent, fonts, border radius, and dark/light mode from the dashboard. Or let Auto-Theming match your site.
Industry Preset
Pick from 10 presets (Modern, Realtor, Editorial, Fitness, Architect, Medical, Boutique, Grocer, Artisan, Tech) — one click switches the look of every module.
Module Selection
Choose which modules appear on each page. The SDK auto-detects modules in your HTML, or configure page-by-page in the admin.
Page Rules
Override theme, modules, or layout per URL path. Show a different template on /sale vs /lookbook — all from the dashboard.

One Script Tag

All you add to your site is a single script tag with your Site Key. The SDK handles the rest — fetching your config, applying your theme, and mounting your modules.

<!-- Paste this anywhere — config comes from Command Center -->
<script src="https://sdk.lesuto.com/v2/chameleon.js"
  data-site-key="YOUR_SITE_KEY"></script>

Try the Live Theme Editor

The floating Theme Editor widget previews colors, fonts, border radius, dark mode, and layout templates in real time — right on this page. In production, merchants get this same experience inside the Command Center.

Try It On Your Site

Enter your website URL and watch Chameleon inject live commerce modules with auto-theming. Customize colors, fonts, and modules interactively.

Launch Interactive Preview

🛍️ Product Experience

Full product page with reviews and recommendations — exactly how customers see it

Loading product...
Click any product to load it here

Product Detail

6 layout styles — standard, showcase, catalog, gallery, editorial, immersive — with zoom, sticky cart, trust badges, cross-sell

product-page
Loading product...

Customer Reviews

Reviews connected to the product shown above

reviews

You May Also Like

Product recommendations based on the current product

cross-sell

🛒 Commerce

15 modules

Hero Banner

5v

Full-width promotional banner with CTA

Configuration

Product Grid

5v

Faceted filters, sort, pagination, responsive columns

Configuration

Product Slider

3v

Horizontal carousel — trending, new arrivals, or custom feeds

Configuration

Collection Browser

3v

Grid of live collections from your catalog

Configuration

Checkout

Multi-step Stripe checkout with guest and logged-in flows, BNPL (Klarna, Afterpay, Affirm), and tax calculation

Configuration

Booking Widget

Embeddable scheduling widget — Lesuto Connect integration

Frequently Bought Together

Behavioral recommendation engine — "Customers also bought"

Configuration

Gift Card

Digital gift card purchase with preset amounts and custom messages

Shopping Cart

Compare

Shipping Calculator

Quick View

Size Guide

👤 Customer

6 modules

Login

Customer authentication with session detection

Register

Multi-step registration with email confirmation and password strength

Account

Customer profile, addresses, and order history

Favorites

Client-side wishlist — save products for later

Configuration

Recently Viewed

Tracks products the visitor browsed and shows them again

Configuration

Support Form

Customer support ticket form with categories and order linking

📝 Content

10 modules

Promo Banner

Promotional banner with countdown timer support

Configuration

FAQ

Searchable, filterable accordion FAQ with tags and expand/collapse

Newsletter

4v

Email capture form connected to your channel

Configuration

Blog Feed

3v

Latest blog posts from your AI-generated or manual blog

Configuration

Lookbook

3v

Visual product gallery with shoppable hotspots

Configuration

Video Player

Embedded video with poster frame, autoplay, and aspect ratio control

Configuration

Announcement Bar

Breadcrumbs

Mega Menu

⭐ Social & Trust

4 modules

Trust Badges

3v

Security and payment badges to build buyer confidence

Follow Store

4v

Follow CTA with Hub integration and social links

Configuration

Brand Slider

Brand logos or text-only names from your supplier network

Configuration

Notification Toast

Social proof popups appear automatically. Click below to preview.

🔧 Utilities

3 modules

Currency Selector

Back to Top

Theme Editor

Add Any Module in One Line

Drop the script tag on your page, then use data-chameleon attributes to place modules wherever you want. The SDK handles rendering, data fetching, and theming.

<!-- 1. Load the SDK -->
<script src="https://sdk.lesuto.com/v2/chameleon.js"
    data-site-key="YOUR_SITE_KEY"></script>

<!-- 2. Place modules anywhere -->
<div data-chameleon="product-grid" data-variant="editorial"></div>
<div data-chameleon="search" data-variant="full"></div>
<div data-chameleon="checkout"></div>
Learn About the SDKDocumentation

More from Chameleon

The SDK is just one way to build with Lesuto.

WordPress Plugin

Drop commerce into any WordPress site with shortcodes. Auto-Theming, SSR, no WooCommerce needed.

Learn More →

AI Website Builder

Describe what you want in plain English and the AI generates a complete storefront with products and blog.

View Demo →

Ready to sell on your website?

Create a free account and start adding commerce to any site in minutes. No credit card required.

Start Building — FreeTry on Your Site First