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

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.