As an Ecommerce store owner, thinking about how to display your numerous products for the best user experience and conversion can be a challenge. But, if you take the time to invest in the layout and design of your product pages, it can bring great rewards.
We asked our own team to select and analyse some Ecommerce product page designs and explain why they think these companies are doing it well:
Kacper, one of our developers, really rates Apple’s product pages. Not only are they a leader in the tech market, but they have clearly appealed to the tecchies amongst us with their smooth animations which create a really premium feel.
Their vibrant colours are pleasing and contrast massively with the simple, usually one block colour product design.
Along with the colour pallette, the imagery of each product is truly eye-catching. They show each model close up, as well as ‘in action’, letting the user imagine what it would be like to get their hands on one in reality.
Apple makes use of statistics which prove the product’s worth. They even offer comparisons to older product models so that you can avoid features which you might not have liked previously.
They don’t just list each product’s features, but also their benefits, making their sales pitch all the more convincing.
- Include vibrant colours
- Make use of smooth animations
- Exhibit eye-catching imagery
- Use statistics
- Offer comparisons
- List features and benefits
Amazon is one of the biggest ecommerce stores in the world, so it’s safe to say they know what they’re doing.
Their product pages have loads of content, and this clearly works, as the content includes everything you might need to know and answers any objections you might have.
According to Kacper:
“Not only do Amazon use multiple product images which include great zoom functionality, they also allow the user to view video footage of the product.”
Within this, Amazon lets the viewer see and select all the available product variations (e.g. styles, colours). Selecting one of these also changes the product image to show that variation – so there can be no doubt as to what you’re buying.
Technical Details along with product features are obvious to the purchaser and if you were in any doubt whether or not to buy, you can read all the helpful customer reviews from those that have taken the plunge and actually bought it.
You can also see any questions and answers from other customers, like you, to refute any objections or answer any queries you might have.
There are comparisons between other similar products, along with recommended items (based on what you’ve previously browsed/bought).
That leads on to personalisation. If you can recommend products that the user might like based on what they’ve previously bought, then that’s a massive win. Tailoring content to individual users is the future of online shopping.
Utilise imagery of the product in use. For products that Amazon really want to push (like their own Alexa), they have beautiful lifestyle photography explaining each product’s features and showing them in use around the home. This goes a long way in getting the user to envisage the product in their own home.
- Add loads of content
- Answer any objections the consumer might have
- Make use of video
- Exhibit images of product variations
- Outline technical specifications
- Flaunt customer reviews
- Include product comparisons
- List personalisation and recommended products
- Display imagery of the product in use
Now, not all the websites that we’ve highlighted here are ones which we’d recommend learning from, and unfortunately, Scribblers is one of them.
“It uses the default, but slightly customised, WooCommerce theme which doesn’t accentuate the products and services which they offer.”
The product page is very plain. They don’t use each product’s assets to their advantage by focusing on its imagery. All of the photography is very little and sparsely used – and none of them have the desired action shot. This site does utilise the zoom functionality though which is useful with their small-scale imagery so that you can properly see what each set contains.
The description accompanying each product isn’t very long or persuasive. It merely outlines what is in the set and nothing more. No features, benefits of this nib or ink type are outlined. In order to make this more engaging, they could have included examples of calligraphy which this type of nib could be used for.
Without knowing that this particular product was what you were looking for, there aren’t many sales tactics utilised that would make you want to buy this product.
It would also be useful to have the delivery information evident before you check out, so that you know an estimated delivery timescale and how much it will cost.
What is good about this product page however, is that they make use of their feefo reviews. This instills trust in their product, especially with their 5* service rating.
- Accentuate the products
- Imagery is important
- Make it interactive
- Add accompanying content
- List features and benefits
- Outline delivery information
- Display customer reviews
“I’m partial to a nice watch! But yes, Filippo Loreti also have very effective product pages.”
Filippo Loreti makes great use of space on large desktop screens by having the imagery on the left, the title, description and video in the middle, and then the price and buy button on the right – effectively it’s a 3 column layout up top which means more content gets shown higher up the page. Then on mobile, it all adjusts nicely by stacking everything on top of each other.
This website is a master of building consumer trust. It clearly shows that this product has free shipping (a massive buying incentive), a 90 day money-back guarantee, and a 10 year warranty and secure checkout.
As you scroll down, Filippo Loreti include another video, more beautiful imagery, testimonials from reputable sources and iconography to highlight key features. This makes the content really scannable.
Reviews are included nice and cleanly towards the bottom of the product page. Filippo Loreti really reinforce the credibility of their brand by showing logos of publications that they’ve been featured in.
And finally they repeat the reasons to buy from them; free shipping, 10 year warranty, safe and secure checkout, and a 100% satisfaction guarantee at the very bottom of the page.
- Utilise white space
- Include product descriptions
- Make use of video
- Display the price and basket clearly
- Think about how it will be displayed on mobile
- Build consumer trust
- Offer incentives
- Incorporate reviews and testimonials
- Repetition can be a great sales technique
In the era of smart technology, the FitBit has taken the world by storm. Analysing numerous health attributes – your heart rate, steps taken, calorie intake, calories burnt, sleep monitor, etc. the fitbit is a useful fitness accessory. Along with it being a household name, its product pages are user friendly and engaging.
They make use of a vibrant product page design with a clear call to buy action at the top of the page.
The design makes it look almost illustrated with great photography right in the centre of the page.
According to Will,
“Like Amazon, the content is made up of product features, image galleries, and technical specs, but all designed beautifully. The simple layout really makes it easy for the user to clearly see what each individual features are and what you’re getting.”
As Fitbit offer more than 5 different similar products, they have a “Compare” call to action at the bottom of each page. Fitbit’s product page also takes the user to a quiz to find out which product is right for them. It’s almost as though they aren’t willing to sell you the wrong item which is a great way to generate consumer trust.
- Make sure it’s user friendly
- Create vibrant designs
- Include a clear call to buy action
- List features and technical specifications
- Utilise image galleries
- Offer product comparisons
- Make it interactive
- Gain consumer trust
Another watch product page – Will, our founder, apparently only shops for watches!
Paul Valentine take imagery to a whole new level with beautifully large product photography. Literally the whole product page is focused around it. As you read through the description, the watch alternates between different shots so that you can view the watch from all the angles that matter.
Unlike most ecommerce sites, this one actually lets you customise each product by modifying the strap. Having this sort of option really engages those browsing your site, as consumers might want a slight difference in a product and it could be the difference between a sale and not.
As you scroll down the page, the “Add to Bag” call to action remains ever present at the top right of the site in the header. This is so important as it is a shopping site after all.
These product pages adjust beautifully on mobile too. Most people forget that making your site mobile friendly is paramount in this age of mobile technology. In 2016, it was calculatedthat on average people were browsing on their smartphone for 66 hours per month. Why would you not target them with a beautiful design which caters for both desktop and mobile?
- Invest in, and display large and beautiful imagery
- Include a product description
- Offer product customisation
- Clearly show the “Add to bag” call to action
- Carefully consider both desktop and mobile
“My first choice for a great product page would be Collectif not only because their shop is a joy to use, but they sell fabulous reproduction clothing – so ticks all of the boxes for me!”
“The product pages are clean and focused. My one dislike about Amazon (everyone else’s favourite) is that the pages are very cluttered.”
Details of each product are listed in a logical order and fabulously their images change on colour selection. The product images are also large – being 50% width of the page, with the ability to hover to zoom into it which allows the consumer to properly investigate the product in detail.
What is great about this one is that the size guide is right next to the size options – sometimes you have to hunt for this!
The option to add to a wishlist is fab, as you can save items for later or send the list to someone else in the hope that they might get the hint and buy it for you.
The ‘Style with’ section is included right at the top of the page which is a nice touch. Making accessories relating to your product can be great for upselling. Same with the suggested products at the bottom of the page.
Reviews feature prominently on each product page. Social proof is huge in online shopping, but this doesn’t just include reviews. On the Collectif homepage they have customer (Instagram) photos which showcase real people wearing their clothing, and instead of linking off to the individual instagram post, it clicks through to the product featured in the photo. This is very sales savvy.
The site navigation is focused on the user and their wants, so pages which is also the company’s aim (conversions), so pages like About and Help are relegated to the footer.
“My only suggested improvement is that the pagination on category pages could be made more obvious on mobile.”
- Don’t make your page too cluttered
- Include features in a logical order
- Exhibit images which can change colour upon selection
- Display large imagery
- Utilise video
- Offer recommendations
- Make use of customer reviews
- Think about your site navigation
- Cater for both desktop and mobile
Recently redesigned, the Majestic website has been given a fresh, clean look.
The navigation is focused on the shop. Again, this is because the goal is focused on sales. Popular categories have been highlighted for this reason as well as ease of access for the user.
The category pages have a fabulous, clean, card based design. Filter options are where you’d expect them to be, in the sidebar. But you also have the option to filter by region, which is a great feature especially for wine buffs, and this has been highlighted at the top of the page.
Products are displayed in rows, with great info provided at a glance. Explanations on hover are included and once you’re familiar with these, they make choosing a breeze. But what is really fantastic is the ‘would buy again badge’.
“I love to see how popular a wine is, from people who’ve actually bought it – experts or novices.” states Claire.
The product pages are just sublime. The product and accompanying descriptions take up the main space above the fold, with the add to trolley to the right. Tasting notes are also provided, which brings the wine to life. The add to trolley is fab as you can input a quantity manually or select 6 to twelve bottles, where savings have been highlighted.
The customer reviews are excellent, including star ratings, comments and would/wouldn’t buy again which instills confidence in the buyer.
“My only comment is that these customer reviews feel a little disjointed as they’re below the recommended products. However, you can quickly navigate to this by clicking the ‘would buy again badge’ at the top of the page.”
- Think carefully about your navigation
- Ensure you have a clean look
- Highlight popular categories
- Include filter options
- Outline product information clearly
- Display customer reviews
- Think about your product layout
- Offer a quantity tab so that your customers can have more than one
9) Field Notes
Claire: “It was difficult to select a third, but I settled on Field Notes.”
The product pages are very clean but also slightly unconventional. It seems focused and refreshing with a full-width hero at the top, which features the title, and an image of the product. You then have a lengthy description interspersed with images, which can usefully open larger in a slider onclick.
“I love how they tell a story, and really sell the note books, which are after all usually considered pretty mundane items.”
Specs or more info is available at the bottom of the page, and these take the form of a scannable bullet list. Things like composition, country of manufacture etc. make it really easy for the reader to know all the ins and outs of the product.
The main product image and ‘add to cart’ follows you down the page, which is great. No need to scroll up once you’ve been convinced.
The only downside of these product pages is that they don’t incorporate reviews.
- Display imagery and product descriptions
- Include technical specifications
- Make your product page easily scannable
- Ensure your “add to cart” is very obvious
A summary of the best product page practices:
From the above reviews, it’s clear that thinking about the layout and even what you include within your product pages is very important. Not only can this help with your sales, but it can also mean that you are looked at for design inspiration and may even feature on blog posts (like this one) as an expert in product page practices which means more publicity and ultimately more sales.
We’ve collected all of the key takeaways for the best product pages below, just in case you hadn’t had time to go through all of the reviews:
- Make it simple for the reader. Your design should easily flow so that the customer is gently lead through the sales pitch to the sale. Accentuate the products within the layout by utilising the space given to you. Those with the greatest impact outlined above, were those that incorporated vibrant colours and a user friendly navigation bar.
- Put your basket constantly on display.
- Outline the price and delivery information obviously so that neither of these things will come as shock when a customer clicks through to checkout.
- Imagery is important – have a zoom functionality to enable the viewer to see the product from different angles or in a lifestyle setting. You might even include a video to really seal the deal! If you have a variety of colours or patterns which the consumer can choose from, ensure that your imagery changes to reflect what the customer has chosen.
- Outline all of the features and benefits within your product description. Comparisons and statistics are equally as important.
- Include ‘Recommended Items’ / ‘Accompanying Items’as these are great opportunities to upsell your products.
- Reviews and Guarantees are a must as they add credibility to your site and reassure the consumer that you are a trustworthy site with quality products.
- A simple design has a great impact.
- Make use of smooth animations and multimedia. Any way of keeping your consumers engaged on your site, the more likely they are to buy something.
- Add loads of content. Make sure you are answering any objections the consumer might have.
- Outline technical specifications. This might sound basic but it’s so useful for customers.
- Cater for both desktop and mobile users.
- Offer incentives and offer popular categories to intrigue the user.
- Make your site interactive and even offer product customisation . These things really make you stand out from the crowd.
- Include filter options when thinking about your product layout as this really makes it easy to browse a website.
- Offer a quantity tab so that your customers can have more than one item. It’s the simple things that really can have a big impact to your sales.
Would you like to be notified each time we post new digital media?