For the complete documentation index, see llms.txt. This page is also available as Markdown.
Product List Element
The Product List Element is designed to showcase items like products, deals, or featured offers in a grid or list format. It includes built-in fields for price, rating, discount, and visuals — making it ideal for building modern store-like layouts.
This tab controls the title and call-to-action above the product cards.
📝 Title Section
Show Title – Toggle visibility
Title – Enter your section heading (e.g., “Burger & Wraps”)
🔗 CTA (Call-to-Action)
Show CTA – Toggle to display a CTA link/button
CTA Label – Text for the button (e.g., “View More”)
Action URL – Enter a link or internal screen (e.g., https://buegerhouse.com or twinr://products)
Full Customization
📐 Layout
List Type: Grid List / Vertical List / Horizontal List
Columns (1 to 4 for grid layout)
Spacing Between Items: Adjust horizontal/vertical gaps
🏷 Title & CTA
Title Text Style + Color
CTA Text Style + Color
🎨 Card Design
Card Ratio: 1:1, 4:3, etc.
Card Background Color
Corner Radius for the full card
🛒 Item Fields
Each product card includes the following fields:
✅ Title
Text Style, Font Size, Font Weight, and Color
✅ Description
Secondary info or product detail
Customizable in same way as title
✅ Price
Bold pricing text
Font Style, Weight, Size, and Color
✅ Strikethrough Price (Original Price)
Optional for showing discounts
Styled separately
✅ Discount %
You can highlight % off using a separate text field
✅ Rating Star
Star color (custom HEX)
✅ Rating Text
e.g., “4.2”, “(89 reviews)”
Fully stylable text
✅ Review Counter
Optional total count next to stars
Size and color customizable
✅ Image Style
You can select fit or fill display mode
📏 Margin
You can set:
Top / Bottom / Left / Right spacing for the card block
👁️ Visibility
Show or hide this block conditionally:
By Platform: iOS / Android / PWA
By Device: Mobile / Tablet
By User: Guest / Logged-in
✅ Use Case Ideas
Use Case
Description
Product catalog
Browse items in a store
Featured deals
“Top Picks” or “New Arrivals” section
Combo bundles
Highlight paired product sets
Flash sale
Time-sensitive list with discounts & stars
📱 Result
Looks like a native product list — with clean pricing, discount ribbons, star ratings, and more.
