Every template supports Products Pages, and each family has its own style and layout options. These template families have Products Pages with extra features like product quick view, image zoom, hover effects, and waitlists:
Tip: For more help with your template, visit its template guide.
After you enable Product 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.
Product Image Zoom is available on:
- Product item pages
- Product Quick View lightboxes
Enable Image Zoom
- While on a product item page, go to the Home Menu, 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 select Click or Hover. (In Galapagos, zoom always activates on hover.)
- In the Home Menu, click Design, then click Product items.
- Click the Hover action drop-down menu and select Zoom.
- Set the Image Zoom Factor.
More help with Image Zoom
- Product Image Zoom isn't available on mobile devices.
- For best results, format your image for display on the web before uploading.
- Image Zoom displays a larger version of the image; it technically doesn't zoom in on an image file.
- Images with transparent backgrounds (.png) will display the original image behind the zoomed version.
With product 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:
- Products Pages
- Summary Blocks and Product Blocks connected to a Products Page
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.
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 Products Page:
- Open Page Settings for that page.
- Click the Advanced tab and check Enable Quick View.
- If you have multiple Products Pages, repeat these steps for each one.
To add Quick View to a Product Block:
- In the Product Block Editor, choose a product to display.
- Check Enable Quick View.
- Click Apply to save your changes.
- Save your changes to the page.
To add Quick View to a Summary Block:
- In the Summary Block Editor, ensure a Products Page is selected from the Content tab.
- Click the Display tab.
- Check Enable Quick View.
- Click Apply to save your changes. The Quick View button will display over all product thumbnails in the block.
- Save your changes to the page.
Style the button and lightbox
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 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. For example, move the button to the middle or bottom of the image with the Position tweak.
- In the Products: Quick View Lightbox section, customize the appearance of the lightbox. Notable style tweaks include:
- Select Excerpt Display: Truncate to display the product description.
- Overlay Color adds a color filter to the Products Page behind the lightbox.
- Use the Controls tweaks to adjust the navigation and close button that appear outside the lightbox.
- To change the Quick View title font, select Title Font in the Products: Details section of the Site Styles panel.
Tip: If your Quick View text has formatting issues, try adding the product details as plain text instead.
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 display information or create movement when you move your cursor over a product image, adding interaction and animation to your store. The hover effects available for your Products Pages vary by template.
Classic Products Pages
You can display product names and prices over a color overlay on hover in templates that support the Classic Products Page. To learn more, visit Styling the Classic Products Page.
Advanced Products Pages
Templates that support the Advanced Products Page have advanced hover options:
- Alternative image - Show off a special feature or key detail for each product.
- Fade - Create a fade effect.
- Product overlay - Display product information.
To learn more, visit Styling the Advanced Products Page.
Note: Currently, version 7.1 always has an alternative image enabled.
Unique Products Pages
Two templates have unique hover options:
- Galapagos supports unique alternate image and product info overlay options.
- Supply supports unique product info overlay options.
Enable product waitlists to notify interested shoppers when sold out items are back in stock. A waitlist signup form displays on the product details pages for sold out products. You can view and email waitlists from the Waitlists panel. To learn more, visit Product waitlists.
If your site is on a Commerce Basic or Advanced plan, you can display related products on the product detail pages of any template. When enabled, this section appears at the bottom of a product detail page and displays related products based on category. To learn more, visit Displaying related products.