Great product images are a major key to success for any e-commerce store. A website has to do its best to replace a customer’s ability to see and touch the physical items like they would at the store.
4 Ways to Highlight Products with Photography
- Show Large Product Photos
- Alternate Product Images
- Product Color Swatches
- Photos Submitted by Customers
Many manufacturers will provide high-quality images, suitable for us in a product catalog. These can be easily resized in suitable image editing software, such as Adobe Photoshop, to provide multiple sizes for regular and zoom images. However, your site may benefit from professional and unique photographs of the items you carry.
Consider the website Mad Cat Toys (site defunct, now), which sells collectible and retro toys suitable for collectors as well as children. The site has won several prestigious design awards, and one of the reasons for its appeal is the uniform look of the product photography. The products are photographed on a white background with a subtle shadow that gives the item dimension. If this site were to use stock images from various manufactures, the effect would be much more hodge-podge than it has now.
Even if you use stock images, though, there are several ways you can use product photography to entice customers to place an order.
1. Show Large, Detailed Images
Most site designs don’t allow for large, detailed images, even on the product detail pages.
However, larger images give customers the ability to see texture and fine details they might miss otherwise. They keep customers from having to guess about certain details of the product. There are several great ways to display larger images to customers. The oldest, simplest way is to open a larger image in a popup window. However, this doesn’t have the flair of modern websites, and has usability problems with pop-up blockers.
The lightbox method is popular now too, especially for sites already running jQuery or Prototype libraries. A lightbox opens in a div element on the same page, usually dimming out the contents of the actual page behind the image. One library I particular like is called ColorBox, a jQuery plug-in. If you don’t know what a lightbox is, take a look at the examples on the ColorBox website. Chances are, you’ve seen a lightbox in use on many sites.
Another method is to use a rollover zoom. If I recall correctly, I first saw this on the Rue La La website, one of my favorite daily distractions (and why you can’t usually reach me on the phone at 11:15am!) I usually use the MagicZoomPlus script to set this up, and if you visit their site you can see the many different ways this can be implemented. The concept is that the zoomed image opens in a div element that lies on top of other content of the page, but is small enough so that it only shows a bit of the zoomed image at any given time. As you move your mouse over the regularly-sized image, the zoomed image moves around inside its box.
2. Alternate Product Images
Multiple images are also useful. Consider the following ways that multiple product images help the buying decision:
- Show the product from different angles
- Show details of the product, such as the contents of a boxed item or the label on designer clothing (you’ll often see this on Ebay)
- Show an item of clothing or footwear on a model
- Display the item in use, such as a piece of sports equipment being used in a game
Multiple images are most commonly seen on the product detail page. The screenshot below is from Zappos, which not only shows several images, but also incorporates a video.
3. Color Swatches on Category Pages
Speaking of alternate images, Lands End does a terrific job of using mouseovers to show the back of an item of apparel when rolling over the product image. In this screenshot, the default view shows the front of each swimsuit. But when you mouseover a product it changes to show the back of the swimsuit.
One other feature you may notice on the Lands End screenshot, above, is that you can easily see what different colors a product is offered in. Even though we’re looking at more than once item, you can get a general idea for each color offered. The anticipation is that you can click through to see the various colors in more detail once you get to the product detail page.
4. Photos Submitted by Customers
A great way to showcase unique photographs is to include those taken by your customers. You see this commonly on Amazon reviews, but many other sites have begin to offer it as well. The screenshot above is from the woodworking site Rockler.com.
Your product reviews solution may collect photos as part of a review, or you may just ask customers to send a photo on your packing slip or in a follow-up email.
Another great alternative is to show products from Instagram, like What’s Up Nails does above. Give your customers a hashtag they can use to get their photos featured on your website. This has the added benefit of driving traffic from Instagram, while increasing your brand recognition. And shoppers feel extra special when their photo is selected to be included on your site.
In the real world, a picture is worth a thousand words, but on an e-commerce site, a picture could be worth a thousand dollars.
What other creative uses of product photography have you seen? Let me know in the comments below.