Enhance the shopping experience by enabling product quick view, image zoom, hover effects, and waitlists.
Every Squarespace site supports store pages where you can display and sell products. Some sites have extra features, like quick view, image zoom, and hover effects, which display when shoppers run their cursor over product images. This guide explains these features and where they're available.
Tip: Register for our Design tips to increase your store’s sales webinar where we’ll present tools and tips that you can use to help make your products stand out across your site and drive sales.
Features by version
Which features are available depends on which version of Squarespace your site is on.
For version 7.0, these options are available in the Brine, Farro, Galapagos, Skye, Tremont, and York template families. For information about all templates, visit Store page types.
In version 7.1, quick view, image zoon, and hover effects are available on product details pages with the Simple layout.
With image zoom, customers can enlarge product images for a closer look at material, texture, and finer details. You can set the zoom to activate on hover or when the image is clicked.
Image zoom is available on:
- Product details pages
- Quick view lightboxes
Enable image zoom
How you enable image zoom depends on your site's version.
To enable image zoom:
- While on a product details page, click Edit, then click the pencil icon.
- Click the Hover action drop-down menu.
- Select Zoom.
To enable image zoom:
- While on a product details page, return to the Website panel, click Design, then click Site styles.
- Scroll to the Products: Image zoom section. (In Galapagos, scroll to the Products Item section.)
- Check Enable image zoom.
- To set the level of magnification, set the Zoom Factor slider between 1 and 5. (In Galapagos, it's Image zoom Factor.)
- To choose if the image zooms as soon as the cursor moves over it, set Zoom Activates on: to Click or Hover. (In Galapagos, zoom always activates on hover.)
More help with image zoom
- Image zoom displays a larger version of the image. It technically doesn't zoom in on an image file.
- Image zoom isn't available on mobile devices.
- For best results, format your product image for display on the web before uploading.
- Images with transparent backgrounds (.png) will display the original image behind the zoomed version.
- In version 7.1, image zoom isn't available for product galleries with the Carousel design.
With 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:
- Summary blocks
- Product blocks
- Store pages
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.
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.
Add quick view buttons
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:
- In the product block editor, choose a product to display.
- In the Design tab, switch the Product Quick View toggle on.
- Save your changes to the page.
To add quick view to a summary block:
- In the summary block editor, ensure a store page is selected from the Content tab.
- Click the Design tab.
- Switch the Enable Product Quick View toggle on. The quick view button will display over all product's featured image in the block.
- Save your changes to the page.
To add quick view to a store page:
- Open the page's settings.
- Click Advanced, click Quick view, then switch the toggle on for Enable quick view.
- If you have multiple store pages, repeat these steps for each page.
Style the button and lightbox (version 7.0 only)
After enabling quick view, new sections appear in the Site styles panel. Style settings apply site-wide to create a consistent look.
- In the Home menu, click Website, click Design, then click Site styles.
- In the Products: Quick view Button section, customize the style, color, font, padding, position, and size of the quick view button.
- In the Products: Quick view Lightbox section, customize the appearance of the lightbox.
Tip: If your quick view text has formatting issues, try adding the product details as plain text.
More help with quick view
- 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.
- In version 7.0, product descriptions appear in quick view without special formatting, including header styling, bold, italics, bulleted lists, or line breaks.
Hover effects display information or create movement when you move your cursor over a product image, adding interaction and animation to your store. The hover options available on your site depends on your site's version.
All store pages show the second alternative product image on hover when a product has more than one image.
The Brine, Farro, Skye, Tremont, and York template families (with Advanced store pages) have three options:
- Alternative image
- Product info overlay
You can display product names and prices over a color overlay on hover in these template families (with Classic store pages):
- Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
Two templates have unique hover options: