Every template supports Products Pages, and each family has its own style and layout options. Some templates’ Products Pages have extra features:
- 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 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.
- Hover effects - Display information or create movement when you move your cursor over a product image, adding interaction and animation to your store.
Tip: For more help with your template, visit its template guide.
Image Zoom, Quick View, and advanced hover effects are available in the following templates. Templates are grouped by family:
- Brine family - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
- Farro family - Farro, Haute
- Skye family - Foundry, Indigo, Ready, Skye, Tudor
- Tremont family - Camino, Carson, Henson, Tremont
- York family - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York
All other templates support classic hover effects.
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, and 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.
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.
The hover effects available for your Products Pages depend on your site's 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: