Online shoppers cannot pick a product up, so your images do the touching for them. A good gallery shows every angle, and a good zoom shows the stitching, the texture and the label. This guide shows you how to set up a product gallery and image zoom in WooCommerce with Siteryn Product Gallery & Image Zoom, from matching your photos to testing on a phone.
Quick answer
To set up a product gallery and image zoom in WooCommerce, install and activate Siteryn Product Gallery & Image Zoom. In its settings, set the Main Image aspect ratio to match your photos, pick a Zoom mode, style the thumbnails and arrows, choose your Lightbox features and click Save Changes. Then test a variable product and a phone, and clear your page cache.
Watch the setup video
What does a product gallery plugin do?
A product gallery plugin replaces the default WooCommerce product images with a main image that slides, a thumbnail strip, zoom on hover or tap, and a full-screen lightbox. It also switches the image automatically when a shopper chooses a variation, such as a color.
If you want the thinking behind great product photos first, such as which images every product needs, read our guide to WooCommerce product images, gallery and zoom best practices. This post is the hands-on setup.
Before you start
- Requirements: WordPress 6.4, WooCommerce 8.0 and PHP 7.4 or newer. WooCommerce must be active, because the plugin replaces WooCommerce’s own product image display.
- Free or Pro: the free version includes the horizontal thumbnail slider, zoom, lightbox, variation image switching and mobile settings. It is complete on its own and never time-limited.
- Prepare your photos: use consistent sizes where you can. Heavy files slow pages down, so read our guide to WordPress image optimization before you upload large batches.
How do you set up a product gallery and image zoom?
After you activate the plugin from Plugins → Add New Plugin → Upload Plugin, open its settings in your WordPress dashboard. The settings are split into tabs, and each tab has its own Save Changes button and a reset option. Work through them in this order.
Step 1: Match the main image to your photos
On the Main Image tab, set these three options first:
| Setting | Options | Choose this when |
|---|---|---|
| Aspect ratio | Square (1:1), Portrait (3:4), Natural | Square for most catalog photos, Portrait for apparel, Natural if your photos vary |
| Image fit | Contain, Cover | Contain shows the whole image. Cover fills the frame and may crop |
| Transition | Slide and other styles | Slide feels natural on phones and desktop |
The same tab also has cards for dimensions, background, border and spacing, so you can match the gallery to your theme.
Step 2: Choose a zoom mode
Open the Zoom tab and set Zoom mode. There are three styles, plus an off switch:
- Inner Zoom: magnifies the image inside the main frame. It works on desktop and on phones, so it is the safest choice for a mobile-first store.
- Lens Zoom: a round or square magnifier follows the cursor. Desktop only.
- Window Zoom: a magnified view appears beside the image. Desktop only, and best when you have room beside the gallery.
- None: the default. Shoppers rely on the lightbox alone.
Each mode has its own size, border and magnification settings. Start with Inner Zoom, then try Lens or Window if your photos have fine detail worth magnifying.
Step 3: Style thumbnails and arrows
- Thumbnails: set the position (below or above the image), how many are visible, the shape and the active border color. Shoppers can drag or swipe the strip.
- Arrows: set the placement (inside, outside, above or below the image), the shape and the colors. Turn on Hide on mobile if you want swipe-only navigation on phones.
Step 4: Choose your lightbox features
The lightbox opens when a shopper clicks the main image. On the Lightbox tab, keep the features your shoppers will use: a counter, a thumbnail strip, zoom, share and slideshow. On phones the lightbox goes full screen and supports pinch zoom. Click Save Changes on every tab you edit.
Step 5: Set the responsive options
The Responsive tab lets you override the main image size, the number of thumbnails, the spacing and thumbnail visibility on tablets and phones. A gallery that looks perfect on a laptop can feel cramped on a small screen, so give this tab real attention. If you want more ideas, our guide to WordPress mobile optimization has ten fixes for phone visitors.
Step 6: Test everything
- Open a product with several images. Click the thumbnails and arrows, hover to zoom, and click the main image to open the lightbox.
- Try a variable product. Choose a variation and confirm its image shows in the gallery. For more on variation design, see how to improve WooCommerce product variations.
- Test on a real phone. Swipe the main image, tap to zoom and open the lightbox.
- Clear your cache. Empty your page cache so visitors see the new design.
- Check your speed. Compare page speed before and after. See WordPress Core Web Vitals for what to measure.
What does Pro add to the gallery?
The free plugin gives you one gallery style, the horizontal thumbnail slider. Pro adds ten more, and each has its own shortcode so you can place a gallery outside the product page:
- Thumbnail layouts: vertical thumbnail slider (left or right), vertical scroll and multi-row thumbnail slider.
- Grid layouts: grid, modern grid, masonry and split (image left or right).
- Other styles: carousel with autoplay and dots, fullscreen, and a video gallery for YouTube, Vimeo or self-hosted videos.
To place the free gallery with a shortcode, use [siteryn_pgz_gallery]. A template tag is also available for theme developers.
Common gallery problems and fixes
| Problem | What to try |
|---|---|
| Gallery does not show | Confirm WooCommerce is active, clear your cache and check whether your theme replaces product images |
| Zoom does not work on a phone | Lens and Window Zoom are desktop only. Switch to Inner Zoom |
| Variation image does not change | Test with another theme or plugin disabled. See plugin conflicts |
| Images look cropped | Change Image fit to Contain or switch the aspect ratio to Natural |
| Old gallery still shows | Clear your page cache and any CDN cache |
Product gallery setup checklist
- Plugin installed and activated
- Aspect ratio and image fit match your photos
- Zoom mode chosen, with Inner Zoom for phones
- Thumbnails and arrows styled
- Lightbox features selected
- Responsive overrides set for tablet and phone
- Variable product, phone swipe and zoom tested
- Page cache cleared and speed rechecked
Let your products speak in detail
Siteryn Product Gallery & Image Zoom adds a thumbnail slider, hover and tap zoom and a full-screen lightbox. The free version is complete on its own. Pro adds ten more gallery styles, including grid, masonry, carousel and video.
Frequently Asked Questions
Which zoom mode is best for mobile?
Inner Zoom. It works on phones and on desktop. Lens Zoom and Window Zoom are desktop only, so pair them with a lightbox that supports pinch zoom on mobile.
Does it work with variable products?
Yes. When a shopper chooses a variation, the gallery switches to that variation’s image.
Do I need WooCommerce for this plugin?
Yes. WooCommerce must be installed and active, because the plugin replaces WooCommerce’s product image display.
Can I match the gallery to my theme?
Yes. You can change the image size, aspect ratio, border, corner radius, thumbnail shape, arrow icons, colors and the lightbox look.
Will a gallery plugin help my SEO?
A better gallery helps shoppers, but search engines care about image quality, file size and alt text. Use descriptive file names and alt text, and see our WooCommerce SEO checklist.
Final Thoughts
A strong product gallery is mostly a handful of careful choices: a ratio that fits your photos, a zoom mode that works on every device, clean thumbnails and a lightbox shoppers can use with one thumb. Set those up, test on a phone, clear your cache and watch your page speed. Start free, and add Pro styles when you need a grid, masonry or video gallery.
