Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Product Quick View

With Product Quick View, customers can click a button to view item details in a lightbox without navigating away from the current page. Quick View encourages customers to engage with your store and browse through more of your products.

The Quick View button can display on:

  • Products Pages
  • Summary Blocks connected to a Products Page
  • Product Blocks connected to a Products Page

The button displays when hovering over the product. The Quick View lightbox includes product details, images, and a View Full Item link that leads to the item's page. Use Site Styles to customize the look and feel of the Quick View features.

Here's an example of Quick View on a Product Block:

Before you begin

  • You can enable Quick View per-Products Page and per-block.
  • Quick View isn't available on mobile devices.
  • The "Quick View" button text can't be customized at this time.
  • Product images display as a cropped square in Quick View.
  • Product descriptions appear in Quick View without special formatting, including header styling, bold, italics, or bulleted lists.

Product Quick View by template

Product Quick View is available for the following templates.

  • Brine family - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Farro family - Farro, Haute
  • Galapagos
  • Skye family - Foundry, Indigo, Ready, Skye, Tudor
  • Tremont family - Camino, Carson, Henson, Tremont
  • York family - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Add Quick View to Products Pages

To add Quick View to a Products Page:

  1. Open Products Page Settings by clicking on the for that Products Page in the Pages panel.
  2. Click the Advanced tab and check Enable Quick View.

The Products Page will now feature Quick View buttons over each product.

If you have multiple Products Pages, repeat this step for each one.

Add Quick View to a Product Block

The Product Block displays a product from a Products Page on a page or blog post.

To add Quick View to a Product Block: 

  1. Add a Product Block to a page or blog post or edit an existing one.
  2. In the Product Block Editor, choose a product to display.
  3. Check Enable Quick View.
  4. Click Apply to save your changes.

To see Quick View in action, save your changes to the page.

Add Quick View to a Summary Block

You can add Quick View to any Summary Block that pulls products from a Products Page. The Quick View button will display over all product thumbnails in the block.

To add Quick View to a Summary Block.

  1. Add a Summary Block to a page or blog post or edit an existing one.
  2. In the Summary Block Editor, ensure a Products Page is selected from the Content tab.
  3. Click the Display tab.
  4. Check Enable Quick View.
  5. Click Apply to save your changes.

To see Quick View in action, save your changes to the page.

Style the Quick View button and lightbox

After enabling Quick View, new sections will appear in the Site Styles Panel where you can customize its appearance. The Quick View styles will apply site-wide to create a consistent look.

  1. In the Home Menu, click Design, and then click Site Styles.
  2. In the Products: Quick View Button section, customize the style, color, font, padding, position, and size of the Quick View button. For example, move the button to the middle or bottom of the image with the Position tweak.
  3. In the Products: Quick View Lightbox section, customize the appearance of the lightbox. Notable style tweaks include:
  • Select Excerpt Display: Truncate to display the product description.
  • Overlay Color adds a color filter to the Products Page behind the lightbox.
  • Use the Controls tweaks to adjust the navigation and close button that appear outside the lightbox.
  • To change the Quick View title font, select Title Font in the Products: Details section of the Site Styles panel.
Tip: If your Quick View text has formatting issues, try adding the product details as plain text instead.

Next step

To add more interaction to your store, pair Product Quick View with Product Image Zoom.

Was this article helpful?
10 out of 23 found this helpful
Product Quick View