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.
Content Tab
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)
Settings Tab – 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
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.
Last updated
Was this helpful?
