Add quick view, image zoom, and hover effects to your store page

false

Add quick view, image zoom, and hover effects to your store page

Last updated July 15, 2026 22:53

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.

• Version 7.1
• Version 7.0

Note: Quick view, image zoom, and hover effects are available on product details pages with the Simple layout. It’s not available for product galleries with the Carousel design.

Quick view:

• Product blocks
• Summary blocks
• Store page

Image zoom:

• Product details pages
• Quick view lightboxes

Hover effects:

• Alternate image on store pages

Note: These options are available in the Brine, Farro, Galapagos, Skye, Tremont, and York template families. For information about all templates, visit Store page types.

Quick view:

• Product blocks
• Store page
• Summary blocks

Image zoom:

• Product details pages
• Quick view lightboxes

Hover effects:

• Alternate image on Store pages
• Fade (not available in Galapagos)
• Product info overlay
• Other templates also have hover options

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.

• Version 7.1
• Version 7.0

To enable image zoom:

1. While on a product details page, click Edit, then click the pencil icon.
2. Click the Hover action dropdown menu.
3. Select Zoom.

To enable image zoom:

1. On a product details page, return to the Website panel, click Design, and click Site styles.
2. Scroll to the Products: Image zoom section. (In Galapagos, scroll to the Products Item section.)
3. Check Enable image zoom.
4. To set the level of magnification, set the Zoom Factor slider between 1 and 5. (In Galapagos, it's Image zoom Factor.)
5. To set when the image zooms, set Zoom Activates on: to Click or Hover. (In Galapagos, zoom always activates on hover.)

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.

• Version 7.1
• Version 7.0

All store pages show the second product image on hover when a product has more than one image.

The hover effects available depend on your template and store page type.

Was this article helpful?

Yes No

48 out of 180 found this helpful

Yes No

Add quick view, image zoom, and hover effects to your store page