Ecommerce Web Design: 6 Elements Every Good Product Page Needs

Designing a good product page can be quite a challenge. You want to stand out but, at the same time, give your audience a format they’re used to. Pages that look nothing like what the customer expected and provide poor UX will see lower conversion and engagement rates. 

The Zara website is notorious in the design and marketing industries as an example of horrible UI. They are often given to students as an exercise, aiming to teach them what not to do. Were the brand any less popular, their lack of usability would cost them dearly. 

Let’s look at six brands that have done it right and explore the key elements every good product page needs. 

Reviews That Include User-Generated Media 

Customer reviews are an integral part of any well-designed product page. 

  • They are trusted by 84% of shoppers as much as personal recommendations. 
  • They can be used for various marketing purposes, including email and social media marketing. 
  • They boost your trust and credibility, proving that you’ve worked with real people. 
  • They give you a chance to communicate with customers, thank them for their insight, and show how you solve problems when they arise. 
  • They can also be used to improve your products and service. 

Reviews should be listed below the product description and photos. You should, however, feature a star rating at the top of the page: near the price and title. This will encourage shoppers to read the reviews and engage with your page.

To further boost the value of your product reviews, enable customers to add their own photos (or video) to the review. This will significantly increase both your credibility and the appeal of the product. 

No matter how many photos of a product you take, customer photos will always be a bit more interesting because they will show the product in real life. Even if the quality of the photo isn’t great, if a customer says a product is great and backs the claim up with an image, it will carry a lot of weight. Plus, reviews with user-generated photos are even more trustworthy. The person clearly owns the product. 

Take a look at the female professional dress form page on Dress Forms USA. The reviews come with photos of dressmakers using it, showing you the quality, size, and various uses of the product. This makes it much easier to determine whether this is the product you are looking for or not. 

Notice how the brand has also made it easy to look at just the photos by making them all available at the top of the reviews section.

Screenshot on reviews


Shipping and Delivery Transparency

One of the most common conversion obstacles is a lack of transparency. Shoppers want to know how much the item will cost, whether there are any extra charges, how much the shipping will be, do they need to pay extra for faster shipping, do they need to pay import taxes on top of that, when their package will arrive, etc. 

Understandably, you may not be able to answer all of these questions directly. Failing to address them completely is what you are trying to avoid. 

Provide as clear information as you can about shipping costs, timelines, and delivery expectations. Talk to the couriers you work with to ensure that it’s as correct as possible. Don’t write these parts of your page in legal speak. Write it clearly and use everyday language. 

Don’t be purposefully vague, but tell it like it is. “We will aim to get your order to you in 5-7 workdays, barring any unforeseen delays. If they should occur, we will keep you notified via email” — simple, effective, and clear. 

Of course, if you can offer specific shipping timelines, that would be the best possible solution. The Somnifix Mouth Strips site features an interactive timeline that lets you choose the destination country and gives you a precise date for shipping and how long your money-back guarantee will be valid. 

This element goes a very long way in overcoming any questions a customer might have had about the 30-day guarantee, when it ends, and how much the return will cost. It reduces customer service calls, but it also instills a sense of security in customers: here’s a brand that takes us seriously and that cares about us.

Checkout Progress Steps


Relevant Trust Signals 

Another great way to overcome these conversion obstacles and demonstrate product and service quality is to use relevant trust signals that clearly address a specific point. 

What these trust signals will be will depend on the product itself and the proof you are able to offer. For example, listing any awards or accolades the product has won is a great way to showcase its value and overcome any quality qualms your customers may have about it. 

These trust signals should ideally be grouped together logically and seamlessly blend into the rest of the page. You can place them just below the main product section (description, images, price, etc.), or you can place them at the very top of the page. Your goal is to make them noticeable but not to make them shine brighter than the product itself. 

This Gili Sports product page is a good example. The page has a section that offers top-level trust signals: the shipping is fast, you have a two-year warranty on the item, you can get your money back for 60 days, and you can save a lot if you buy two boards. 

The single sentence that accompanies these trust signals is also a winner. It tells visitors exactly who the product is for: beginners who don’t have a big budget. Each product page has a unique one-liner that sums up the product effectively, further helping customers choose the product for their specific needs.

Social Proof Example


Relevant Product Information 

This might seem like an obvious point, but a key element of every product page is the relevant information about the item. The operative word in that sentence is relevant

You may have noticed a lot of brands tend to jam-pack their product pages with lots and lots of information. And while this is a laudable effort, most shoppers don’t want to know all of that and will quickly get overwhelmed if they need to spend more than a minute taking in the product. 

It’s one thing to provide a collapsible menu that provides extra information on the use and ingredients of the product. If this is relevant — for example, if you sell skincare — you should definitely feature this element. However, if you sell a mug, you don’t need to describe it at great length. Customers will want to hear about the dimensions and material, and they’ll want to know whether they can chuck it in the microwave and dishwasher. Having great images of the mug will be more important than describing it at length.

Honest Baby Clothing’s 5-pack cotton sleeveless bodysuit is a great example of a relevant product description. There’s a brief text about the item, telling you what it is and describing the fit and quality. The bullet points are there to recap these points and tell you what you actually want to know: what the item is made of, how easy it is to put on, and whether it can be washed in the washer.

Product Features Example


A “Save For Later” Option

Another great option you should consider providing for your customers is a “save for later”, also known as a wishlist. There are numerous benefits to offering this perk:

  • Customers will be reminded of products they liked but have not purchased yet, increasing the chances of converting at a later time.
  • Since creating a wishlist also means creating an account, you can improve your targeting and email marketing efforts.
  • You will know exactly what items a customer is interested in. This enables you to send them highly personalized offers and discount reminders, further boosting conversions.

All you need to do is feature an “add to wishlist” button to your product pages. You can, of course, call them something else if you want to brand them or stand out a bit.

For example, you can save Saddleback Leather Co’s leather tote bag to an existing wishlist if you are already registered, or you can even create a new wishlist if you’re considering a present for someone. It’s such a simple tactic, but it makes for great UX and future conversion optimization. 

Brown Saddle Leather Bag Example


Easy-To-Choose Variations and Upgrades

Finally, you also want to make it very easy for your shoppers to choose a different option. If the item comes in different sizes, scents, colors, etc., make sure selecting them is not a time-consuming and complicated process. 

You don’t need a separate page for each of these items, for example. You especially don’t want the page to reload for several seconds every time a new option is selected, even if you do need to change the product image. Make sure to optimize the page so that switching back and forth is seamless and quick. 

Also, make the options quite clear. What is it that can be customized? 

Look at Beardbrand’s Utility Softener beard conditioner. Switching between its three fragrances is simple, and the page does not glitch at all. You can then also choose whether or not you want a dispenser (and you are told how much you save by choosing this option), and there is the added bonus of choosing a subscription.

This last option is also seamless. You get to pick how often you want the product delivered and you get the necessary details: you can pause it, cancel it or skip a month at any time. The page provides a great user experience, plenty of customization options and makes the entire process seamless and quick.

Example of product variations


Wrapping Up 

Before you go ahead and start implementing any of these product page best practices, take some time to analyze your current design and layout. What is working well, and what could be further improved? If you have a solution in place that clashes with what we’ve recommended here but it’s working for you well, stick with it. There is no general rule in design that will guarantee something will work for every brand.