How to Design a Customer-Winning Product Page for Your eCommerce Store: Part 1

Last updated on November 1, 2016

8 Must-Have Content On Your eCommerce Product Page to Supercharge Your Online Store

Damn it, Amazon! You make shopping in my pajamas way too easy. Stop taking all my money!

Okay, so that was a bit over-the-top.  I actually love Amazon. How can you not?

I’m addicted to shopping online. Why get out of my pajamas when I can finish my back-to-school, grocery, and monthly restocking shopping all in one fell swoop?

Shopping online simplified my life and gave me an unimaginable number of selections right at my fingertips.

This also means that if you are building an online store, you can access way more shoppers than ever before (compared to a brick-and-mortar store).

eCommerce is here to stay and it will only become more competitive for merchants (like yourself).

ecommerce product page - global spend 2015

Data Source: Remarkety.com

So, what does this mean for you?

Pro: You’re in the middle of a tremendous period of growth (like the gold rush way back in the days). People are looking to buy and consume more than ever before in the history of mankind – and they are shifting more dollars to shopping online.

So if you have an eCommerce website already (or if you’re thinking of starting one), you can ride the eCommerce wave.  Brick & mortar businesses are in trouble.

Con: The online market is going to become more competitive. This just means your online business needs to deliver a better experience than your competitors.

Ask yourself these questions:

Does your online store stand out from your competitors? Is your eCommerce website design optimized to win over your customers?

If your answer is “not sure” or “I haven’t put much thought into this“, then you need to continue reading this post.

You see, your eCommerce website (especially your product pages) needs to be designed properly, so you can effectively turn browsers into buyers after they arrive on your online store.

In this guide, we’ll show you tips and tricks on how to create an eCommerce website that can help turn your visitors into your customers.  This is one way to make sure you’re ahead of your competitors!

Let’s get started!

 

How You Can Design an eCommerce Website That Converts Browsers into Buyers

I’m sure you’ve heard that your homepage is one of the most important pages on your website.

Well, that is true but only if you are not running an eCommerce website.

No doubt, your homepage is a very important page and should never be neglected.

However, for an online store, your product pages are arguably the most important pages on your website.

Why? Because your product pages are where you turn browsers into customers!

While all the pages on your website collectively create the overall experience and branding for your online store, it is on your product pages where your customers will make the pivotal decision of “I’m buying this now” or “Meh, maybe I’ll check elsewhere.”

If you were to optimize only one thing in your online store, it should be your product pages.

So, how do you design a product page layout that can capture your customers’ love (and wallets)?

It’s not as hard as you think. Just follow proven methods by leading online stores, and techniques tested by leading conversion specialists.

There are no guessing or complicated design philosophies to master. Just follow this 2-part series to design your perfect product page layout:

Post Sections

Part 1: [You Are Here]  How to Design a Customer-Winning Product Page8 Must-Have Content to Supercharge Your Online Store

Part 2: Anatomy of an Effective Product Page Layout DesignReady-to-use Designs You Can Copy to Instantly Improve Your eCommerce Website

On to Part 1…

 

Part 1: What Content Should I Include in My Product Pages?

Creating a good product page layout that your customers actually find helpful has nothing to do with design skills.

Yup, that’s right!

The key to creating a successful product page is to know what visual stimulus helps you attract the consumers you are targeting, and make them react the way you want them to.

I know this sounds like some sort of a Jedi mind trick, but bear with me and let me explain.

For example, research has shown that the color orange appeals most to impulsive shoppers, while the color blue and teal attracts the budget-conscious buyers.

You can pick the color of your add-to-cart button to match the type of consumers you want to attract — impulsive or budget conscious buyers.

(If you want to learn more about psychology of color and how to pick the right color for your website, see this guide)

This is why designing an effective product page, doesn’t actually require any hardcore design skills. You just need to:

  1. Figure out what type of customers you want to attract, then
  2. Use proven, field-tested visual stimulus to target these customers (we’ll go over these below).

Do you want your product pages to attract the type of customers you want and convince them to buy your products?

Of course you do, otherwise, why are you reading this post?

Knowing how to create a highly converting product page is a hot topic; countless research and tests have been done to understand what makes people want to buy a product or service.

You can leverage this knowledge to your advantage, so you too can build highly converting product pages.

Based on these research, all successful product page layouts share similar traits and we will share them with you below.

Side Note: This best-practice list is based on credible studies on consumer behavior. However, results could differ from website to website and from business to business. This list is meant to give you the best possible starting point and you can continue to improve upon it. It is always a good practice to constantly test different methods to further optimize your website.

#1 Amazing Product Image

When you go into a high-end boutique store, you see a gorgeous handbag displayed on a glimmering pedestal glowing beneath a roll of spotlights.

ecommerce product page - product images

Why does the store need to display an already gorgeous bag in such dramatic way?

Because it makes the bag look even more amazing!

Selling to consumers is all about presentation. When you make a product look better, more desirable, and appear to be of higher quality than it is, you make people want it more.

In your online store, your product images are the pedestal with rolls of spotlights where you display your products.

This is why 9 of out 10 people say product images and videos affect their purchasing decisions.

ecommerce product pages - product images stats

Data Source: Poweredbysearch.com

The quality of your product images directly affects your ability to generate sales.

This is especially true when your visitors can’t touch, wear or interact with the product in person, as they are shopping online.

Creating amazing product images should be your #1 priority because they need to be so good that they can compensate your visitors for not being able to touch, try and interact with the products in person.

Don’t know what makes good product images?

No problem, simply follows these 5 golden rules below:

Rule #1: High Quality & Custom Images

Rule of thumb:

    • Always use high-quality images that are not fuzzy (looks cheap) or are too small to see any fine details.
    • When possible, invest in custom product images that really show off your products and can make your brand unique. You can do this with just your mobile phone as long as it has a decent camera (the latest iPhone will do just fine).
    • Each product image should be of uniform size and style across all product brands you carry.

ecommerce product page design quality image

Tool Tips: Don’t know how to use Photoshop to edit your images?   There are really user-friendly, free online image editors that you can use to clean up your product images.

How to Edit Images Like a Pro All By Yourself

Rule #2: 360 or Views of Product From All Angles

Uncertainty and missing information are the top reasons why people decide not to buy a product online.

You can easily address some of the uncertainties by providing 360 views or images showing the different angles of your products.

It is always better to give your customers more information, than too little details.

ecommerce product pages design 360 image

Nike gives their customers every possible view of their sneakers and makes sure there is nothing left to chance.

Rule #3: Product Variation Images

58% increase in sales when there are multiple product views.

Data Source: Poweredbysearch.com

If your products come in different colors or materials, make sure you have images for every version.

There is nothing more frustrating than trying to make a purchase decision with nothing more than a tiny color box!

ecommerce product page design product variation image

These pattern images are not helpful at all. Wouldn’t it be more helpful if you can see the product with these patterns?

Make sure you display different variations of your products so your customer can see exactly what they are getting.

ecommerce product page designs product variation example

Nike does a great job here. They show each color of the shoe in a thumbnail. When you click on a different color, you get the full set of product images in that color.

Again, Nike leaves nothing to chance and removes as many doubts as possible, so shoppers feel confident enough to purchase online.

Rule #4: Detailed Views

55% of people don’t buy online because they prefer to examine the item in person.

Data source: Forrester & UPS

Detailed and zoomable images give you the next best thing to physically touching and feeling the texture of your product.

Your product images need to be able to show enough details that your shoppers don’t feel the need to go to a store and look at the actual product in person.

ecommerce product page design detail zoom

Cole Haan does a very good job at showing the texture of the suede and the details of the wing tip.

Rule #5: Images with Context

“Will the bag look too big on me?”

“Sure, it looks good on a 6′ tall, skinny model, but I’m 5′-4″ and average.  Will it look good on me?”

These are the questions that images with context can help answer. When you show your products being used in real life, they allow your shoppers to imagine using them.

Example #1: You are selling swimsuits and you can have pictures of models of different shapes and heights wearing the same swimsuit. State the shapes, heights and measurements of the models so your shoppers can have a better sense of how the swimsuit might look on them.

product page design image with context

Example #2: You are selling a messenger bag. Size can be deceiving in images, so take pictures with everyday objects that will give a better representation of the size of the bag. You can also show what items you can fit in the bag. This gives your shoppers an idea of whether the bag is big enough for them.

product page design image with context

Your product images are your best tool to allow your customers to feel, touch, and try your products without physically being there.

You don’t need to be a master photographer to create great product images — The image quality just need to be good enough.

Rule of Thumb: Your product images need to be helpful to your customers.

It doesn’t matter how beautiful your images are if they don’t do a good job at answering, “How this will look if I were to use it?

ecommerce product pages design image unhelpful image

Unhelpful product image: Very artistic, but not helpful to online shoppers trying to make a purchasing decision.

This product image may look artistic and beautiful, but it is pretty useless for your shoppers who are trying to decide whether or not to purchase.

The image doesn’t tell them very much about what it will be like to own the product, and how it will make their life better.

Take-away: Review your product images – do your product pictures help your shoppers understand how it feels to own the products?

#2 Helpful & Interesting Product Descriptions

Product description is the second most important item on your product page that can help persuade your shoppers to make purchases.

Your product summary needs to have enough information so that your shoppers can make informed decisions on whether a product is right for them.

ecommerce product page design - product description

What makes a good product description?

    • Be helpful, not “salesy”  Clarity wins over persuasion every time. You want your shoppers to have a clear idea what they can expect from the product. Make sure not to over-promise, because that is a recipe for refunds and negative customer reviews.
    • Only include information that your shoppers actually care about  Don’t just insert a laundry list of specs that you get from the manufacturer! Description and specifications are two different things, so make sure to keep them separate. Describe your opinion and experience of using the product. Help your shoppers understand how this product can help them.
      • For example, if you were to buy an iPad, what do 16GB or 32GB actually mean to you. You know that it is storage and bigger is probably better, but you have no idea how much storage you actually need. What if the description tells you a 16GB iPad can store 3,840 songs or 250 apps? Doesn’t this make a lot more sense to the average person than just listing out 16GB?
    • Provide a short and long version of your description –  79% of people scan rather than read, so you need to create something short and to-the-point to satisfy these scanners. However, for those who like to read more in-depth about your product, make sure you have an expandable, longer version of your description to address any concerns.

Knowing what to write is half the battle and know how to write is the other half.

You need to present your information in a clear and easy-to-read format, so your message doesn’t get lost in the process.

How to write a good eCommerce product description?

Here are some tips on how to keep your descriptions simple and readable:

    • Avoid Long Sentences – Long sentences are hard to digest. Avoid using complex and wordy sentences. Imagine you are explaining the product to a 10 year-old child.
    • Avoid Clichés – Keep it professional and avoid any cheesy clichés. Clichés don’t help to improve your shoppers’ understanding of your products, so just leave it out of your descriptions.
    • Avoid Complex Vocabulary – Write the way you would when recommending something to a friend. You are not writing a university research paper, so no need for complicated words to try to sound intelligent or clever. Research has shown that the best writing level for optimal understanding is grade 5 to 7. Here is a nifty tool you can use to test how readable is your description – readability checker tool.

Take-away: Review your product descriptions and see how you can improve them with our tips above!  Remember, don’t just list out all the specs of your products. Write content that will help your shoppers understand the benefits of using your products.

#3 Product Demo Videos

Product images are good, but videos are better!

The #1 place consumers go to search for product reviews is YouTube.

31% of consumers bought products after being convinced by product videos.

Data Source: Poweredbysearch.com

A good product demo video not only gives your shoppers that extra personal touch they need, it also serves as a great traffic generation tool when you post it on video websites like YouTube.

The video gives you a chance to “sell” to your customers that just can’t be done with a text product description.

Just by watching a person hold, touch, and interact with the product while explaining its pros and cons is the next best thing to visiting a store and talking to a sales associate.

product page design - product video

Skip Hop does a very good job here by using a video to show how many things you can fit in their signature diaper bag.

For moms who are wondering if the bag is large enough to fit everything, this video directly addresses this concern. The video also points out a very good selling point that most people might miss – how light the bag is.

#4 Clear Placement of Prices

When we were running our eCommerce store, we actually received emails asking us where the prices of our products were located.

While we only received a couple of these emails a month, it was enough to make us change our product layout design to make the prices easier to spot. We probably lost a lot of potential sales as we had no idea how many of our store visitors just walked away without emailing us to inquire about our prices.

You need to display your product prices in a very prominent way.

Consumers at all income levels are price conscious to a certain degree. This is true whether you are selling a $10,000 luxury watch or a $5.99 doggy toy. No matter how much they might love your products, if the prices are beyond their budgets, they won’t buy from you.

It is much better to just show shoppers the prices immediately and let them judge if they want to spend that amount.

How to display your prices clearly:

  1. Use a larger font size: the price should be the largest or one of the largest font sizes on the page.
  2. Use contrasting color: use a color that makes the prices standout from its surround content.
  3. Place it near the buy button OR Title: The buy button usually grabs a lot of attention, so place the price above it to make it more visible. Another good spot to place it is directly below the title. People’s eyes are naturally drawn to the top of the page, so the title is often the first or second thing they will see.

Real examples:

Good

ecommerce product page design price good

Click to enlarge

The large font size that immediately catches my attention. While it’s not using a bright font color, it contrasts well against the bright orange button.

Bad

ecommerce product page design price bad

Click to enlarge

The price is inside the button that is not very large and it is not displayed in an attention-grabbing color.   I had to search around for both the price and button, which was a bit annoying.

#5 Clear Add-To-Cart Buttons

The goal of your product page is to get your shoppers to click the “add-to-cart” button, so the button needs to be the most dominating element on your page.

You want your shoppers to know what the next step is if they want to buy your product, and a prominent add-to-cart button is a great way to nudge them forward in the right direction.

What does a clear add-to-cart button look like?

  1. Use a contrasting button color: Studies have shown that orange or green button colors get more clicks. While this might be true, the color may not look good with your website design. The rule of thumb in choosing a button color is one that contrasts your page’s background color and surrounding text color.
    • Example #1, if your background is navy blue and your text is white, a cream or beige color will make the button stand out.
    • Example #2, if your background is light gray and your text is black, you can pretty much use any bright color as your button.
    • If you are having trouble picking a color for your website, see our post on color picking.
  2. Use sizeable button & text: Make the button large enough to spot, but not so large that it looks tacky.  If you can’t find the button in 3 seconds or less, it is not big enough.

Real examples:

Good

ecommerce product page design button good

Click to enlarge

Skip Hop does a good job with the add-to-cart button. It is bright and welcoming. I can easily find it, and it doesn’t look tacky.

Bad

ecommerce product page design button bad

Click to enlarge

Whipping Post’s add-to-cart button is very chic, but it blends into the content. While it has a border around it, it doesn’t demand my attention or make me want to say, “Yes, let’s click this button!

#6 Display Customer Reviews & Ratings

85% of consumers read online reviews before making a purchase.

Data Source: Poweredbysearch.com

People use reviews a lot to judge whether or not they should buy a product.

Start collecting reviews and ratings from your customers on your product pages as soon as possible.

One of the biggest reasons businesses don’t want to have customer reviews is because they are afraid of bad reviews.

Well, I’m here to tell you negative reviews can be beneficial – if you handle it well.

So, how can you turn negative reviews into something that can help your business?

Well, have you ever heard of “killing people with kindness?” — this is exactly how you handle negative comments.

  1. You don’t want to fuel the fire with fire, so always answer negative reviews with professionalism and courtesy.
  2. Aim to solve the problem even when the customer sounds unreasonable.

This way, you can show your potential customers how you solve problems. This will give your shoppers confidence that you will proactively try to help them if issues come up.

We are speaking from our own experiences.

We’ve learned the hard way when dealt with unreasonable customers with an iron fist. After all, why should we ever yield to unreasonable customers?

A minor complaint turned into a PR nightmare all played out on social media. The negative effects dragged on for a year and grew into a bigger problem than we anticipated.

After this horrible experience, we learned to water down our burning urge to be right and started practicing good customer service.

After that, negative feedback or customer complaints no longer scared us. We saw it as an opportunity to show our future customers how professional we are at handling tough issues.

#7 Address Uncertainties

Is this website safe? — How long will it take to get my stuff? — Are returns complicated?

Shoppers have a lot of concerns when shopping online. As such, any good product page must address these concerns to win sales.

Make a list of all the common objections or uncertainties your potential customers may have, and address them directly on your product page.

For example:

    • Security concerns: Add trustworthy credit card logos on your product pages can help boost your credibility.
    • Fit issues: Add a sizing chart next to the size options.
    • Shipping costs: Add your shipping policy near the product description.
    • Return concerns: Add your return policy near the product description.

These are just some of the common concerns and ways to address them.  They’re simple, yet a lot of merchants have neglected them.

The bottom line is, provide answers to all the concerns your shoppers might have and you will have a much higher chance of earning their business.

ecommerce product page design address concerns

Forever 21 does a good job in dealing with the most pressing concerns of their customers: shipping cost, size guide, and current promotions (so they won’t miss out on deals).

I would like to see information about how to handle returns as that is currently not on the page.  Aside from that, this is a solid product page.

Pro Tip: If you receive the same question(s) over and over again, consider adding it to your product pages or at the very least, your FAQ page. We have an FAQ page, too!

#8 Show Related & Recommended Products

“Do you want fries with that?”

This is one of the most famous and effective ways to cross-sell a customer.

Cross-selling means you are offering similar products that the shopper might also like — for example, when they’re looking at a book on Asian recipes, cross-sell a book on Asian dessert recipes.

A master of cross-selling is Amazon. They seem to have an uncanny way to anticipate what I will like and make recommendations based on that.

ecommerce product page design related products

Displaying related or recommended products is an easy way to cross-sell directly to your customers, so you can:

  1. Offer them more products that they might also enjoy.
  2. Offer them similar, but different selection if the product they are looking at is not right for them.

It is a win-win situation for you and  your shoppers so why not include it on your product pages?

Take-away: 8 Ways to Supercharge Your Ecommerce Product Page

The easiest way to design an effective product page layout is to use proven and field-tested methods.

You can always modify your product page design as you gather more data from your customers to better cater to their specific needs.

We’ve gone over a lot of information so far, so let’s do a recap before we go to part 2 of this guide and start designing your product page layout.

  1. Use amazing product images: Take the time to create your custom, high-quality product images. Make sure to include images of your products in different angles, views, and details. If you have different versions of a product, make sure you include images of all variations. Use images with context to show how the products will look like if your shoppers were using it.
  2. Write helpful & interesting product descriptions. Avoid laundry lists of product specs and focus on describing how each product can help your shopper. Give them information that they actually need to help them make informed decisions.
  3. Use product videos: Film yourself or a staff using the product and show your shoppers how it works. You can also discuss important benefits of the product that can’t be easily shown in pictures.
  4. Clear price placements: Clearly display your product’s price on your page. Use a larger font size and/or contrasting colors to make it stand out.
  5. Clear add-to-cart button: You need to guide your shoppers what to do next when they are convinced to make the purchase (click on the buy button). Use a contrasting button color and large button size to grab their attention.
  6. Display customer reviews & ratings: Consumers often rely on product reviews and customer comments to decide whether to buy the product. So, collect customer reviews as soon as possible. If you get negative comments, reply to your customers professionally to try and solve the problems. This will serve to promote your business even more.
  7. Address uncertainties: Customers often have many concerns. Address these concerns head-on on your product pages.
  8. Show related & recommended products: Use related products display to cross-sell to your shoppers. This can improve their experiences, and put more money into your pocket.

Take some time and go through these 8 essential items all successful product pages must have and see what is missing on your own product pages.

In Part 2, we will show you how to put all of these 8 items in a well laid out product page design.

Go To Part 2.
Anatomy of an Effective Product Page Layout Design
Ready-to-use Designs You Can Copy to Instantly Improve Your eCommerce Website

Found This Guide Helpful?

Question – Did this guide benefit you? Leave a comment below. 

Do you know anyone who can benefit from this guide? Send them this page or click on the share buttons on the left.

You’ll be helping us out by spreading the word about our website, and you’ll be helping them out!

Connie Wong

About Connie Wong

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

Subscribe

Connie Wong

About Connie Wong

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

, ,

Leave a Reply

No comments yet.