Loading
Gallery|Interactive PlaygroundProduct Grid
Theme

Applied live; copies data-preset.

HTML
Cmd+Enter to run
Variants - click to switch
Product Grid - Quick Reference
Description

Faceted catalog with filters, sort, pagination, and per-product hover actions (favorite, compare, quick-view). Pulls live from your channel via the gateway. Supports grid or list, 2–6 column layouts, and per-collection / per-product-type filtering.

Requirements

Products in your catalog

Tips

Supports `data-columns`, `data-limit`, `data-variant`, `data-product-type`, and `data-collection` for filtering.

Attributes
data-layout (select) = grid
data-limit (number) = 8
data-columns (select) = 4
data-collection (text)
Embed snippet
<!-- 1. Load the SDK once per page (or once globally in your header/footer) -->
<script src="https://sdk.lesuto.com/v2/chameleon.js"
  data-channel-token="YOUR_CHANNEL_TOKEN"></script>

<!-- 2. Drop the module(s) wherever you want them to render -->
<div data-chameleon="product-grid"></div>
Live Preview
Write a valid <div data-chameleon="..."></div> snippet and click Run
AI Assistant