Want to let shoppers preview a product without leaving the Shop page? The Quick View module in Merchant gives customers an overview of a product in a fully customizable popup modal, so they don’t have to open the full product page.
In this guide, we’ll walk you through how to set up and enable the Quick View module in Merchant.
Before you get started, make sure you’ve installed and activated the Merchant plugin on your WordPress site. If you’re using premium modules, ensure you have Merchant Pro installed and active.
The module is fully responsive with a mobile-friendly interface. Here’s an example of what the Quick View modal looks like on the frontend of a WooCommerce store:
And this is what the buttons look like on the Shop page. You can configure the button design:
Open the module
Open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.
In the Convert More section, click the Quick View module to open its settings page:
Customize your Quick View buttons
To configure the look and feel of your quick view buttons, scroll down to the Settings section on the module’s admin page. You have access to the following options:
- Button type – Choose between three button types: Text, Icon, and Icon + text.
- Button text – If you chose the Text or Icon + text type, change the label on the button (default: Quick view).
- Button icon – If you chose the Icon or Icon + text type, choose between two icons: an eye and a shopping cart.
- Button position – Decide where the buttons appear. The options are Before – Add to cart, After – Add to cart, and Overlay.
- Button position top – If you chose Overlay, set the distance between the top of the image and the button (default: 50%).
- Button position left – If you chose Overlay, set the distance between the left of the image and the button (default: 50%).
- Mobile position – Toggle this on to set the button position values for mobile devices.
- Icon color – The color of the quick view icon (default: #ffffff).
- Icon color hover – The icon color on mouseover (default: #ffffff).
- Button text color – The color of the quick view text (default: #ffffff).
- Button text color hover – The text color on mouseover (default: #ffffff).
- Button border color – The border color of the button (default: #212121).
- Button border color hover – The border color on mouseover (default: #414141).
- Button background color – The background color of your buttons (default: #212121).
- Button background color hover – The background color on mouseover (default: #414141).
Once the settings are configured, click the Save button in the top-right corner of the page.
Configure your Quick View modals
Below the Settings, you’ll find a Modal section. Here, customize the design and layout of the Quick View lightbox that pops up when a visitor clicks a Quick View button. You have access to the following options:
- Modal width – Define the width of the lightbox (default: 1000px).
- Modal height – Define the height of the lightbox (default: 500px).
- Place product image – Choose between three locations for the product image: Thumbs at left, Thumbs at right, and Thumbs at bottom.
- Zoom effect on image – Enable or disable a zoom effect on the product image.
- Place product description – Select the location of the product description. The options are Top and Bottom.
- Description style – Choose whether to show the full product description or just a short description.
- Show quantity selector – Add a quantity selector to the modal.
- Show buy now button – Show or hide the Buy Now button in the modal.
- Show suggested products – Enable or disable product recommendations in the modal. If enabled, choose the basis of the recommendations, depending on the Merchant modules you have active. The options are Bulk Discounts, Buy X, Get Y, and Frequently Bought Together.
- Suggested products placement – If you enabled Show suggested products, configure where the recommendations appear. The options are Before Add to Cart and After Add to Cart.
- Sale price color – The text color of the sale price in the modal (default: #212121).
- Regular price color – The text color of the regular price in the modal (default: #999999).
If you’ve changed any of the default values, click the Save button in the top-right corner of the page.
Enable the module
If you’re happy with the design, click the Enable button at the top of the page to activate the module:
Frequently asked questions
Below, we’ve answered some of the most common questions about the Quick View module in Merchant.
Where does the Quick View button appear?
It appears on your Shop and archive pages. Use the Button position setting to place it before or after the Add to Cart button, or as an overlay on the product image.
Can I show product recommendations in the modal?
Yes. Turn on Show suggested products and base the recommendations on the Bulk Discounts, Buy X Get Y, or Frequently Bought Together modules, depending on which you have active.
Is the Quick View modal mobile-friendly?
Yes. The module is fully responsive, and you can set separate button position values for mobile devices with the Mobile position option.
That’s it! You’ve successfully set up and enabled the Quick View module in Merchant so shoppers can preview products in a popup.
Next, would you like to speed up checkout from the modal? Check out our guide on Buy Now to learn more.
