Product page design: Ten top tips

Homepages are the shop window of your online store. They introduce the brand, tell a story, and guide shoppers in the right direction. But for ecommerce brands, where the real goal of the website is sales, the main focus must be on the product pages. In this article, we give our top tips on product page design for high conversion.

A clean design a key element of best practice UX design in general, but it is especially important for product pages. Why?

A clean design allows shoppers to find key information easily without distracting them from the main goal: to click ‘Add to Cart’. Make sure that your customers can find this information and don’t need to go looking for it elsewhere, potentially losing you a sale.

The majority of product pages follow a similar layout: product image on the left, product copy on the right with the ‘Add to cart’ button close by and prominent. This structure is what customers are used to and looking for. So stick to it to help them go through the shopping journey with ease.

Include core information and the call to action above the fold. More detailed product information, product storytelling, customer reviews, and recommended items can be included below the fold (more on this later).

According to Nielsen Norman Group, scannable, concise, and objective product descriptions improve usability by 124%.

Make key benefits pop without exaggerating them, and use bullet points and short paragraphs to help shoppers begin the buying process as quickly as possible.

It goes without saying that product photography is vital for success in eCommerce. As your customers can’t see or feel the products in real life, your product photography has to do the selling for you.

Here are the key types of photos you should include in your product page design:

PRODUCT

The simple photos of just the product on a plain white background with minimal distractions. Don’t forget to show multiple angles of your product, zoomed in images, and include product variants, too.

LIFESTYLE

Show the product in situ in a real-world environment to help your customer envisage owning it.

360 DEGREE

To create a more immersive experience, include a 360 degree image that allows the user to move the image to see all angles.

GIFS (OR VIDEOS)

Moving image is a real bonus as it adds visual clarity and helps to communicate texture and movement of products through a screen. According to Wyzowl, 84% of customers are more likely to convert after watching a product video.

Be crystal clear with the product pricing as well as any additional extras like shipping. Research by Statista shows that 40% of customers say they would abandon their cart if the cost of delivery was higher than anticipated. So include these underneath the ‘Add to Cart’ call to action.20% of shoppers would abandon their cart if their preferred payment method was not shown (Statista). So offer multiple payment methods, including express checkout options like Shop Pay, G Pay and PayPal.

Make the “Add to Cart” and “Proceed to Checkout” buttons clear, consistent and highly visible.

And always make these calls to action a button. Online shoppers have been conditioned to look for a button, so text links and other non-standard UI will create confusion where you definitely don’t want it!

Customers trust other people’s reviews 12x more than manufacturer descriptions (eMarketer). So it’s important to add credibility to your product pages with reviews and testimonials from other customers.

Not convinced? These stats might change your mind:

• 93% of customers read online reviews before making a purchase.
• 62% of consumers are more likely to purchase if they see photos and videos of other customers.

If you don’t include customer reviews in your product page design, shoppers may go elsewhere to find them, or worse, to shop.

In addition to reviews you can also add social proof by showing how many people have purchased a product or how many are left. Creating scarcity and a sense of urgency can increase sales by as much as 332% (Conversion XL).

Don’t miss the opportunity to cross-sell with your product page design.

For wearables, often your model will be wearing other items with the one you’re selling. Include these in your recommended products to help customers complete the look.

Avoid recommending products that look too identical. This can cause confusion and, ultimately, fewer sales.

In addition to the core product information above the fold, it’s a good idea to include a more robust product discovery further down the page. This can consist of graphics that highlight the features, benefits, and materials of each product along with user-generated content.

Leveraging video content is a great way to boost conversions and anticipate and answer frequently asked questions. According to Kissmetrics, site visitors are 64-85% more likely to buy after watching a video on a website.

Make sure your product pages are fast and responsive. Slow pages can kill confidence, breed impatience, and send your customers elsewhere.

So ditch the overly designed pages for ones that load quickly.

Find our top tips for improving your website speed here.

Make sure that your product page design is consistent across your entire site. This will help customers know what to expect, how to find information quickly, and where to find that all-important call to action button.This consistency will breed trust and ultimately improve conversion.

Propeller is a Shopify Plus ecommerce agency specialising in web design and development, SEO and UX. To discuss how we can transform your online store and drive conversions, get in touch.