Best E-commerce Product Page: Tips & Examples for 2023

Imagine the online shopping experience without product pages.

You‘d enter the e-commerce store and see only one “storefront” — a massive list of all the products in one place. No detailed descriptions, no photos showing the products in use.

To me, that's every customer's nightmare.

E-commerce product pages benefit both online shoppers and merchants. They are supposed to give buyers enough information to help them assess if the product is right for them, and convince them to make the purchase.

Technically: The better the pages, the higher the conversion. What’s the secret to a successful product detail page, then?

Product pages — best practices

  • Invest in product images and videos
  • Write informative product descriptions
  • Introduce delivery information
  • Highlight customer reviews
  • Try cross-selling and upselling
  • Pay attention to UX and accessibility

Invest in product images and videos

Product images are crucial, especially for fashion, makeup, and lifestyle brands.

The key is to include high-quality images that show the product from a variety of angles and help customers grasp its scale. For a better experience, allow shoppers to zoom in on the images to see every product in detail.

Make sure the first image that online shoppers are going to see is the most appealing of them all. The featured product image can make or break their first impression — it determines whether site visitors will be interested in finding out more about the product, or not. +

When in doubt, go for a centered product image with a light background — as ZARA and plenty of other e-commerce sites do.  

Product detail page example from ZARA.
Product detail page example from ZARA


As for the rest of the images, include at least one that shows the product in use. If you’re not doing product videos yet, try doing them for at least part of the inventory, and see if they make a difference for checkout conversion.

💡 More and more brands are adding more inclusive and real-life examples by featuring the product on their actual clients, averaged-size or plus-size models, as well as models with disabilities. If you can, consider joining in on the trend.      

Inclusive product page example from Zalando.
Inclusive product page example from Zalando


When adding high-quality images and videos, though, keep them “light”.  You can use Google PageSpeed Insights to check how fast the product pages are loading, and look for improvements.

As a rule of thumb, following your e-commerce platform’s image guidelines should help you balance quality, zooming abilities, and site loading times.

Write informative product descriptions

As you might remember, the main purpose of the product page is to give online shoppers enough information to “facilitate” the purchase. This typically means:

  • Straightforward product title
  • Price (and available discounts)
  • Different size & color options
  • Relevant labels and tags (e.g. indicating more sustainable products)
  • Exact measurements (preferably with a link to the size guide)
  • Materials and components, along with care instructions
  • Detailed description showing off unique product features

💡 Speaking of… Why not make your product descriptions more engaging? Try adding a “personal touch” instead of copy-pasting generic product details. The more in line with your brand voice, the more the product descriptions stand out from other e-commerce stores.

Just take a look at the product description (and the whole product page) created by Benefit Cosmetics:

Product detail page example from Benefit Cosmetics.
Product detail page example from Benefit Cosmetics


No matter the exact details, you're likely to start wondering: How to fit everything on a single page?

You can use drop-down tabs, overlay boxes, hovers, and ‘Further reading’ options — this way you won’t crowd your e-commerce product pages with too much information.

If you’re not sure what the key elements of your product pages actually are, you can always A/B test them to see which product page layout (or tone of voice of your product descriptions) performs better.

Product page example with bullet points drop-down tabs from Desigual.
Product page example with bullet points drop-down tabs from Desigual

Introduce delivery information

Have you ever wondered if products you’re about to buy can be delivered to your address?

Exactly.

There is no longer any reason for shoppers to wait until the last step of the checkout process to see the delivery options. In fact, plenty of them would rather shop based on their delivery experience.  

With shipping information introduced as soon as possible, potential customers do not have to guess, predict, or rely on previous shopping experiences to understand how, when, and where they can receive their purchased products. This actually creates higher chances of the purchase and less frustration afterward.

Customers won't keep finding out that there are only limited delivery options available, or even worse, that the order can't be delivered to their address.

Product page example with delivery details from Hatstore.
Product page example with delivery details from Hatstore


💡 Hatstore, among other e-commerce brands, uses Ingrid Product Page to display shipping details well in advance. The widget simply integrates into the product page and shows delivery times, prices and options before checkout.

This way, customers can get all the information about the available delivery options for the chosen product before adding it to the cart.

Ingrid Product Page in action.
Ingrid Product Page in action

Highlight customer reviews

If you want to optimize your product pages even further, you can also experiment with customer feedback — such as product ratings and reviews — left by customers.

Why? Social proof. It turns out that people adapt their behaviors based on what others do.

Collecting and showing customer reviews can be convincing for online shoppers since the more customers are there, the more desired the product seems.

💡 You can take a step further and add product photos made by your customers. Nothing works better as social proof than user-generated content. If that seems like a lot to handle, the good news is that tech solutions like Junip make the whole process of collecting customer input and displaying them in your online store much easier.

Product page example with customer photos from Zooplus

Try cross-selling and upselling

Related items (think “Complete the look” add-ons), matching accessories, or popular products (like “People also buy”) can easily be shown along the way to increase the Average Order Value.

If they’re relevant, that is.

The trick is to show complementary items, not necessarily similar ones. Think about it: If you just bought two pairs of jeans, you're unlikely to add a third one to the order right now. But, you might be tempted to buy a nice shirt that could go well with your new trousers.

💡 Speaking of relevant deals: Another incentive for increasing the order value and making the purchase is also free shipping (or additional delivery options offered after reaching a certain delivery price point).

The only issue is that setting the free shipping threshold is not always intuitive.

Product page example with cross-sell options and free shipping bar from IDEAL OF SWEDEN.
Product page example with cross-sell options and free shipping bar from IDEAL OF SWEDEN


With Ingrid Delivery Upsell, however, IDEAL OF SWEDEN was able to experiment with consumer preferences in the Dutch market by setting the free shipping criteria to a cart value of 45 EUR or above.  

The results? 7.81% increase in the transaction conversion rate, and a 7% boost in the Average Order Value. The brand is currently testing and scaling this option up for other markets.

If that sounds like something you’d like to do as well, book a demo to find out more about Ingrid.

Pay attention to UX and accessibility  

Here's the thing: Even the best quality, value, curation, and sustainability of your products can’t compensate for bad user experience (UX) design.

For starters, make sure it’s easy to add products to the shopping cart. This might seem like a no-brainer, but sometimes the call-to-action gets lost in the myriad of product details.

On this note, don’t try to get innovative with the CTA here —  a standard “Add to cart/bag/basket” will most likely do just fine.

💡 If your customers have to look hard for it or need to figure out first if that’s the right button, it’s never a good sign. It should always be clear what happens upon clicking the button or a text link.

You can find plenty of tips regarding CTAs on the Internet (such as limiting the number of words in your call-to-action to two), but the best way to see if they work for you is to A/B test them.

Product page with a clear CTA from ASKET.
Product page with a clear CTA from ASKET


When discussing the user experience, though, it’s hard to argue that every customer is different, and acts differently when shopping online.

A lot depends on the context. The online shopping experience will look much different if the shopper has already seen the product in a physical store, for example.

They might also be familiar with the brand and land on a product page when browsing the homepage, category pages, or using the search function in the e-commerce store.

In theory, such customers wouldn’t need a whole lot of convincing to buy from you again.

On the other hand, a first-time customer might start their shopping journey with Google to look for something specific, but not in any particular store. Then, they eventually land on a (well-optimized) product page and get familiar with the e-comm brand and its assortment.

But what if any of those customers is hard of seeing?

This might happen more often than you might think. For older customers or people with visual impairment, shopping online can be pretty difficult.

Ultimately, an accessible e-commerce website is one that can be accessed by shoppers of every age, with any disability, within any context, having any skill, and living anywhere with an active internet connection.

💡 If you’re not sure where to start to make your website accessible, solutions like EqualWeb’s AI ToolBar come to your rescue. The toolbar has three main remediating adjustments: Navigation, Color, and Content Adjustment. Each of them has a dropdown menu of multiple accessibility functions (32 in total) catering to a wide range of impairment issues.

Product page example from Bershka with the EqualWeb AI ToolBar available.
Product page example from Bershka with the EqualWeb AI ToolBar available


Still, accessibility is just one way to be there for your customers. Offering support is equally important, both before and after the purchase.  

To do so, provide contact information to your customer service team, and include links to any additional information online shoppers might seek on your site. A link to your returns & shipping policy page, for example.

Product detail page example with a link to the shipping policy from Nudie Jeans.
Product detail page example with a link to the shipping policy from Nudie Jeans

Key elements of the best product pages revealed

Ultimately, the best product page examples have at least a few things in common:

✓ High-quality product images and videos

✓ Informative product descriptions

✓ Multiple delivery options shown in advance

✓ Honest customer reviews

✓ Relevant cross-sell and upsell deals

✓ Accessible, inclusive design

When in doubt, draw inspiration from other e-commerce stores and experiment with tech solutions to improve, A/B test, and optimize your checkout experience — including product detail pages.

Once you're at it, you might want to give Ingrid a try. Book a demo to see why.