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.

Last updated

Was this helpful?