Similar posts
Product Page Design Best Practices – Make your pages sell themselves!
Sep 15
Written by Jocelyn Lin, Creative Director & AJ Leale, Sr. Director eCommerce
The global eCommerce revenue growth came near $3 trillion in 2018 and continued to grow steadily in 2019 – but not for everyone!
Sometimes, there isn’t much of a difference between a success story and a fail; the Devil is in the details, and some of those could be found on your product page. Go through our Product page design checklist and make sure you’re doing everything you can to provide a spotless user experience!
Product page Design – overall page styling
Modern, clean and simple product page layout with recognizable branding is all you need. Prioritize quick loading over redundant details!
What should a Product page contain?
When you think about a perfect product page design and content-imagine the info you would like to obtain, and then add some more, in accordance with your target audience research.
A pretty universal list for product page includes:
- Product Images with Titles
- Demo Video (if possible)
- Price (with discounts visibly shown)
- Short description
- Variations in design and color (if available)
- Availability (in or out of stock) / Sizing
- CTA buttons: Add to bag / Add to wishlist / Share
- Shipping options
- Additional details
- What it’s worn with (other items in the picture, if any)
- Social proof
- Reviews / Rating / Questions buttons
- Related / Similar /Recommended products
Prioritizing product page design elements
The product page layout consists of two parts – the one you see without scrolling (above the fold), and the one you need to scroll to see (below the fold). The key elements that determine purchase decisions are placed above the fold; if customers want to know more, they can scroll below the fold.
Elements Above the Fold
Since more and more online shopping takes place via mobile phones, make sure these elements are instantly visible when the page loads.
Product Images
The next best thing to seeing the product in person, so it’s crucial they’re top-notch!
You need high-quality photos that showcase the items at their best, from different angles, with zooming options to see the details.
Context is important too – let the customers see how the clothes look like on different bodies; weight, height and skin tone vary, and a couple of additional photos can make a huge difference.
When you hover above the color variation, another image comes up:
Add-to-bag button
Being the most important one, the Add-to-cart button comes first – place it right next to the product image.
Pricing
No matter how much people like your product, the price determines whether they’ll buy, so it only makes sense to display it visibly.
Product Variations
Customers need to know if their size is available (you can describe the measurements later!) and if there are other colors and design options.
Provide full images of different styles, if possible on different looking models; you can place them in the slideshow, or create small sample boxes customers can hover to reveal the photos.
Availability
Tell people whether the desired item is in or out of stock; a good idea is to add another CTA button in this section – customers can subscribe to the newsletter, and be notified when the item is back in stock right away!
Rating
Everybody resorts to reviews in order to make the decision; you can show the average star rating above the fold, and place the user reviews below.
Elements Below the Fold
These might come second, but it doesn’t make them any less important! This is the place where people who are still making up their minds decide whether to buy.
Detailed description
A compelling product description should be highly informative, well-structured and witty.
The inverted pyramid rule works here too: important details first, background info later. The description should be scannable – bulleted text divided into short, logical paragraphs. Add a witty remark or a joke (don’t overdo it!) to engage with your target customers better.
Want to know more about eCommerce UX? Read these 9 Most Important UX Principles for eCommerce Success
Product Demo Videos
A good quality demo can serve not only as a tutorial but also as a hype-generating teaser.
The shorter, the sweeter is a general rule, thanks to our decreasing attention span, but optimal video length depends on the type of product. Aim for videos lasting no longer than a minute, although a well-made 90-second video can hold the attention long enough.
Just don’t make it boring and pay attention to the first visible frame and the first seconds of the vid.
Related products
Here you can show some similar products that people would prefer – or buy in addition to their first option!
Some more elements you should include below the fold are:
- FAQ and question form
- Shipping and Returns Policy
- Sizing and measurements guide
- Social Proofs (Instagram photos slideshow and praising reviews, especially from the influencers or celebrities)
We managed to design the product pages for our clients exceptionally – you can check out our success stories with Vitamin World and Rebecca Taylor.
Want something like this for yourself? Feel free to contact us!