> ## Documentation Index
> Fetch the complete documentation index at: https://docs.payreque.st/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Display Layout

> Choose between a scrollable carousel or a classic grid to showcase your products on your PayRequest Page

# Product Display Layout

Your PayRequest Page can show your products in two layouts: a horizontal **Carousel** that lets visitors scroll through cards like a storefront, or the classic **Grid** that groups everything in a collapsible panel. Pick the one that matches how you want customers to experience your offerings.

<Info>
  Product layout only applies to **PayRequest Pages** in **Products mode** (i.e. pages where you've selected specific products to showcase). It has no effect on donation mode or amount-button mode.
</Info>

## The Two Layouts

<CardGroup cols={2}>
  <Card title="Carousel" icon="chevrons-right">
    Horizontal scrollable row — always visible, no click to expand. A header shows the product count with **‹ ›** controls on the right. Cards peek at the edge to signal more content.
  </Card>

  <Card title="Grid" icon="squares-2x2">
    Classic collapsible panel with a 3-column card grid inside. Visitors click **Services & Products (N)** to expand. The default for all pages.
  </Card>
</CardGroup>

## How to Switch Layouts

<Steps>
  <Step title="Open your PayRequest Page settings">
    Go to **PayRequest Page** in the main menu, then click the **Settings** tab.
  </Step>

  <Step title="Find the Product Layout section">
    Scroll down to the **Products** block. Below the product checkboxes you'll see a **Product layout** picker with two buttons: **Grid** and **Carousel**.
  </Step>

  <Step title="Select your layout">
    Click **Carousel** or **Grid** — the button highlights instantly to confirm your selection.
  </Step>

  <Step title="Save">
    Click **Save Settings** at the bottom. Your public PayRequest Page reflects the change immediately.
  </Step>
</Steps>

## Carousel Layout

The carousel is inspired by the "popular stays" style of browsing — a section heading on the left, navigation arrows on the right, and a row of cards that visitors swipe or click through.

### What It Looks Like

```
Services & Products (6)          ‹  ›
──────────────────────────────────────
┌──────────┐  ┌──────────┐  ┌──────────┐  …
│  [photo] │  │  [photo] │  │  [photo] │
│  Name    │  │  Name    │  │  Name    │
│  Desc…   │  │  Desc…   │  │  Desc…   │
│  €49     │  │  €129    │  │  €15/mo  │
└──────────┘  └──────────┘  └──────────┘
```

* Always **open** — no accordion, no click needed
* Cards peek at the right edge to signal there are more
* **Fade effect** at the edges blends content in and out
* Each card has a large product image (if set), name, short description, price, and a **Subscription** or **Booking** badge where applicable
* Clicking any card goes to that product's detail page

<Tip>
  Carousel works best when your products have **images**. Without images a grey placeholder fills the card. Even a simple product photo makes a big difference.
</Tip>

## Grid Layout (Default)

The grid collapses behind a heading so it doesn't dominate the page when a specific product is already selected (e.g., when a customer arrives via a direct product link).

* Opens automatically when no product is pre-selected
* Closes automatically when a product is active (so the form takes center stage)
* Three columns on desktop, two on tablet, one on mobile
* Shows the same product card with image, name, description, price, and badges

## Choosing the Right Layout

| Situation                             | Recommended layout                                              |
| ------------------------------------- | --------------------------------------------------------------- |
| Products have photos                  | **Carousel** — images shine in the large card format            |
| 4 or fewer products                   | **Grid** — no need to scroll; everything fits                   |
| 6+ products                           | **Carousel** — browsing many items is more natural horizontally |
| Service / portfolio page              | **Carousel** — feels like a professional showcase               |
| Direct payment links (single product) | Either — the section is hidden when a product is pre-selected   |
| Customers on mobile                   | **Carousel** — swipe feels natural; grid can get long           |

## Related Documentation

<CardGroup cols={2}>
  <Card title="PayRequest Page Styling" icon="palette" href="/shop-and-checkout/sales-page-styling">
    Customize your avatar, tagline, accent color, and social links
  </Card>

  <Card title="Category Display Types" icon="table-cells" href="/categories/display-types">
    Cards, List, and Price Table layouts for product categories in your shop
  </Card>

  <Card title="Creating Products" icon="box" href="/products-and-pricing/creating-products">
    Add images, descriptions, and pricing to your products
  </Card>

  <Card title="Apple Wallet Card" icon="wallet" href="/shop-and-checkout/apple-wallet-card">
    Carry your PayRequest Page as a scannable card in Apple Wallet
  </Card>
</CardGroup>