Page History

...

This article will guide you through the implementation of Quick View for your website.

Step-by-step guide

To implement Quick View, you are essentially hiding the Product's footer zone, which expands once the user clicks the 'Quick View' button. 

To hide the footer zone from category and subcategory 'campaigns': 

...

Add the widget

The Quick View button is rendered by the Product Quick View Modal widget. To add this widget, your site must be using a zoned layout for product lists.

1. In the CMS, navigate to Content → Standard Pages. 
2. Select the 'Product List 'Item Zoned template.
3. Locate the 'ProductCategory Product Summary' widget and click 'Edit'. 
   Image Removed
4. Tick 'Hide Footer Zone?' and click 'Save'.
   Image Removed

Note - the footer zone can also be hidden from products in the standard Campaign Slider, by repeating the above steps in the Campaign Slider widget.

Next, add the 'Quick View' button itself to the product tile, and ensure data such as Price, Availability, Alternates, and Attributes are located in the footer:

1. Navigate to Content --> zone your Product List Image widget is in, and click Add Widget.
2. Search for and select the Product Quick View Modal widget to add it. 
3. In order to have the button appear at the bottom of the image on hover, make sure the modal widget is below the image widget.
   Image Added
4. Edit the widget and customise the text for the Quick View button, if required.
   Image Added
5. Save your changes.

Customise the template

Now you'll want to customise what appears on the actual pop-up when your customer clicks the Quick View button.

1. In the CMS, navigate to Content → Standard Pages. 
2. Select the 'Product List Item Zoned' Product Quick View Modal template.
3. Add the 'Product List Live Pricing Button' widget to zone Column2Left.
   Image Removed 
4. Ensure widgets such as Price, Qty Box, Add To Cart, etc. are located within zone Footer. 
   Image Removed
5. Customise options as required. Look at the layout preview to see how content will be arranged. Change the layout or create a new one if required (see our Custom Layout Creator document for more detail).