Originally published at: https://community.envato.com/how-to-design-an-online-fashion-store-product-page-that-converts/
A pain point of selling fashion products on an eCommerce website versus selling them in a bricks and mortar store is that it’s difficult to give visitors a physical overview of your products. Unlike digital items like WordPress themes and plugins, physical products like clothes and food need to be touched and tasted before you make the decision to purchase. In this article, I’ll go into some useful tips on how to enhance your fashion product pages to generate more sales.
Images make the first impression on a web page, helping a customer decide whether they want to purchase your product or not. Moreover, they play a vital role in a customer’s buying decision. Below are the 3 most popular tips for shaping product images to net higher sales for your fashion store.
“A picture is worth a thousand words”
Choose large, high quality imagesFashion is an industry that values beauty which is why images are essential to converting sales.
Images themselves are able to generate a huge amount of conversions.
“Customers convert at a much higher rate and buy more when the product imagery on a site is better,” says Sheila Dahlgren, Senior Vice President of Marketing at Scene7. “Customers are three times more likely to buy online when retailers offer rich imagery with the ability to zoom, pan, and see color options and alternative views of the merchandise, along with the products presented in context or worn by a model.”
Image courtesy of MDG Advertising - View the full infographic here.This report by the National Retail Federation found that 67% of customers said that detailed, high-quality images are important when selecting or purchasing products on retail sites. Image quality is ultimately far more decisive than product descriptions, ratings, or reviews.
Zara clearly understands the importance of high-quality imagery, using these high-definition photos of a woman wearing a long-layered jumpsuit to catch customers’ attention, and drive them to purchase. If Zara used poor-quality images for this product, it probably wouldn’t drive many sales.
Another example of investing in high-quality product images is Converse’s Online Store. Check out this item preview of their Chuck Taylor All-Star Rubber shoes. The images show off their unique rubber design, thus we’re more likely to click on the red “add to cart” button and make a purchase. If Converse replaced these images with low-resolution shots of these shoes thrown down a staircase, for instance, their customers probably wouldn’t consider this pair of shoes as “sexy”, or “attractive” and perhaps - as a result - consider them “not worth buying”.
Thus, it’s important to invest in high-quality images for every product on your fashion site. You may do this by setting up a mini studio and creating the images yourself. Or - if you don’t have the resources to do that - you could consider hiring a professional photographer, since they have experience in how to shoot product images that will drive conversions.
Try to use big images, as they’ll catch the eyes of your customers and usually offer high enough resolution for visitors to interact with them; zooming in and out.
You should probably also consider using multiple images, as a singular photo shot from only one angle won’t always be enough.
Shoot from various anglesWhen looking for a fashion product online, the more visual the content is, the higher the likelihood you'll engage with and potentially buy it. The primary goal here is to give an overview of a product by presenting it from various angles. Just like ASOS have done.
In this page, ASOS uses 4 alternative images (on the right side) to give an overview of how these jeans look from different angles.There are various ways to shoot alternative pictures for your products. In general, here are 4 typical types of alternative pictures that many fashion stores use in their product page:
- An image that gives a general look front on (this is usually your featured image)
- An image that gives a general look from the back
- An image that gives a general look on the left or right side
- An image that focuses on a main detail of the product (here ASOS have focused in on the back pocket)
If you want to be more interactive, consider using video as an alternative image.
You can see an example of this on this Wrangler Jeans listing on ASOS’s store. Click on “Watch Video” and see the Wrangler Jeans in motion.
Zappos use a short introduction video as an alternative product image. Go to ASCIS GEL-Kayano and play the video to see how this woman talks about this pair of sneakers.
You can also use auto-rotated images like this pair of sunglasses on GlassesUSA.The above video features a man and woman wearing those Ray-Ban sunglasses.
Similarly, Raffaello Network uses a 360-rotated image as an alternative picture for the Jimmy Choo high-heel sandalsBy rolling back and forth, our customers can have an overall preview about each product before adding it to their cart. That looks like we’re trying it on in person!
Try-It-OnTry-It-On is a feature which allows customers to virtually “wear” a fashion product before buying it.
Have you ever bought a pair of sunglasses online? It’s probably not the most ideal scenario for any of us, since sunglasses are a physical product that need to be tried on in person. Let’s see how Try-It-On helps us purchase a pair of sunglasses more easily.
Open this product page for this pair of sunglasses on SunglassesUSA.com. Then click on “Try It On”.
Now you can either upload your image, or use a different picture that’s best matched with your face. This way you’ll look wearing the product instantly.
Incidentally there are a few Virtual Try-On WooCommerce plugins on ThemeForest that you can consider:
“Instagramize” Your Product ImagesMost fashionistas love uploading their #OOTD (outfit of the day) on Instagram. So, why not integrate Instagram pictures on your product page as a way to boost sales?
Puravida Bracelets, which uses the Shopify platform, utilizes FourSixty’s plugin to “instagramize” their Swell Tank. You can see Instagram photos from Puravid Bracelets’s Instagram account below that big feature image.
And, if i click on a picture here...
A popup, which can convert me from a visitor into customer appears here.Here you can see an outfit which includes the Swell Tank and a cross-selling product. Just hover on the tank or the shorts, then on the right side you can see thumbnail pictures for each product. When clicking on a thumbnail for the Coast Shorts, you will be redirected to their product page.
You can use either your own studio pictures, or pictures from those who have purchased your products. The latter option is far more cost effective asit will invite social engagement from your real world customers who are wearing your products, and generate more conversions without you needing to produce those images yourself.
By using this simple trick, you can convert your visitors to customers, and even cross-sell them to other products.
VariationsIf your fashion store includes variations of products, you should consider applying a visual look for each type to help your customers choose which variation is best suited to their needs.
Size guideA common feature included in most fashion stores is a size guide because fashion products (except free-size products) are made to fit a lot of different people in a lot of different sizes. A lot of customers find it hard to guess their size while viewing a product page online. A simple size guide, therefore, helps them choose the fashion products that best fit with them.
For instance an underwear store typically needs a size guide. Here is a popup Size & Fit guide on Victoria’s Secret online store. You can open this table by clicking on the “Size & Fit” link right below “Cup Size” variation.
In this Size & Fit, you can view your band and cup size by categories (Bras, Panties, etc.), or by region (International, US, Australia, etc.).
Below “Size & Fit”, you can also see the guide to measure your size. If you can’t find your size on the table, just type in your band and bust size to get your size.
A simpler way to add a Size Guide to your fashion product page is by adding it as a content tab like this:
Here you can add your size guide as a picture.
Another interesting thing to keep in mind is that - as I mentioned before - fashion products are made to fit. Therefore there will be instances where customers can’t find their size on the list. BanDo use a small space to let them submit their size. This minor addition can actually help you convert those who are not on the size list into customers.
By using this size guide on product pages, customers will find it much easier to choose the best item for them in the right size. Therefore, they are more likely to make purchases versus product pages without a size guide.
Image variationsFor products that are not in plain colors, image variations are used to display product textures.
This is an example of image variations on Victoria’s Secret’s online store.
On this page, you can see that by uploading textured images, you can easily show different variations of this sports bra. Appropriate images for each variation will show up as you click on each image.
Further information: Nitro - our upcoming WooCommerce theme, incorporates image variations. Subscribe now to get latest news on Nitro.
Improve product descriptionAlongside effective/interactive images, it's also important to be creative with your product descriptions as with the fashion and beauty industries, this comes with the territory.
Tell a story about your productInstead of simply showing a plain list of features or technical specs that not all of your customers will understand, you should instead consider using product descriptions as a opportunity to tell a story about your product. Daniel Wellington is a typical accessory store that uses both technical and storytelling in the description for their Classic Reading 36mm wristwatch.
On the one hand, the storytelling part (on the left) gives customers have an overview about the Classic Reading (its concept, elements, what they can use this wristwatch for). On the other hand, the technical specifications (on the right) provide customers with some detailed information about the watch.
Include a section for materials/fabricsAnother way to illustrate a fashion product to your customers is to show the materials/fabrics it’s made of on your product page.
Don’t simply enter all the information about the materials (e.g: spandex 30%, cotton 100%) which may just overload your customers with unnecessary specifications, explain how each of these materials and fabrics that make up this product will improve their experience.
Here is the material/fabric section of the above sports bra by Victoria’s Secret. This is a typical material/fabric description that may help you convert your visitors to customers.By reading this section, we can understand how spandex, as well as other fabrics, helps create a better experience wearing this sports bra. Compared to just a plain-text material section, what we have here is far more relevant, and thus more helpful to the customer, making their decision to purchase this product much easier.
ConclusionTo sum up, when building a product page for a fashion store, it’s imperative to consider both the visual and written aspects of your product's overview. This optimizes your product page, making the value of your items easier to interpret, and will almost definitely improve your the conversions of your online fashion store.
What’s your favorite product page design for fashion stores? Why do you love that design? We'd love to hear your sharing on the below comment section!References
- How to Optimize Your Product Pages for Higher Conversion Rates - CrazyEgg Blog
- How To Optimize Your Product Pages For Conversions - LemonStand
- Shoot Out at the Online Corral - Forbes
- 6 Bulletproof Ways to Improve Conversions on Your Product Page - Shopify Blog
- How Top Retailers Show Product Images - GetElastic
We are exploring eCommerce Design solutions to help online shop owners boost up conversions and revenue. This research is for Nitro — our upcoming WooCommerce theme.