Perfect Product Pages: Turning Visitors To Customers!
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
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.
• 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.
• 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.
• 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.
• 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.
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
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.
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
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.
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.