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 the Style Editor 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 Quick View by template

Product Quick View is available for the following templates.

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

Add Quick View to Products Pages

Tip: To add Quick View to all of your Products Pages, repeat this step for each Products Page.

Open Products Page Settings by clicking on the for that Products Page in the Pages panel.

quickview1.png

Click on the Features tab and check Enable Quick View.

quickview2.png

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

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 Style Editor 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 Style Editor.
  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.
Note: To change the Quick View title font, select Title Font in the Products: Details section of the Style Editor.

Next step

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

Was this article helpful?
2 out of 9 found this helpful
Product Quick View