The example below is taken from a Product where 'Combine Variant and Swatch Selection if Applicable' is set to 'yes'.
[](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-10/cTKimage.png) #### CMS [](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-10/kHhimage.png) #### POS [](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-10/3u7image.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. [](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. [](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. [](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 [](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-03/2T5image.png) ### Horizontally [](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-03/91iimage.png) # PDP Customisation There are a variety of settings that will make changes to the PDP. These are listed below.Image magnification (pop up with the full image size) will only be available if the original image is large enough to support this.
### Secondary image placement Additional Product images may either be located to the left, or below, the primary image. The actual size of the image rendered on screen is affected by the size of the original image, as well as the size of the device being used to view the PDP. The smaller the window (horizontally or vertically), the smaller the image will be; the platform will attempt to always show the whole image on page load, dynamically resizing the image if necessary. This setting may only be changed by Iconography. [](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-06/V88image.png) ### Video as an image thumbnail By default, videos added to Products will be displayed as a tab. Alternatively these may be viewed as an image thumbnail.If set to show the image as a thumbnail, when clicked, it will auto-play in a pop up, but muted.
This may be controlled in [Site Settings](https://bookstack.iconography.co.uk/books/site-settings "Site Settings") as a global setting for all Products. [](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-06/mcuimage.png) ### Product description styled as first tab By default, Product descriptions are styled separately. These will be visible on the page, and stand apart from the product tabs. The description may have a different appearance including, but not limited to coloured backgrounds and fonts.If styled as a tab, the Product description will be set to be open on page load
This setting may only be changed by Iconography. [](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-06/g9Jimage.png) ### Tabs styled horizontally or in an accordion Tabs may be styled in one of two ways. In both cases, only the first tab will be open. [](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-06/jNUimage.png) ### Show/hide social share buttons This will show or hide the social share buttons, as below. This setting may only be changed by Iconography. [](https://bookstack.iconography.co.uk/uploads/images/gallery/2026-06/5v2image.png)