Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Products Page special features

Every Squarespace site supports Products Pages (called Store Pages in version 7.1) 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.

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.

  Version 7.1
Version 7.0
Quick View
  • Product Blocks
  • Summary Blocks
  • Store Page
  • Product Blocks
  • Products Page
  • Summary Blocks
Image Zoom
  • Product details pages
  • Quick View lightboxes
  • Product details pages
  • Quick View lightboxes
Hover effects
  • Alternate image
Waitlists
  • Yes 
  • Yes (not available in Galapagos)

Image Zoom

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:

image-zoom.gif

Enable Image Zoom

How you enable Image Zoom depends on your site's version.

To enable Image Zoom: 

  1. While on a product details page, click Edit design in the top-left corner. 
  2. Click the Hover action drop-down menu. 
  3. Select Zoom. 

To enable Image Zoom:

  1. While on a product item page, go to the Home Menu, click Design, then 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 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.

Quick View

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
  • Products Pages (called Store Pages in version 7.1)

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.

Product_Block_with_Quick_View.png

Add Quick View buttons

You can enable Quick View per-Products Page and per-block. If you have multiple Products 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. Check Enable Quick View.
  3. Click Apply to save your changes.
  4. Save your changes to the page. 

To add Quick View to a Summary Block:

  1. In the Summary Block Editor, ensure a Products Page is selected from the Content tab.
  2. Click the Display tab.
  3. Check Enable Quick View.
  4. Click Apply to save your changes. The Quick View button will display over all product thumbnails in the block.
  5. Save your changes to the page.

To add Quick View to a Products Page:

  1. Open the page's settings.
  2. Click Advanced, click Quick View, then switch the toggle on for Enable Quick View.
  3. If you have multiple Products 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.

  1. In the Home Menu, click Design, then click Site Styles.
  2. In the Products: Quick View Button section, customize the style, color, font, padding, position, and size of the Quick View button. 
  3. 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.
  • Product descriptions appear in Quick View without special formatting, including header styling, bold, italics, or bulleted lists.

Hover effects

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 an alternative product image on hover.

The Brine, Farro, Skye, Tremont, and York template families (with Advanced Products Pages) have three options:

  • Alternative image
  • Fade
  • Product info overlay

You can display product names and prices over a color overlay on hover in these template families (with Classic Products Pages):

  • Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley

Two templates have unique hover options:

Was this article helpful?
15 out of 48 found this helpful
Products Page special features