Making product images interactive in Squarespace improves the shopping experience through quick view options, image zoom capabilities, and hover effects. Here's how to implement these features:

Image Zoom

Enable shoppers to see product details by enlarging images on hover or click:

For Version 7.1:

1. Edit the product detail page
2. Click the pencil icon
3. Select [Action on Hover] dropdown
4. Choose [Zoom]

For Version 7.0:

1. Go to [Website] → [Design] → [Site Styles]
2. Find [Product: Image Zoom]
3. Enable image zoom
4. Adjust zoom ratio (1-5)
5. Set activation to Click or Hover

Quick View

Allow customers to preview products without leaving the current page:

To add quick view to product blocks:

1. Open product block editor
2. Go to [Design] tab
3. Toggle [Product Quick View] on

To add quick view to summary blocks:

1. Select store page in [Content] tab
2. Go to [Design] tab
3. Enable [Product Quick View]

To add quick view to store pages:

1. Open page settings
2. Navigate to [Advanced Settings] → [Quick View]
3. Toggle [Enable Quick View]

Hover Effects

Different templates offer various hover effects:

Version 7.1:

• Displays alternate product image on hover

Version 7.0 (Brine, Farro, Skye, Tremont, York):

• Alternative Images
• Fade
• Product Info Overlay

Note:

• Image zoom and quick view aren't available on mobile
• Format product images before uploading
• Quick view button text can't be customized
• Product images appear square in quick view

These features are available in specific template families and versions. Check your template's compatibility before implementation.

Related Articles

Previous Articles