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

# Product detail

> Configure the product detail view with images, variants, and buy buttons.

The product detail view appears when a customer taps a product in the drawer.

**Default configuration:**

```js theme={null}
ui: {
  productDetail: {
    sections: [
      { type: "image-slider", options: { flush: true, loop: false } },
      {
        type: "product-info",
        options: {
          descriptionMaxLines: 4,
          variantSelectDisplayType: "pills",
          hideSingleValueOptions: true,
          images: { baseTint: true },
        },
      },
      { type: "buy-buttons", options: { shopPay: false, notifyWhenSoldOut: false } },
      { type: "complementary-products" },
      { type: "related-products" },
    ],
  },
}
```

## image-slider

| Option | Type | Default | Description |
| - | - | - | - |
| `flush` | `boolean` | `true` | Remove padding around the image slider. |
| `loop` | `boolean` | `false` | Enable infinite loop scrolling. |

## product-info

| Option | Type | Default | Description |
| - | - | - | - |
| `descriptionMaxLines` | `number` | `4` | Maximum lines before the description is clamped. |
| `variantSelectDisplayType` | `"pills" \| "rows"` | `"pills"` | Layout style for variant selectors. |
| `hideSingleValueOptions` | `boolean` | `true` | Hide option groups that have only one value. |
| `images` | `{ baseTint: boolean }` | `{ baseTint: true }` | Image display options for this section. Overrides the global `ui.images`. |

## buy-buttons

| Option | Type | Default | Description |
| - | - | - | - |
| `shopPay` | `boolean` | `false` | Show the Shop Pay button. |
| `notifyWhenSoldOut` | `boolean` | `false` | Turn the disabled "Sold out" button into **Notify me when available** on a sold-out variant. |

## complementary-products / related-products

Set `hidden: true` to remove either carousel entirely. Both take the same two options.

| Option | Type | Default | Description |
| - | - | - | - |
| `showQuickBuyButton` | `boolean` | `false` | Show the floating quick-buy button on each card image. Off until you turn it on. |
| `showSaveButton` | `boolean` | `true` | Show the save button on each card. |

> [!NOTE]
>
> `showQuickBuyButton` only reveals a button that the
> [`addToCartButton`](https://swish.app/docs/guides/customize/transforms#add-to-cart-button) transform
> also allows — the transform is a per-product veto that runs on top of this
> switch. The global
> [`ui.productCard.showQuickBuyButton`](https://swish.app/docs/references/sdk/configuration#product-cards)
> kill switch overrides both: while it is `false`, no quick-buy button renders
> anywhere, whatever these sections say.

## Further reading

* [Design](https://swish.app/docs/guides/customize/appearance/design.md) to customize colors, fonts, and spacing
* [Views overview](https://swish.app/docs/guides/customize/views/overview.md) for how sections work


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.