How to Design Product Pages That Convert Like a Boss

How to Design Product Pages That Convert Like a Boss
How to Design Product Pages That Convert

Product pages are the life and blood of any ecommerce store.

You can have the most beautifully designed site in the world, you can sell the most awesome products, and you can have the best customer support. But if your product pages are bad, you’re going to have a bad time selling to your customers.

As I like to say, your product pages are your shopping window, your sales clerk, and your cashier — all at the same time. They are the ones that make your sales happen.

That’s why you need to make your product pages convert like a boss.

In this post, I’ll explain how you can design your clients' product pages to increase conversion rates.

You might also like: 5 Psychological Concepts Web Designers Should Use to Maximize Conversions

1. Show your value proposition

The first and most important way to make your product pages convert is to clearly show the company’s value proposition.

Visitors need to look at product pages and immediately "get" what the site and product is all about.

For instance, if I go to Dollar Shave Club and see their blade’s page, I immediately get what they do and what they sell.

How to Design Product Pages That Convert: Dollar Shave Club

If you read their copy, you’ll quickly understand that:

  • They sell cheap razors (duh!)
  • They sell them on a monthly basis
  • Their products — although cheap — are high-quality and reliable
  • They are funny 
  • They target young people

If you keep reading their site, you’ll get their value proposition even better (and please don’t forget to check out their viral video if you want to have a good laugh).

Remember: Your value proposition is what makes your company stand out from the rest.

It’s the answer to the question, What’s so different from you that your customers need to buy from you, and not from your competitors?

Your value proposition comes straight from your company’s brand.

This has to be something that sets your brand apart from the rest.

In the case of Dollar Shave Club, their value proposition is getting new, simple, yet perfectly functional blades every month for less than $10 from a funny, entrepreneurial, and no-BS company. That’s what they show when you visit their site, and that’s who they are. There’s no way another shaving company could overtake them by trying to be also funny as they are.

Whatever the industry or niche your client is in, their value proposition needs to show clearly what makes them stand out from their competition. It could be their unique site design. It could be their amazing customer service. It could be their unique shopping experience. Or like in the case of Dollar Shave Club, it could be your personality. Whatever it is, if you want your product pages to convert well, you need to clearly show your value proposition.

Examples

One of the first ecommerce companies to use a strong value proposition in their store was Zappos, the leading shoe online retailer.

What they did (and still do) to stand out, is to offer an amazingly great customer service. Their motto is “Powered by Service,” and they live by this promise.

For instance, there’s one story in which one of their customers wanted a pair of shoes that Zappos didn’t have. One of their customer service reps went to a nearby mall, bought the exact pair of shoes the customer wanted, and shipped to the shoes to her at no extra cost.

In addition, not only does Zappos offer an amazing customer service expirience, but they were one of the first companies to offer free shipping and returns. After that, many companies followed them their lead.

Finally, they were probably the first company in the online world to offer a 365-day guarantee, something that many experts at that time thought was crazy.

How to Design Product Pages That Convert: Zappos

Zappos continues to offer all those great perks to all of their customers, and they still have an amazing customer service. That amazing value proposition made them become of the leading online fashion retailers in the world, which lead to their acquisition by Amazon for over 1 billion dollars.

In contrast, kitchenware retailer Williams-Sonoma prefers to offer a less extreme and more relevant value proposition.

Given they’re a kitchenware retailer, Williams-Sonoma decided to develop an online recipe catalog, which results in two things:

  1. Their customers can learn new delicious recipes for free;
  2. Williams-Sonoma gets to stay closer to their customers, and are therefore ready to help them whenever they need it (by selling them anything they’d need to make those recipes).
How to Design Product Pages That Convert: Williams Sonoma

As you can see in this last example, you don’t need to offer a super innovative (and costly) value proposition. Anything that makes you stand out and makes your customer’s life better can and will work to improve your conversion rates.

2. Use as many high-quality pictures as possible

It has been proved many times that using high-quality product photos improves conversion rates. For instance, eBay says that each professional product image that is added to a listing increases sellers’ chances of making a sale by 2%.

Read that last line one more time. Each picture increases sales by 2%!

Of course, that doesn’t mean you need to put 500 photos of each product. There must be point of diminishing returns once you add 7 or 8 pictures (although you should test that just in case). What you can take from that study is the importance of adding pictures to your product pages.

Saying that your provider gave you bad pictures is no excuse. You need to make sure to have amazing product photography, and if that means hiring a professional photographer, so be it. Unless you have a big product turnover (which means you’ll be changing your product’s images every few months), you need to think of photography as an investment.

If you don’t have any money to hire professional photographers, don’t worry, you can still pull this off with some great DIY photos.

Examples

Master & Dynamic, a high-end headphone and sound tools company, decided to show high-quality pictures of their products. If you're interested in buying one of their most-famous headphones, the MH40, this is what you’ll see:

How to Design Product Pages That Convert: Master Dynamic

In this case, the high-quality pictures go hand in hand with their brand and company, which targets high-end sound nerds who want to have the most amazing headphones in the world.

Together with the copy, these pictures justify the high price Master & Dynamic ask for their products. If they didn’t show great pictures, I can bet they’d have a hard time selling to their customers.

But it's not only luxury companies that need to offer amazing pictures of their products. Zara, the Spanish fashion retailer, sells cheap clothing and still shows amazing photos of their products. Check how many high-quality pictures they show of this $40 dress.

Even if you can’t offer the amount and quality of their pictures, this example still makes a point: you need to offer high-quality pictures of your product.

3. Write amazing product descriptions

If there’s one factor that diminishes any product page’s conversion rates, it's the quality of their descriptions (or lack thereof).

There are two problems with most stores' product descriptions:

  1. They focus on their features, not their benefits 
  2. They are simply boring and unappealing

In order to make your product pages convert better, you need to write amazing product descriptions. (Did you notice I used the word amazing, and not “good” or “great”? I did it on purpose.)

The first problem is a very common copywriting mistake. Most people believe that by showing all the different features of a product, their customers will magically “understand” how good it is and they’ll end up buying it. However, that’s not what ends up happening.

What ends up happening is that most customers read the product’s description, and don’t get why they should spend their money on that specific product.

In some cases, a few others will get why they should buy that specific product. However, they’re not moved by that description, so they end up postponing the buy for later. And that means they never end up buying it, as they forget, or don’t care enough to follow through. 

(Did you see I use the word moved? I did that on purpose too, as they should be physically moved to buy your products — by putting their credit card info in your checkout page.)

Remember that online, you can’t sell your products to your customers as you would in the “real” world. You need to sell your product by actually selling all the great benefits of your products.  So if you only have a few paragraphs to try to sell your products to your customers, focus on all the great things they’d get if they bought your products. Even if you sell technical products, show benefits, not features.

How do you do that? By communicating one benefit from every product feature. If you sell cashmere sweaters, the feature could be the cashmere’s quality, which comes from a small town in the Himalayan mountains (and you could even show a picture of a cute cashmere goat.) However, the benefit of the sweater is its softness, or its comfort, or its unique fit that comes with the high-quality cashmere. In the case of an expensive and rare product such as cashmere, focus on the luxury of the product.

Examples

Look how these two different companies (one a retailer, the other a fully integrated brand) that sell cashmere sweaters describe their products:

How to Design Product Pages That Convert: Loropiana

This is how the first company, Mr Porter, describes their product:

A striped sweater is a versatile staple, and this Loro Piana version comes in classic navy and white. Made in Italy from soft, pure cashmere, it's a luxurious piece that's a true investment. Wear it over a shirt with the collar and hems peeking out for the smartest take.

They focus on the softness, the pureness, and the luxury. They also use the word “investment” to justify their high price.

How to Design Product Pages That Convert: Berk Cashmere

On the other hand, this is how Berk Cashmere describes their sweaters:

Berk Cashmere is tightly knitted, dense and hard wearing. This 1 ply knit is the finest cashmere produced and is unique to the Scottish Borders. In return for our investment of time and care in the knitting and washing process you get a touch and feel unlike any other cashmere. We call it 'Bare Finish Cashmere™'.

Berk describes their sweaters similarly to Mr Porter. They focus on quality, comfort, and luxury. And they also use the word “investment” to justify their steady price. Even if the second descriptions gets a little bit technical (“1 ply knit”), they focus on the right things without confusing their customers.

Remember:

  • Show benefits, not features. Think how the customer will benefit by using your products
  • Take one benefit from each feature
  • There’s usually one main benefit that makes a product stand out. Once you discover what that is, focus on it (although don’t forget to mention the other benefits)
  • Also, leave the features for the most technical-savvy people that understand and want to read the technical details
  • If your product comes with instructions, put a link to see a PDF version of the product’s instructions

You might also like: 6 Tips for Crafting Great Web Copy That Converts

4. Eliminate your customers' FUDs (fears, uncertainties, and doubts)

As you can imagine, no one can create the most perfect customer experience ever. Things go wrong; people make mistakes; unexpected problems arise.

However, there are times when people can have bad experiences with your site, caused by something that makes them unwilling to buy from you. If it happens once, that may be acceptable. But if it happens systematically, time after time for one or more reasons, then you’re in trouble.

All those bad experiences that your users have in your site are called FUDs, which is an acronym that stands for fears, uncertainties, and doubts. Every single fear, uncertainty, and doubt that someone has about your store causes them not to buy from you. In other words, FUDs create leaks in your store’s conversion funnels.

Some common FUDs are the fear that their purchase won't ship on time, or the fear that they’ll be scammed or robbed while paying online.

Whatever the doubts, uncertainties, and fears customers may have, they’re still happening whether you like it or not. And that’s a shame, because we’re talking about customers who are your “target," and who would likely buy from you, but they won’t because they need an extra push of confidence.

In order to deal with your customer’s FUDs, you need to attack each objection they may have throughout their shopping experience, and deal with anything that may cause friction and anxieties along the way. To do so, apply any (or all) of the following tactics:

Use testimonials (or customer reviews)

Showing your prospect customers what other customers have to say about you and your products is one of the best ways to reduce their doubts about their experience shopping with you. For instance, let’s say I wanted to buy a tennis racket, and I chose the Wilson Steam 99S. This is what the Wilson product’s page looks like:

How to Design Product Pages That Convert: Wilson Tennis

Let’s assume I don’t know whether this is actually a good racket or not. Fortunately, the people of Wilson allow customers to talk about their experience with that racket. So if I click the “Read All” button at the right of the screen, it takes me to the reviews section:

How to Design Product Pages That Convert: Wilson Review

If you take a look at the image above, you’ll see one of the eleven reviews about this racket. All the reviews are positive. What’s more, these are reviews from actual tennis players, so it gives me a more realistic and personal perspective about this specific tennis racket.

Also, check out the “Authentic Reviews” badge and all the details you can see about the reviewers (which makes the reviews even more powerful).

All this says one thing loud and clear: you can trust this racket’s quality and its manufacturer.

Testimonials are the quintessential reassurance tactic for a reason: they work. If you want to add testimonials to your store, you can check-out the following Shopify plugins:

  1. Kudobuzz Testimonials & Reviews
  2. Contentplum
  3. Product Reviews

Add security badges

As I said before, some people feel like they’ll be scammed, or they’ll suffer from identity theft if they add their personal and credit card information online.

Even though most people that have already bought online know that identity theft and any other type of online fraud is very unlikely to happen, many people (especially older people) will still have this fear when buying online. 

In order to counteract this fear, add security badges on every page of your store — especially on your homepage, your product pages, and your checkout pages.

According to a study made by the Baymard Institute, the most important security badges to use are the following:

How to Design Product Pages That Convert: Badges

The badges seen above differ in one area: some of them are SSL seals (i.e. badges that prove security encryption), such as the Norton badge, while some others are trust seals (i.e. badges that prove the store’s authenticity), such as McAfee, BBB Accredited, and TRUSTe badges.

In any case, according to Christian Holst from the Baymard Institute, "It’s not the actual security of your page that matters the most to users as they have little to no technical understanding of TLS/SSL encryption or even how forms are submitted. Rather it is the perceived security that’s of importance to this vast majority of users."

This means you shouldn’t worry so much on what each badge stands for — instead focus on simply having a badge that has a good trust reputation.

According to VWO, adding credibility badges helped one of their customers increase their conversion rates by a whooping 72.05%!

However, there are cases in which not using security badges work best. It depends a lot on the industry, the type of customers that buy from you, and many other factors. In industries where a lot of fraud exists, it’d certainly help to add security badges to prove you’re an authentic store.

At the end of the day, if you really want to know whether you should put security badges or not, you should make a test and learn from actual data.

ASOS, a fashion retailer, shows at the bottom of their page their Comodo security badge.

How to Design Product Pages That Convert: ASOS

Zappos shows the following badges at their checkout:

How to Design Product Pages That Convert: Zappos Badge

Finally, Macy’s reassures their security in a more conservative way.

How to Design Product Pages That Convert: Macy's

If your tests end up showing that the security badges have a negative correlation with your conversion rates, you could instead display something like this.

Implement live chat

Sometimes your customers have questions while shopping through your store.

In the offline world, if you had any questions, you’d simply go to the nearest sales clerk and ask them whatever you had on your mind. Unfortunately, you can’t do that online, unless you use live chat.

Companies such as LivePerson and Olark can help clear out your customer’s doubt in a matter of minutes, without them having to leave your store (and likely never come back).

According to a study from SitePoint, some of the reasons people abandon shopping carts include complications with the checkout process, doubts, and lack of information about the products being bought. 

These confused customers may have a question that they want answered in real time. Live chat can help you fulfill their need by addressing their questions or concerns during the checkout process, therefore increasing conversions and sales. 

Besides the increase in your conversion rates, live chat systems have other benefits. Companies that started using live chat systems have seen an overall reduction in the cost of serving customers, because they are quick to implement and a lot cheaper than other customer service alternatives such as email or phone support. Also, the interaction time is reduced.

According to a study from eDigitalResearch, live chats have the highest customer satisfaction rate of all customer service touch points.

Don’t forget that any type of customer support that you give to your customers can help you increase your conversion rates. Even if there is no study that clearly shows how the long-term effect of customer support can help increase your conversion rates, you should always try to do your best to help your customers

After all, if they do end up buying from you, they may come back to buy more, or they may tell their friends about you. For example, Overstock's checkout page shows you a small pop-up with a sign that says “Click to Chat.” This is a great, simple way to address any question your customers can have when buying from you. This is especially effective when the product is both complex or expensive (such as a chair, as I show you in the image below):

How to Design Product Pages That Convert: Overstock

On the other hand, you can use a more hands-off approach, and let them know that if they have any questions, they only need to call you or chat with you by clicking the link above the summary.

How to Design Product Pages That Convert: Macy's Watch

Other important tips

I didn’t want to close this article without giving away a few extra tips that deserve to be mentioned.

Improve your site’s load speed

A one-second delay can result in a 3.5% decrease in your conversion rates, a 2.1% drop in your cart size, 9.4% fewer page views, and an 8.3% increase in your bounce rates.

And that’s for a one-second delay. Imagine if you have a five-second delay. Yeah, that’d look really bad.

Here you have an old — but very relevant — article from Moz’s blog about improving your site’s speed.

Use prominent and clear call-to-actions

No one is going to click your “Add to Cart” buttons unless you make them want to click them.

This post written by the great Tucker Schreiber will show you everything you need to know to use amazing call-to-actions in your site.

Use video descriptions

At least with your best selling products.

It has been said over and over again all over the web that video descriptions have helped increase conversion rates from 6% to 30% for companies such as Zappos. 

While percentages vary, sites have found that customers are up to 64% more likely to buy after watching a product video. Even though videos can be used for other purposes besides video descriptions, they do undoubtedly help increase conversion rates and revenue, so not using them is a missed opportunity to grow your company even further.

Make sure your product pages title tags are concise, descriptive and relevant

There are two reasons why I say this.

One, because it’s good for attracting people from the search engines.

And two, because it helps with your SEO.

Finally, the title tag shouldn’t be longer than 70 characters (if not, Google will “cut” your title on your 70th character).

Optimize your template

One final tip: after reading this article, you got it wrong.

Relax, you don’t need to test your +100 product pages one by one. Not at all. Conversion experts know better.

Instead of optimizing page by page, you simply take your product page’s template (almost every site has one), and test that.

So if you product page’s template has a big header, a small product photo at the left, a short description at the right and a non-contrasting button below it, you could test, for instance, its description in each and every product page from your site all at once.

That way you don’t have to do that much work to improve your store’s conversion rates. Also, you get to your statistical significance much faster.

A win-win, eh?

Have you ever tried to improve your product page conversion rates? If so, how did it go? Please share your experience in the comments below.

You might also like: 3 Strategies for Improving User Experience in Your Ecommerce Designs

About the Author

Ivan Kreimer is the Growth Marketer at Receiptful, an API that lets you send beautiful digital receipts that help increase an ecommerce store’s revenue with the usage of targeted, marketing messages and upsells.

Grow your business with the Shopify Partner Program

Learn more