Enhance the customer experience with product quick view, image zoom, and hover effects.

Add interactive details like quick view, image zoom, and hover effects to your store page. These features display when customers move their cursors over your product images to give them a closer look.

Tip: Register for our Design tips to increase your store’s sales webinar to learn how to make your products stand out across your site and drive sales.

Store page special features

Which store page special features are available and how you style them depends on which version of Squarespace your site is on.

Add image zoom to product images

Image zoom displays a larger version of the product image, so customers can get a closer look at material, texture, and finer details. Image zoom is available on product details pages and quick view lightboxes

You can set the zoom to activate on hover or when the image is clicked.

Enable image zoom for your products

Tip: For best results, format your product image for display on the web before uploading.

Image zoom isn't available on mobile devices. How you enable image zoom for desktop viewing depends on your site's version.

Note: Images with transparent backgrounds (.png) will display the original image behind the zoomed version.

Add quick view to products

With quick view, customers can click a button to view product details in a lightbox without navigating away from the current page. This encourages customers to engage with your store and browse through more of your products. The quick view button can display on summary blocks, product blocks, and store pages.

The button appears when hovering over the product. The quick view lightbox includes product details, images, and a View Full Item link that leads to the product's page.

If unwanted code displays in quick view, it's likely because there is external text formatting in the product description. To remove the formatting, re-type the product description manually, or paste it as plain text.

Enable quick view buttons for your products

You can enable quick view per-store page and per-block. If you have multiple store pages or blocks, add the buttons to each one.

To add quick view to a product block:

1. In the product block editor, choose a product to display.
2. In the Design tab, switch the Product Quick View toggle on.
3. Save your changes to the page.

To add quick view to a summary block:

1. In the summary block editor, ensure a store page is selected from the Content tab.
2. Click the Design tab.
3. Switch the Enable Product Quick View toggle on. The quick view button will appear over the product's featured image.
4. Save your changes to the page.

To add quick view to a store page:

1. Open the page's settings.
2. Click Advanced, click Quick view and switch the Enable quick view toggle on.
3. If you have multiple store pages, repeat these steps for each page.

Note: The color of the quick view window follows the store page section's background color in site styles.

Add hover effects to products

Hover effects display information or create movement when a cursor moves over a product image. The hover options available on your site depend on your site's version.