# Product Detail Page

# Summary

This is the product detail page.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-09/scaled-1680-/Pcmimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-09/Pcmimage.png)

# Swatch Wizard

If enabled on the Product tab when editing a Product, Customisations (MTO options) will be presented to the Customer in a pop up on the website.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/tQZimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/tQZimage.png)

Favourite Swatches will be shown with a star; these will also be highlighted on the [Product Listing Page](https://bookstack.iconography.co.uk/books/product-listing-page "Product Listing Page").

The Swatch Preview Panel (secondary image to the right) may also be controlled by linking Variant Images to individual [Customisations](https://bookstack.iconography.co.uk/books/categories/page/customisation "Customisation").

# Swatch Request Popup

This is an option that can be enabled on the Product tab when editing a Product in the CMS.

This will trigger a popup on the Product Detail Page, where a customer can request swatches.

These swatches will be Customisations linked to Swatch, if that Swatch has been appropriately enabled.

This will generate an email enquiry.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/oTpimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/oTpimage.png)

# Banners (PDP)

Here is an example of where Banners will output on the Product Detail Pages.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-11/scaled-1680-/EX9image.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-11/EX9image.png)

# Tabs

Tabs on the Product Detail Page may be laid out vertically or horizontally.

### Vertically

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-03/scaled-1680-/2T5image.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-03/2T5image.png)

### Horizontally

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-03/scaled-1680-/91iimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-03/91iimage.png)