10 Practices to Create

the Best E-commerce Product Page

A 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.

What E-commerce Product Page Best Practices Teach Us

Product 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:

• Mobile responsiveness
• High quality imagery
• Product demo video
• Informative product overview
• Engaging product description
• Stock availability
• Clear shipping and return policies
• Social proof
• Speed and metadata optimization

Below, we will dissect these practices in great detail to help you create a converting e-commerce product page design.

#1 Implement a Mobile Responsive 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:

• Breadcrumbs navigation, in case a shopper decides to backtrack through categories without having to start the search over
• A sizable product image with a “heart” icon to quickly add product to favorites
• Product name
• Price
• A size selector
• And a call-to-action “Add” button

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.

#2 Create High Quality Product Images

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:

• Quality. Invest in a professional photographer to take high quality shots of your products. Make sure all of your product photography on the page can be clearly zoomed in and out.
• Quantity. One product picture won’t cut it. Upload multiple images to showcase your product’s features and characteristics from all sides and usage suggestions.
• Size. A generally-accepted recommendation is 1920×1080 for product images. Keep your product pictures consistent to the same size and photography style. Consistent images create a pleasant experience for shoppers and help them feel at ease in your store.

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:

• There is a multitude of pictures that demonstrate a product inside and out
• The pictures are crisp even when zoomed in
• They help shoppers understand the size of their products by using models
• All product photography is bright and centered to captivate the users full attention

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.

#3 Display Products In Action

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.

Product videos

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?

• Almost all of their product pages provide videos showcasing their items on models
• The average video length is 15 seconds
• Demo videos are shot from multiple angles and in action

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.

360 Degree view

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.

#4 Write Compelling Product Descriptions

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:

• Keep it short. Nobody likes reading long paragraphs of product description. Put the most relevant information first in case the reader skips through the rest of the text. Generally, product descriptions should be under ten sentences.
• Outline your buyer’s persona. Only when you have a clear understanding of who your buyers are, can you write copy that resonates with the problem they’re trying to solve or desire they want to fulfill. Use words, level of humor, and length of sentence that’s in line with your business image and appropriate for your customers.
• Describe benefits, not features. While defining your product’s primary features is certainly important, your buyers are much more interested in the benefits, how their life will be different or better because of your product and what they can reap from purchasing your item. Put emphasis on the advantages of your product, rather than plainly list characteristics.
• Get creative. In the sea of competition, crafting unique e-commerce product page copy can be a determining factor in securing a sale. If creative writing isn’t your biggest strength, consider hiring a professional copywriter to help you stand out in the market.

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.

For example, Dr. Squatch uses iconography to outline their products key features, alongside quirky copy.

Highlights:

• Notice the abundance of sensory words. Those are the words that evoke a sense of taste, smell, sound, or feel in our brains. Reading such a product description will certainly make you want to place an order.
• The description is easily scannable with illustrative iconography and strategically placed features.
• An explanatory video is present on the right hand side of the description.

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.

#5 Construct Informative Product Overview

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:

• Product title. Put the name of your item at the top to make it visible right away. Construct the title to make it catchy and memorable to your visitors.
• Price. It’s one of the biggest deciding factors for a customer, so be sure the price is clearly visible. If you’re running a sale or a markdown, compare the previous price with the current one to generate a fear of missing out in a shopper’s mind.
• Size chart. If your product comes in different size options, put the size chart in your product overview. Be sure to check and update the stock availability on the chart to avoid abandoned carts.
• Color variants. Position your color customization near the size chart so customers can quickly sift through their options.

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:

• The title is highlighted in bold to make it stand out on a white background
• Color variations are presented in icons depicting the shades and names
• The page offers two style options for this item
• A size chart consists of eight different options, as well as a helpful size finder quiz
• Contrasting call-to-action is the most visible button on the product page

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.

#6 Inform About Stock Availability

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:

• “Coming soon” marker replaces the product selection options
• A large “Notify me” CTA urges the visitor to fill out a contact form to be notified about product arrival

#7 Establish Shipping and Return Policies

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.

Shipping policies

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:

• Conditional shipping. Offer free shipping to your clients when they meet a minimal order threshold. Take your average order value and set the minimum about 10% to 15% higher to qualify for free delivery. This helps to cover your shipping costs and increase average order value.
• Unconditional shipping. Like the name implies, unconditional shipping means free delivery for every item and every order without any conditions.

Return & refund policies

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:

• Conditional free shipping is highlighted in a contrasting color for better visibility
• A company provides free returns as stated in a product overview

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.

#8 Connect Reviews to Your Product Page

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:

• Make it recognizable. Place your reviews panel where it can be easily found. Don’t make your customers feel like they’re playing hide-n-seek while searching for opinions.
• Keep things authentic. The worst thing you can do when it comes to ratings is to write fake reviews. Consumers yearn for authenticity and transparency to help them decide on a purchase. And nowadays, many can instantly spot a forgery.
• Don’t hide negative reviews. Censorship of negative comments is not tolerated by most consumers. A perfectly polished five star rating with no negative feedback is a clear sign that reviews have been manipulated. This can be detrimental to your brand’s credibility and image.
• Allow visual content. Statistics tell us that 62% of consumers were more likely to buy a product if they were able to view customer photos and videos. Let clients who have already purchased from you upload product pictures on a review panel.
• Implement moderation. Applying pre-moderation to your reviews panel means filtering any inappropriate content on your page, such as images not of the product, ads, insults, NSFW content, and even spam.

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:

• A bar at the top highlights key features and benefits that sell an experience rather than product.
• Below, there are three customer testimonials that link to a review panel.

#9 Optimize Your Load Speed

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:

• Reduce the number of HTTP requests. The browser makes a separate HTTP request for every little file on your product page. The more files on the page, the more HTTP requests, and consequently the longer your web page takes to load.
• Optimize images on your product page. Large image files are a common culprit of slow website speed. You can make images lighter without any visible distortion using a plethora of available tools online, such as ImageRecycle, Kraken.io or TinyJPG.
• Employ CDN. CDN is a geographically distributed group of servers that shortens the distance information has to travel between your server and the end user. Ultimately, decreasing the loading time of your webpage.
• Minify CSS and JavaScript code. Minification is a process of removing unnecessary data from the code to reduce the number of requests to the server and thus reduce load time.

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%.

Check Out Our Website Optimization Case Study

Your Store Might Also Have Space For Improvement

Check out now

#10 Work on Your Metadata

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:

• Title. The title of your product page will be visible in search results, the browser tab and social networks. Create a relevant, appealing and descriptive title to grab the attention of your leads and invite them to your webpage.
• Description. Write a short, but informative meta description to explain what the users will find on your e-commerce product page after clicking the link. Generally, meta descriptions should be somewhere between 100-150 characters.
• URLs. Craft a concise uniform resource locator (URL) that briefly tells the search engines and visitors what your page is about. Generally, product page URLs correspond with product titles.
• Alt text. This is the text within your webpage images. Include them for all your product images to increase findability and indexability of your product pages for search engines.

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.

Final Thoughts

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!