10 Practices to Create
the Best E-commerce Product Page
10 Practices to Create
the Best E-commerce Product Page
15 mins readA product page is one of the most important pages on your e-commerce website. A compelling e-commerce product page design determines whether a customer is going to place an order with your store or skip your website completely to find a better offer. Good product page design instills confidence in your website visitors that purchasing from you is going to be advantageous for them. Great product page design converts visitors into customers without ever leaving your page.
Based on Whidegroup’s years of expertise, we’ll review 10 e-commerce product page best practices that have reaped the greatest results for store operators. Ranging from customer facing to backend optimizers, we’ve covered what you need to focus on for results.
Table of Contents
ToggleProduct page design is all about representing your product in the best possible light. Sure, you may know your product’s strengths over your competitors, but how do you convey to your customers that your product is exactly what they’re searching for? There are several general practices that amount to the best e-commerce product page design:
Below, we will dissect these practices in great detail to help you create a converting e-commerce product page design.
Before we dive deeper into product detail page best practices, we want to emphasize the importance of website optimization for mobile. Today, if you leave your e-commerce store unoptimized for mobile, all other efforts are trivial. Mobile shopping has reached a new pinnacle with 72.9% of all retail e-commerce sales generated using a mobile device in 2021. That means three out of four sales are carried out through mobile.
Additionally, statistics show that 62% of online shoppers are less likely to purchase from you in the future if they have a negative mobile experience. So it’s clear to see why implementing a mobile responsive e-commerce product page design is integral to securing sales.
What makes a good product page on mobile is showcasing all essential product information above the fold (meaning without scrolling down). Whilst simultaneously keeping enough whitespace on the page to not overwhelm the shopper. For example, have a look at H&M’s mobile product page design.
They created a minimalistic design, consisting of:
While this may not be enough to secure a sale, it’s enough to neatly highlight the most important product information. One of the biggest struggles in creating a mobile e-commerce product page is navigating through heaps of product information. Tucking it away under an accordion details section that can be expanded to show additional information can reduce scrolling time and make an overall product page layout more appealing.
Whether your customers browse your product page on mobile or desktop, presenting high quality imagery of the product is crucial for driving sales. If customers can’t clearly envision what your product is all about, how can they commit to making a purchase?
Best product pages adhere to a few rules for creating product imagery:
Make sure you optimize all of your product images to avoid blurriness and pixelation, as pictures are the first impression a visitor gets about your product. You want to aim for a polished, well-lit photo with lots of whitespace to focus your customers’ attention solely on a product.
Take a look at Bellroy and how they construct their product imagery.
Highlights:
Consider adding lifestyle product shots to further illustrate how your product will look in real life. If you sell furniture, taking pictures of a sofa in a room setting is a lifestyle shot example.
Give your customers a little taste of your product by displaying it in action. As more competition arises, you want to win over your consumers by helping them visualize your offer in their life.. After all, the biggest struggle clients have when shopping online is not being able to see, touch, or try out the product before purchasing it.
Nowadays, best product page designs include a short demo video showing how a product looks and operates in real life. This creates an in-store shopping experience and builds customer confidence. Additionally, having a video on your product page can help you rank higher in search results. Google prioritizes webpages with videos as users are more likely to click on the listing that shows a video thumbnail.
When talking about e-commerce product page design with demo videos, we can’t pass by ASOS.
Why are they great?
Besides demonstration videos, you want to consider filming explanatory videos. Statistics show that 96% of people watch explainer videos to learn more about the product. For example, if you sell kitchen gadgets, creating a video that explains how your product operates will further incentivize the buyer to purchase.
The 360 degree view is another e-commerce product page best practice. Customers will be able to rotate your product image however they want and see your product from any angle. This can eliminate misunderstandings a visitor may have about your product and reduce return rates.
Learning 360-degree photography can be done with some great beginner guides on the web. Of course, you can always hire a professional studio to handle all photography matters.
At first glance, creating appealing product copy for your e-commerce product page might seem like an easy task to accomplish. Some businesses even use the default product descriptions provided by the supplier on their product pages. But that is a major mistake. Simply dispensing product information on a page isn’t enough to convince visitors to buy your product. You need to engage with your audience and prove that your product is worth purchasing.
How do you do that? With a few guidelines to create excellent e-commerce product page content:
When relevant, be sure to include “how to use” (e.g. air humidifiers, robot vacuum cleaners, tool sets) and “ingredients” (e.g. skincare products, makeup, food) lists to your product page design.
Make use of iconography to further visually engage with your customers.
Iconography refers to pictorial elements that illustrate the subject to decrease the amount of written text.
For example, Dr. Squatch uses iconography to outline their products key features, alongside quirky copy.
Highlights:
What makes their product page so great is style consistency throughout the page. All of the elements take the shopper on a journey with a final destination of a purchase.
When the user lands on your e-commerce product page, the first piece of information they encounter is the product overview. A product overview is a set of key features displayed above the fold that tells the buyer all of the essential information right off the bat. A converting product overview consists of:
Another highly important piece of product overview is the call-to-action (CTA) button. Make your CTA large and visible to nudge your customers to complete the purchase. Choose a color that stands out against the rest of your e-commerce product page design. There is no need to get creative with CTA wording. Go for the tried-and-true classics like “Add to Cart”, “Buy Now” or “Sign Up”. Otherwise, you risk confusing the reader.
The British luxury fashion store Burberry knows everything about crafting a compelling product overview. Just look at the photo below:
A bird’s eye view on the Burberry’s product page layout shows:
Overall, a good e-commerce product page must give a concise overview of the product without confusing the shopper with loads of text. Seal the deal with a prominent call-to-action.
A rookie mistake to make while developing your e-commerce product page design is neglecting the stock counter. Even if you sell internationally and have multiple warehouses to keep track of, be sure to disclose low stock availability on every product. Don’t wait to inform your customers at checkout that their chosen item is out of stock. Otherwise, you risk turning them away from your shop forever.
If your prospect lands on a page with an out of stock product that you will restock or is coming soon, make your “Add to cart” button inactive and replace it with an option to be added to the waitlist. Most e-commerce platforms offer this feature as a default. In place of a “Buy” button you can attach a form to capture their name and email so you can send your customer a product arrival email. New Balance is a good example of giving the shopper an option to be notified when the item is arriving.
Highlights:
We can’t discuss e-commerce product page best practices without highlighting the importance of establishing comprehensive shipping and return policies. Keeping your customers in the dark about rules of delivery and return is one of the most detrimental things you could do in the process of product page design.
Place your policies right on the product page to avoid sending your customers to another webpage. Tuck your rules away under an accordion or simply position them on your product page where they can be easily seen. Consumers will appreciate your transparency and will be more inclined to buy if shipping and return policies are laid out right away.
Having a dedicated webpage with the complete details of your conditions is also great practice. Leave a link to your separate shipping and return policies page in the footer of your e-commerce site.
Research shows that 68% of buyers abandon placing an order at checkout when shipping rates are too high. Implementing a free shipping method is an e-commerce product page best practice. There are two free delivery options to choose from:
Establishing proper return rules on your product page is no less important, since 67% of shoppers check return policies before making a purchase. Shopping online can be scary for customers since they can’t evaluate the product in real life. Offering a full refund with a return system that is free of any shipping costs is the ideal strategy. This inspires consumer confidence and incentivises them to make a purchase.
Take a look at ban.do’s product page design.
What makes their product page so good:
Your goal is to create trust between you and your customers. Convince shoppers that buying from you is risk-free and you’ll set yourself apart from your competitors.
Authentic social proof is a cornerstone of a successful e-commerce product page. Reportedly, 79% of consumers trust the reviews they read online as much as personal recommendations. Incorporating reviews and ratings tools into your product page design builds customer’s confidence in your brand and increases conversion rates.
As an industry standard, customer ratings are presented in a five-star rating system and positioned in a product overview or in conjunction with the review panel. To integrate a review panel on your e-commerce product page, you need to keep a few things in mind:
Incorporating customer testimonials is also one of e-commerce product page best practices. A customer testimonial is a quote from a delighted client that demonstrates the value of the purchased item. For example, John Paul Mitchell Systems uses a clever way to endorse their product:
Take a look at the layout:
Now that the visual aspect of your e-commerce product page design is out of the way, let’s talk about performance optimization. Before the visitor even lands on your product page, the first thing they notice is your page load speed. The ideal loading time of your webpage is 3 seconds or less. Otherwise, the probability of bounce increases exponentially with each second.
Some of the best practices to maximize page load speed are:
If you lack coding knowledge or simply don’t have time to tinker with convoluted code, consider hiring a development team or a freelancer to help you out. You can also feel free to drop us a line anytime for a consultation.
One of our recent clients had performance issues on their e-commerce website, so he came to us. For performance rate estimation, we used Google PageSpeed, which assigns points from 1 to 100 to the website in question. Any result above 80 points means that the website is well-optimized. After our engagement, performance increased from 43 points to 99, as you can see in the screenshot below.
At Whidegroup, we have vast experience with website optimization. One of our clients reached out to us when their e-commerce website encountered a load speed issue. After our engagement, the website load speed improved by 83% and user session rate increased by 34%.
Metadata is the only point on this list that matters not for customers, but for search engines and browsers. Metadata’s direct link to search engine optimization (SEO) and their combined effect on your webpage ranking make it vital for shoppers to ever experience your store. SEO refers to the changes you make on your website to boost your visibility in search engines that generate more leads. Metadata can be thought of as descriptions of sets of information. Keywords and summaries are examples of metadata for a website and play directly into SEO.
To complete your e-commerce product page, conduct keyword research to understand how visitors search for your product. There are a plethora of tools online to help you find relevant keywords. After you’ve compiled a list of keywords related to your product, integrate them into your:
Work towards organically appearing on the first search engine results page (SERP). It’s an essential long-term strategy for any e-commerce product page, as 99% of searchers click on one of the links in the SERPs top portion. One of the methods to rank higher is increasing your domain authority by means of generating backlinks. Be sure to insert keywords into your product page description as well for better search engine visibility.
We have taken a look at 10 product detail page best practices to give you a comprehensive idea how to design a converting e-commerce webpage. In summary, consumers value an optimized and fast mobile experience with ease of navigation across your product page. Give your visitors a complete idea of what your item is all about in the description and overview. Keep in mind that you sell benefits, not features. After all, the best product pages instill a need for your offer and convert users into customers without letting them leave the page.
Creating an eye-catching look for your e-commerce product page is also a must, since cutting through the noise of competition is fundamental for any online store. Developing a converting product page is not always easy and can be exhausting for any e-commerce store owner.
If after reading our article you still have some questions, be sure to fill out our contact form. The Whidegroup team will help you find a sustainable solution to any of your e-commerce related issues. We look forward to hearing from you!
Share This Article
Very good written story. It will be valuable to anybody who usess it, as well as myself. Keep doing what you are doing – can’r wait to read more posts.
The global eCommerce market is booming with statistics estimating a global sales value of over $6.5 trillion by 2023 at an annual growth averaging around 20 percent. The best article so far, in respect of e-commerce. Not only your highlighted points but also explain each point with the help of practical example. A really helpful article.