Product card layouts
When the assistant returns products (from
text
get_productstext
search_products🖼️ [Image] — Product cards rendered in the chat window with image, name, and price.
Layout options
- Vertical (stacked, scrollable) — cards stack on top of each other. The default; best for narrow chat windows.
- Carousel (horizontal swipe) — cards sit in a horizontal row you swipe through. When there are more than two products, left/right navigation arrows appear.
- Grid 2-column (best for wide chat) — cards lay out in two columns; ideal when the chat is expanded.
Pick the layout in the customizer and Save Changes. The right-hand Live Preview reflects your choice.
What a card shows
Each card is built from the product's mapped fields:
- Thumbnail image (with a placeholder icon if no image is available)
- "Out of stock" badge when the item is unavailable
- Brand badge (optional — e.g. a neighborhood label for real estate)
- Product name (full name on hover)
- Price — shows a struck-through original plus a highlighted sale price when an item is discounted
- Custom fields — any card-visible mapped fields, shown as "Label: value" rows (labels respect your widget label overrides)
- View details button linking to the product URL (opens in a new tab)
Which fields appear and how values are formatted comes from your catalog mapping — see Product cards.
Mobile and expanded reflow
The layout adapts automatically:
- On mobile, the carousel layout is always used regardless of your setting, for the best swipe experience.
- When the chat is expanded on desktop, a Vertical configuration auto-upgrades to Grid to make better use of the wider space.
So your chosen layout is the desktop default; the widget reflows responsively on top of it.
🎬 [Video] — Switching between Vertical, Carousel, and Grid and seeing cards reflow.