# 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.

***

{% tabs %}
{% tab title="Custom 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)
  {% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Full Customization</mark>

### 📐 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
  {% endtab %}
  {% endtabs %}

## <mark style="color:green;">✅ Use Case Ideas</mark>

| 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 |

## 📱 <mark style="color:green;">Result</mark>

Looks like a native product list — with clean pricing, discount ribbons, star ratings, and more.

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FvkPpcGF0DVM4wgaAQAMc%2FScreenshot%202025-05-22%20at%209.56.36%E2%80%AFPM.png?alt=media&#x26;token=d690c8f7-3e92-4117-b23e-713165af6108" alt="" width="240"><figcaption></figcaption></figure>