SALES / SUPPORT : 844-261-1206 (Mon-Fri, 09:00-17:00 EST)

Perfect Product Pages: Turning Visitors To Customers!

By Eva Barnes , Jul 15 2016
Perfect Product Pages

Featured Image: iStock/milindri

In the world of ecommerce first impressions are everything. Many online store owners will spend a lot of tome perfecting their homepages and product category pages but forget about product page design. A great product page can make the difference between a visitor clicking that checkout button or leaving your site.

This post aims to:

  • Describe best practices for designing product pages (Divided into 4 sections)
  • List examples of well-designed pages
  • Analysis of the product pages

Why Product Pages Are Important?

The product detail page can make or break the sale. A page which has been designed properly makes two things happen:

  • The needs of the customer are fulfilled
  • The seller achieves the goal of selling

The following recommendations will help you create more persuasive product pages. Let’s take a look at the best practices.

The Basic Page Quadrants And Their Elements

When it comes to product page layout there is no one layout which can maximize conversions, that being said, the 4 section hierarchy is the most intuitive kind.  Major online retailers use the 4-Section layout, we go through the sections one by one and discuss what elements should be placed where.

Quadrant 1 Top Left Quadrant 2 Top Right Quadrant 3 Bottom Right Quadrant 4 Bottom Left

Quadrant #1—Top Left

Eye-tracking studies show that people instinctively see this section first when scanning a webpage. Take maximum advantage of this by placing the product images and title in this area.

Quadrant 1 Top Left

    • Product Title

    Eye-tracking studies say it should be placed at the top left either above the product image or at the top of the page

    • Product Image

    Use high-resolution images on a white or neutral background. Include zoom features and different angles

    • Sharing Option

    Include social icons from Facebook, Twitter, Pinterest and Instagram

    • CTA-Add to Wishlist

    Works as a means of prompting the customer to make a purchase

Quadrant #2—Top Right

This section, often called the “Buying Area”, is what gives the customer details about price, availability, discounts and more. See below for a full list of elements.

Quadrant 2 Top Right

    • Product Pricing

    List the recommended retail price (RRP), any discounts, and applicable savings percentage

    • Customer Reviews

    This should be in the form of a star rating and a snippet of the review. Add a link to the detailed review which should be located at the bottom of the page

    • Product Benefits

    Answer the question “Why should I buy this?”

    • Product Size/Amount Information

    List the dimensions of the product. The level of detail depends on the type of product, for example apparel/jewelry will require more information.

    • Product Code or SKU

    This helps the customer remember the product

    • Basic Delivery Information

    List cost, estimated time for delivery and add a link to a more detailed page.

    • Subsection: The Buying Area

    Availability of Product: Write “Ready to Ship”/ “In Stock”/ “Available Now”

    Colors/Pattern Options: Swatches of 5-6 options are fine, use a drop-down if you offer more options

    Size Guide: Show the relevant size guide as a pop-up

    Size Option: A drop-down menu is the best way to display sizes

    CTA-Add to Cart: Make it prominent by using contrasting color and clear text. Make sure you don’t use a flat button, choose a graphic which looks “clickable”

Quadrant #3—Bottom Right

This section contains a lot more details because, a customer who checks this section will be looking for information such as features, shipping details, reviews from other buyers etc.

Quadrant 3 Bottom Right

    • Product Features

    List all relevant information such as product materials, dimensions, cleaning/maintenance instructions, and technical details

    • Customer Reviews

    Keep this simple, make it easy to read and show the star rating prominently

    • Delivery Details

    Mention cost and shipping details for all regions, any track and trace options (Can be same on all product pages)

    • Return Policy

    List allowed time and any other rules (Can be same on all product pages)

Quadrant #4—Bottom Left

This section presents cross-selling and up-selling opportunities. Add recently viewed and recommended products in the fourth quadrant.

Quadrant 4 Bottom Left

    • Recommended/Related Products

    List related products and any complementary product you offer

    • Recently Viewed Products

    This helps the customer easily switch over to another product

Anatomy Of Some Stunning Product Pages

We take a look at some brands which have amazing product pages. Not only do they get the look right but also manage to hit all the marks when it comes to informative content and social proof. You can learn a lot from these professionally crafted pages.

Small business owners and entrepreneurs would do well to take a page (no pun intended) from the book of bigger brands.

1. Vintage Teaworks

Vintage Teaworks is a tea company which sells special blends created for tea connoisseurs. Their blends are inspired by seasons and vintage wines. This is what their product page for the Green Tea Sauvignon looks like.

Vintage Teaworks
Image Source

What We Love About it:

  • Specific preparation instructions which are quite handy
  • Social Proof in the form of customer reviews and a link to Steepster which is a sort of Yelp for tea lovers.
  • Option for a subscription-based sales which guarantees revenue for months
  • Strategically placed social share buttons

2. FiftyThree

FiftyThree creates beautiful and practical tools which have a traditional look but are built for the digital age. One of their products is a simple iPad/ iPhone stylus called Pencil. Encased in a slim wood case, the stylus looks elegant and classy.

Image Source

This is the product page for Pencil:

What We Love About it:

  • Clean design which draws attention to the product
  • Conveys all useful information in a few words by simply listing all the devices the compatible with the stylus
  • The company knows that the product might get mistaken for an actual pencil or marker, they make it explicit that Pencil is a stylus

3. Harry’s

Harry’s specializes in manufacturing high quality grooming products for men. Their brand has developed a cult following amongst men who prefer reasonably priced high-end shaving products.

Image Source

What We Love About it:

  • The background has been removed which brings the products sharply into focus.
  • The information about colors/ shipping is presented neatly
  • The Add to Cart button is prominent because it contrasts well with the background

These recommendations are quite detailed, keep in mind that most of these are already implemented in the templates available on major website building tools such as Utterweb, Wix, Weebly etc. You just have to customize the options according to your needs.

It is a good idea to pay attention to small details when creating ecommerce website. Get the details right and you will see an increase in engagement and sales.

About The Author

Eva is a marketing major with a keen interest in web design. She is also an explorer and loves to dig into web trends from mobile apps to visual communication and everything in between. Feel free to send her your web design queries or blog related feedback in the comments below.

One Comment on “ Perfect Product Pages: Turning Visitors To Customers! ”

  1. Cristopher Luvianos Says:

    I think one of your commercials caused my internet browser to resize, you might want to put that on your blacklist.

Leave a Reply