| Info |
|---|
|
This feature must be switched on for your site by Commerce Vision. |
| Multiexcerpt |
|---|
| hidden | true |
|---|
| MultiExcerptName | Feature Title |
|---|
|
Product Quick View |
Overview
| Multiexcerpt |
|---|
| Excerpt |
|---|
To optimise speed in scenarios where live pricing calls are made to PRONTO, Quick View functionality can be enabled. With Quick View, product pricing and availability is not shown on initial page load. Instead, these calls are made to the server on demand when the user clicks 'Quick View'. That data is then cached for the user, thereby improving speed and performance| MultiExcerptName | Feature Overview |
|---|
|
| Excerpt |
|---|
Give your customers the ability to see product details instantly with a Quick View popup. As users shop your site, they can check product pricing and availability, then add the product to their cart, all without navigating away from the page they're browsing. |
|
This article will guide you through the implementation of Quick View for your website.
...
| Quick View On Hover | Quick View Pop-up |
|---|
 Image Added
| |
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':
...
 Image Added
|
Add the widget
The Quick View button is rendered by the Product Quick View Popup widget. To add this widget, your site must be using a zoned layout for product lists.
- In the CMS, navigate to Content → Pages & Templates.
- Select the 'Product List 'Item Zoned template.
- Locate the zone your 'ProductCategory Product Summary' widget and click 'Edit'.
Image Removed - 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:
- Navigate to Content --> List Image widget' is in, and click Add Widget.
- Search for and select the Product Quick View Popup widget to add it.
- In order to have the button appear at the bottom of the image on hover, make sure the new popup widget is positioned below the image widget on the template.
Image Added
- Edit the widget and customise the text for the Quick View button, if required.
Image Added
- 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.
...
- In the CMS, navigate to Content → Standard Pages.
- Select the 'Product List Item Zoned' template.
- Add the 'Product List Live Pricing Button' widget to zone Column2Left.
Image Removed - Ensure widgets such as Price, Qty Box, Add To Cart, etc. are located within zone Footer.
Image Removed - Customise options as required.
- Product Quick View Modal template.
Image Added - Check the layout preview to see how content will be arranged. Change the layout or create a new one if required (see our Layout Creator document for more detail).
In the screenshot below, I'm using a 2-column layout for the Quick View popup.
Image Added - Start adding widgets to your layout, dragging and dropping them to arrange in the zones as required. Suggested widgets include:
- Product List Image
- Product List Product Title
- Product List Product Code
- Product Gallery
- Product List Unit Description
- Product List Availability
- Product List Price
- Product List Qty Box
- Product List Add To Cart
- Product List Add To Favourites
And you're done! The Quick View popup is now ready to wow your customers.
Additional Information
| Multiexcerpt |
|---|
| MultiExcerptName | Additional Info |
|---|
|
The Product Gallery Widget can now also be used in the Product Quick View popup to help streamline the user experience. |
| Minimum Version Requirements |
| Multiexcerpt |
|---|
| MultiExcerptName | Minimum Version Requirements |
|---|
| 03.97.13 |
|
|---|
| Prerequisites | |
|---|
| Self Configurable |
| Multiexcerpt |
|---|
| MultiExcerptName | Self Configurable |
|---|
| Yes |
|
|---|
| Business Function |
| Multiexcerpt |
|---|
| MultiExcerptName | Business Function |
|---|
| Marketing |
|
|---|
| BPD Only? | |
|---|
| B2B/B2C/Both |
| Multiexcerpt |
|---|
| MultiExcerptName | B2B/B2C/Both |
|---|
| Both |
|
|---|
| Ballpark Hours From CV (if opting for CV to complete self config component) |
| Multiexcerpt |
|---|
| MultiExcerptName | Ballpark Hours From CV (if opting for CV to complete self config component) |
|---|
| Contact Commerce Vision |
|
|---|
| Ballpark Hours From CV (in addition to any self config required) |
| Multiexcerpt |
|---|
| MultiExcerptName | Ballpark Hours From CV (in addition to any self config required) |
|---|
| Contact Commerce Vision |
|
|---|
| Third Party Costs |
| Multiexcerpt |
|---|
| MultiExcerptName | Third Party Costs |
|---|
| n/a |
|
|---|
| CMS Category |
| Multiexcerpt |
|---|
| MultiExcerptName | CMS Category |
|---|
|
|
|
|---|
Related help
| Content by Label |
|---|
| showLabels | false |
|---|
| max | 5 |
|---|
| showSpace | false |
|---|
| titleexcludeCurrent | Related Articlestrue |
|---|
| cql | label in ("how-to","cms") |
|---|
|