Images are extremely important to customers when evaluating a product. They are the most utilized element of the product page. A lot of products require multiple images to showcase them from all angles and provide customers with enough information to make a decision.

This necessitates the product gallery which customers can scroll through and view as many product images as they need. Swiping through an image gallery on mobile is a dream. On, desktop, it’s a pain, especially if your customers have to click on small arrows or dots. 

 

How do you indicate additional images?

You need to make it clear to customers how many images they can expect to scroll through. Swiping or clicking endlessly would be quite intimidating. While a few other methods are used, thumbnails are the best way to do this as customers are likely to ignore additional and potentially important product images if you fail to indicate their existence.

 

How do you display thumbnails?

It is always advisable to show all the thumbnails at once but due to space limitations, that may not always be viable, and thus necessitating truncation. How this truncation is done can be quite important. Doing it with zero indication is a big no. If your customers only see four thumbnails, they’ll stop swiping, scrolling, or clicking through your image gallery as soon as they see four images.

When you truncate your thumbnails, include a clear “+” sign indicating the existence of additional thumbnails. These additional thumbnails should all be revealed once the plus sign is clicked on. 

They may cover some content but that shouldn’t be a big issue as the customer is clearly interested in product images. Just make sure that your thumbnail display is easily collapsible if it covers other product page elements upon expansion.

It’s also important to make sure that zoomed images don’t cover your thumbnails.

Examples