Product image gallery and zoom

EffectHigh
SetupEasy

On a product page, the images are what the customer looks at first - research shows that the first action of the large majority of visitors (around 56 percent) is not reading text but looking at the images. The gallery is therefore the most-looked-at part of the page and often decides whether the customer continues at all. A good gallery answers the customer's questions about the product before they even ask them, while a poor or sparse one leaves doubt that leads to leaving or, later, to a return. Below is how to set up the gallery so it sells the product well and reduces uncertainty.

Cover the four shot types

The goal of the gallery is not as many images as possible, but the best possible coverage. Each of the four basic shot types answers its own question: a plain image on a single-colour background shows the product, an in-scale shot (next to a familiar object) explains the size, a close-up shows the material and texture, and a lifestyle shot places the product in real life.

For most products around five to eight images that cover these types and any additional angles a customer would want are enough. Example: for an item of clothing, show the piece on its own, on a person, a close-up of the fabric, and a detail of the seam - each image removes one concern.

Zoom and high resolution

The customer must be able to view the product up close. On desktop, enable zoom on hover or click, and on mobile devices enable pinch zoom and double-tap zoom - the latter is missing on a surprisingly large share of sites.

For zoom to work, the images must be of high enough resolution that they stay sharp when zoomed in and the details are visible. A soft or pixelated image when zoomed produces the opposite of the intended effect.

Video, 360-degree spin, or an animated GIF, where it helps

For products where movement, the drape of a material, or size carries the decision, a short video or a 360-degree view says more than any single image. A few seconds of a spin or of the product being handled removes doubt that a still image cannot, and can noticeably reduce returns.

A lighter middle option is an animated GIF: a short, automatically looping animation without sound or controls, suitable for quickly showing one feature or action (for example opening, assembling, or an effect of the product). A GIF loads more simply than a video, but watch the file size, since an unoptimised GIF can become even heavier than a short video.

With all of these formats, watch the page speed: heavy videos, large 360 views, or unoptimised GIFs can slow loading, especially on mobile devices. Rich content should not come at the cost of speed, or you lose the customer before they even see it.

A mobile-friendly gallery

A large share of customers view products on their phones, so the gallery should be touch-friendly: images should be swipeable, and thumbnails and a position counter should tell the customer how many images there are and which one they are viewing. The main images should load quickly so the gallery feels smooth.

Also make sure the images scale correctly to the screen, even when the customer rotates it to landscape. Small inconsistencies in the mobile display quickly spoil an otherwise good gallery.

Images for the chosen variant

If the product comes in several variants, for example colours, the gallery should show the images of the chosen variant. A customer who selects blue should see a blue product, not the default white - otherwise uncertainty arises about whether they will get what they expect.

Matching the images to the choice removes a common source of doubt and returns. Such a display gives the customer confidence that they are ordering exactly what they see.

How to set it up in Magento

Magento by default supports an image gallery with multiple shots, thumbnails, basic zoom, and swiping on mobile devices. You arrange the images of an individual product and the images for variants on the product and in the variant configuration.

For more advanced features, for example a 360-degree spin, video in the gallery, or refined zoom, a dedicated module is often required. It is worth checking that the module does not slow down the page loading.

How to measure whether it works

Track how many visitors interact with the gallery at all (swipe images, use zoom) and how this reflects in the product page conversion. Since the gallery is the most-looked-at part of the page, its improvements often show up quickly.

It is especially useful to track the return rate: if returns drop after adding better images, video, or a variant display, the gallery has done that job too. The goal is more purchases and fewer disappointments on receipt.

Frequently asked questions

Why is the product image gallery so important?

On a product page, the images are what the customer looks at first: research shows that the first action of the large majority of visitors, around 56 percent, is looking at the images, not reading text. The gallery is therefore the most-looked-at part of the page and often decides whether the customer continues. A good gallery answers questions about the product before they are even asked, while a sparse one leaves doubt that leads to leaving or, later, to a return.

How many images and what kind?

Not as many images as possible, but the best possible coverage. Cover the four basic shot types: a plain image on a single-colour background, an in-scale shot for size, a close-up for material and texture, and a lifestyle shot. For most products around five to eight images that cover these types and any additional angles are enough. Each image should remove one concern; for clothing, for example, the piece on its own, on a person, close to the fabric, and a detail of the seam.

How should I set up image zoom?

The customer must be able to view up close. On desktop, enable zoom on hover or click, and on mobile pinch and double-tap zoom, since the latter is missing on a large share of sites. For zoom to work, the images must be of high enough resolution that they stay sharp when zoomed in and the details are visible. A soft or pixelated image when zoomed produces the opposite effect.

Is it worth adding a video, a 360 spin, or an animated GIF?

For products where movement, the drape of a material, or size carries the decision, a short video, a 360-degree view, or an animated GIF says more than a single image and can reduce returns. An animated GIF is a lighter middle option: a short automatic animation without sound, suitable for quickly showing one action. But watch the page speed: heavy videos, large 360 views, or unoptimised GIFs can slow loading, especially on mobile. Rich content should not come at the cost of speed.

How do I set it up in Magento and do I need a module?

Magento by default supports an image gallery with multiple shots, thumbnails, basic zoom, and swiping on mobile; you arrange the images of an individual product and the variant images on the product and in the variant configuration. For more advanced features, for example a 360-degree spin, video in the gallery, or refined zoom, a dedicated module is often required. It is worth checking that the module does not slow down the page loading.