Product detail - Swish Docs

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

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.

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.

showQuickBuyButton only reveals a button that the addToCartButton transform also allows — the transform is a per-product veto that runs on top of this switch. The global ui.productCard.showQuickBuyButton kill switch overrides both: while it is false, no quick-buy button renders anywhere, whatever these sections say.

Further reading

Design to customize colors, fonts, and spacing
Views overview for how sections work