Your product page is the revenue driver on your online store.
A well-executed product page design can dramatically transform your business.
At the same time, a poorly designed product page can kill it.
In this guide, you’ll learn to create a product page design that sells more products, creates repeat customers, and grows your online store for the better.
Table of Contents
GET THE GOODS
Improve your whole website with our complete website optimization series checklist.
Prologue: Product Page Design Goals
Conversio, a marketing automation platform for ecommerce brands, found that only 8% of all product page traffic converts to a sale.
That's only 2 out of 25 people.
But that's not the interesting thing about that study.
A online store making more than $100,000 in yearly revenue have much higher PCRs than an online store making less than $100,000.
("PCR" is "product page conversion rate.")
Stores making over $1M/year have a slightly better PCR than stores making $100k/year.
The difference? The $1M/year online store gets more traffic.
But a 9% PCR for a store that makes over $1M/year is beyond inefficient. (Think of all the wasted marketing dollars!)
...look at the next column.
Some "unicorn" stores have conversion rates that approach 50%.
That means almost HALF of the people who land on their page buy something.
Let that sink in.
How would your business change if your product page conversion rate jumped from 9% to 50%?
What would you invest in if you 5x'd your sales?
This guide's goal is to help you get there.
We've found that increasing conversion rates comes down to a few key things:
The strategies in this guide will help you improve your messaging, establish trust, and reduce the friction of clicking "Add to Cart."
Chapter 1. Optimizing Your Product Page Design
Even pretty buildings erected on shoddy foundations will crumble.
Your product page design—how you arrange your page—is just as important as its content.
Because people scan pages in specific ways. If the most important pieces aren't in their sight, you're leaving money on the table.
In this chapter, you'll learn how to create a blueprint for ecommerce success.
How People Scan Product Pages
Back in 2006, the Nielsen Norman Group discovered that people scan websites in an F-shaped pattern.
(See how you can trace an F shape with the red on each of those images?)
This means that up-and-to-the-left is your money spot: that's where our eyeballs at first land.
This reading pattern is foundational to all web design, including your product page design. Since location matters, you want to place important elements where you're confident shoppers will see them.
The 5 Sections of a High-Converting Product Page Design
Which sections should you include on your page?
The product details, of course—but what should be in there? What else should be on the screen?
In this chapter we focus on best practices. You'll learn what the standard components of a product page design are and how to get the most use out of each.
Section 1: Product Details (Above the Fold)
The best product details sections consist of the product image, any relevant product information, and an add to cart button.
Calpak does this nicely with their product page design:
Notice a few key conventions:
1. Image on the left, text on the right
Like nearly every ecommerce store, Calpak follows the Amazon layout: the image is on the left, but the text is on the right.
2. Follows the F-Shape Pattern
People scan in an F-shaped pattern. This means the top of the image—all the way across—is the most visually salient. Therefore, it's where you should place your title to adhere to best practices.
Here's how the F pattern works on this image:
We don't immediately look at the product in the product image.
Calpak understood that the headline is the most important part of this park. That's why they placed it so it's one of the first things your eyes encounter.
3. Product details conform to the shape of the image
CalPak strategically used accordions as part of their product page design to tuck the text away so that it doesn't overflow and go beyond the height of the image.
This keeps the page tidy and establishes clear separate between sections.
Product details are only the most immediately relevant details.
Here's a breakdown of product details, from Herschel:
Name: The name of your product.
Description: A brief description of the product.
Customization: If there are customization options, put them here.
CTA: The "Add to Cart" button.
Social Proof: Herschel places social proof next to the CTA to help establish trust between the brand and the shopper.
Section 2: Additional Details (Optional)
In an effort to keep the product page design short, some companies nestle additional details and specifications until accordions and tabs.
On Smoko, people can toggle between the description, a list of features, and the more mundane product specifications.
This keeps the product details section from becoming too overwhelming. It also keeps the focus on the Cart button.
On Zachary Prell's product page design, shoppers can read short product descriptions. To keep the screen from being too long, Zachary Prell collapsed extra specifications beneath and accordion. Shoppers who want more information can expand that tab.
Briogeo uses tabs in product details section to keep the product page design from becoming cluttered.
Section 3: Related Products
You always want shoppers to click on and view other items in your store.
(This is known as "cross selling.")
That's what your Related Products section is for.
Sometimes this is simple, like what Evolution of Smooth (EOS) does:
But an even better approach is to show what complements the product on your page, like what Zachary Prell does:
We decided to show some items that complement the product that page sells when we designed Briogeo's product pages.
A complement-centered design makes it easier for shoppers to select items that pair well with the page's primary offering.
This improves the shopping experience, sure...but it also increases Briogeo's average order value.
Bigger conversions mean profit.
Section 4: Social Proof and User-Generated Content
Social Proof is one of the most powerful tools at your disposal.
Because of a key marketing principle:
People like us do things like this.
Monkey see. Monkey do.
(Not to call your customers monkeys. Just to illustrate a point.)
When your ideal customer sees other people like them enjoying your product, what more do you need?
This section can be as bare as you like. Look at this example from Figs:
No images. No colors. Just stars, dates, and text.
(Although we don't recommend giving people the option to leave a review without verifying that they've actually purchased the product.)
Section 5: Marketing/Business (Optional)
Even if you’re not making a sale on this page, that doesn’t mean you have to lose this potential customer forever.
Use this section as an opportunity to grab your visitor’s contact information (usually an email address). Even if they don’t buy anything, you can still send them relevant information and market to them.
The easy solution is to add an opt-in at the bottom of the page.
Nice Laundry uses a simple bar—not even a full section—to pitch the offer (a special edition bonus pair...of socks, we assume) and ask you to subscribe to their newsletter.
Which is fine. It's not outstanding, but it's better than nothing.
Ouai doesn't even offer anything—they just pitch a vague "stay updated."
This is almost definitely worse than Nice Laundry's approach—it's still a vague offer, but they're not offering any incentive for parting with your email address.
How Sticky Components Keep Important Information in View
There are some things you want to always keep in the view on your product page design.
Sometimes it's to establish trust or make it easy for shoppers to find an answer to a problem.
Other times it's because you want to keep key elements on the screen, like a special offer or the cart button.
If you're going to make anything sticky, it should be a help button.
In 2012, eConsultancy and BoldChat reported that 31% of online shoppers said they’re more likely to make a purchase after a live chat experience.
How much more likely? That's unclear.
But we'll take those odds.
MeUndies has a sticky live chat button on the bottom-right corner of their subscription box page:
If shoppers have a question that the product page design doesn't answer, they can use the live chat to get those questions answered.
Friction? It's gone.
CakPak's sticky help button offers both an FAQ section and live chat.
Including an FAQ can decrease the load on your live support. It also saves your visitors valuable shopping time.
Remember: establish trust and reduce friction. Keeping your help button (and live chat) always in view is a great way to do both of those things.
Add to Cart buttons
Boll and Branch adds a new bar to their navigation when you scroll down the page.
Visual defects notwithstanding, keeping the CTA in view means keeping that option open to the shopper. One thing Boll and Branch does well with their product page design is constricting the number of options someone can take.
Choice is demotivating; if you're going to introduce sticky CTAs like this, it's best to make that the only choice on the page.
Chapter 2: Reduce Confusion with a Clear Navigation
You’re probably overlooking your navigation.
But the navigation is one of the most important pieces of a product page design.
Without an easy way to traverse the site, search for what they’re looking for, and check their cart, your ideal customer can get lost. Or worse—frustrated.
In this chapter, you’ll learn how to construct a navigation that makes it easy for shoppers to find exactly what they’re looking for.
How Menu Items Standardize the Shopping Experience
The main navigation is how shoppers explore your store. You want to show the essentials without overwhelming them with options.
If you have some leftover space, you can add links to pages that help you turn browsers into buyers.
Take a look at Briogeo's menu:
Links like the highlighted "Hair Quiz" button help Briogeo funnel visitors to specific pages.
Shoppers take a quiz and receive personalized product recommendations:
Of course this belongs in the navigation—it helps you send people to the best product for them!
But that's not the only approach.
You can also use your navigation to replicate the in-store experience and recreate the feeling of being in a different section of the store.
We like how Revolve split their navigation into Men's/Women's clothing:
Notice how the navigation items change depending on which type of clothes you're shopping for?
This keeps shoppers from ending up in the wrong section by mistake.
Use a Smart Search Bar to Funnel Shoppers to Bestsellers
Your navigation should have a search bar that helps shoppers quickly find what they’re looking for.
Briogeo’s search bar recommends items based on what you’ve typed into the search bar (if anything).
It’s not uncommon for someone to click the search icon and then draw a blank. Suggestions give them a jumping off point.
(This also helps Briogeo promote specific products—particularly items that sell well.)
Optimize Your View Cart Button for Maximum Conversions
Shoppers constantly view their carts.
You don't want potential buyers to leave your product page because they wanted to view their cart.
Instead, design your cart view so that it overlays the product page design but doesn't navigate shoppers away from the product.
If you keep users on your product page, you keep them in browsing mode.
Bringing them directly to the checkout page doesn’t force them to enter the checkout process, but it does bring them out of the browsing process.
Chapter 3: Maximize Sales with Powerful Visuals
High quality images are one of the most important parts of your product page design.
Obviously, your product images have a huge impact on how well your product page design performs.
But product demo videos, social media images, and crowdsourced content as social proof affect how much you sell.
In this chapter, you’ll learn how to create visuals that deliver the maximum impact.
How to Increase Perceived Value by Changing the Image Size
Photo size impacts how people perceive the product’s worth.
The ConversionXL Institute studied this in 2016. They divided products into “search goods” (spec-based items like computers) and “experience goods” (clothes, beauty products).
Bigger images made search goods seem more valuable.
For experience goods, the opposite was true: smaller images and more white space made experience goods seem more valuable.
Wild how much something like a photo's size can impact your product page deisgn, right?
When we designed Ironside Computers’s product pages, we used big, domineering product images.
But when we created the product page design for Mission Stone & Tile, we knew that an experience-based product (like stone and tile) would do better with smaller product images and more surrounding white space.
If you sell a product that toes the line between “spec-driven” and “experience-driven”—like headphones—you can attempt both approaches with your product page design. Large product images AND lots of white space.
Clearly, it works for Apple.
Encourage Engagement by Modifying Image Size
The ConversionXL Institute studied how image size affects how long people spend on product page designs.
The results mirrored those from the earlier study.
Experience products with big images received less engagement than those with small images.
Spec products with large images received more engagement than those with small images.
(It's worth noting that these effects weren't statistically significant. There's a chance these findings are incidental/random and nothing more.)
But there's a caveat here.
Engagement is not a silver bullet.
By all means, test to increase engagement and time on page. It's likely that more engagement leads to better conversions and fewer cart abandonments.
But optimizing for engagement shouldn't be your goal.
Instead, optimize for perceived value. If engagement doesn't follow suit, you probably need to make some tweaks.
You should always aim for high-quality images but make sure you follow best practices for image sizes, compression, and lazy loading to reduce their impact on your websites speed.
Show Video to Encourage Purchases
If a picture is worth a thousand words, then what is a video worth?
A lot more. Just the presence of a video—even if nobody watches it—is enough to increase your conversion rates.
In some industries—especially fashion—video can play a pivotal role in selling a product, especially on social media.
Video lets shoppers imagine how a specific item could look on them. More than static images, video captures real motion. It’s as close are you can get to the fitting room.
Figs uses a short video that shows a model wearing their product and dancing around.
If that's not reason enough to include video on your product page design, we don't know what is.
...that said, video is no good if it's not obvious.
In this screenshot from Peak Design, there's a video—but it's hidden at the end of the image gallery.
If shoppers spend only a few seconds on a product page design, they're not going to find that video.
If they don't find it...it's useless.
Put your video front and center.
Address Pre-Sales Objections with User-Generated Content
If you could show your shoppers that people like them buy your products...
What other objections could they have?
It comes down to answering pre-sales objections.
How will this make my hair look?
How does this look on people like me?
How does it work when I use it like this?
The other factor is that shoppers trust each other more than the brand that's trying to make money.
LuxyHair lets shoppers add photos to their reviews. This is some of the best user-generated content we've seen—not only are the reviews generally positive, but you can see the product at work in the photos.
LuxyHair does another good thing with their reviews: they ask customers about their hair.
And then they let shoppers filter for reviews that match their hair type.
LuxyHair turned reviews into an extra sales tool.
Chapter 4: Create Desire with Powerful Copy
The copy on your product page design can go just as far towards selling as the images.
Your product description is important, yes, but so is the social proof you display.
Even the text on the call to action buttons can dramatically shift your conversions.
In this chapter, you’ll learn how to write engaging copy that creates desire and sells more of your products.
AIDA: The Copywriting Formula You Didn’t Know You Needed
You may have seen this clip from Glengarry Ross:
AIDA is a real copywriting formula. And it works.
Attention. Interest. Desire. Action.
Adhere to this formula as you construct your product description.
Look at this product page design example from Briogeo:
The product image and headline grab your attention. Curl Charisma. Defining Shelfie Essentials Kit.
The description immediately grabs (or rejects) your interest by telling you who it's for: those with wavy, curly, and coily hair textures.
The rest of the description creates desire by describing the benefits. This products cleanses, defines, and controls while still maintaining movement and bounce for resilient, sleek, and long-lasting curls. You can have the best of both worlds.
Finally, the button at the bottom of the section functions as an effective call to action.
AIDA is everywhere because it works.
Format Product Descriptions for Maximum Impact
The ConversionXL Institute studied how people engage with product descriptions.
They found that:
- People read bulleted text more than paragraph text
- Text format matters more for spec products (e.g., tech) than for experience products (e.g., clothing)
But the core takeaway?
Your ecommerce product description matters.
...Remember when we talked about the F-shaped reading pattern?
It doesn’t matter how compelling your description is if nobody reads it.
Keep your main description under 4 lines.
Use accordions to let people access the minutiae that didn't make the cut.
Change Your Product Description Content to Hit Hard Where it Counts
But what should your description actually say? How should you talk about your products? What gets people to buy—facts or feelings?
The ConversionXL Institute also studied this, albeit with mixed results.
Results were mixed. They found that hedonistic descriptions made people perceive low-end items like a coffee maker or a blender as more valuable. But people perceived a $1000 vacuum cleaner as more valuable when it had a utilitarian description.
Neither finding was statistically significant and they didn't study "experience" goods (clothes, beauty products, furniture, etc.), so you might not see these results in your own business.
We recommend testing your ecommerce product descriptions between benefit-focused and utility-focused and measuring your sales.
Social Proof Skyrockets Conversions
According to Yotpo data, reviews—a form of social proof—increased overall conversions by 161%.
There's no doubt that you should include social proof on your product pages.
But where should you put it? And what should it say?
Next to points of tension.
Take a look at this example from Herschel:
Placing customer reviews next to the call to action—or any other point of tension—reduces fear and establishes trust between you and the shopper.
In other words, it can dramatically increase conversions.
(But in this example, the low number of customer reviews suggests this product doesn't sell well. Be mindful because sometimes this transparency can work against you, too.)
Sometimes, it's worth being creative with your customer reviews, like displaying a 1-star review to ward off people who aren't a good fit and appeal to people who are:
But in most cases, you should display your good product reviews.
Chapter 5: How Consistent Product Page Design Can Create Loyal Customers
It’s easy to get stalled on perfecting the look and feel of your product pages.
But your product page visuals should serve some purpose.
Guiding shoppers to a specific call-to-action.
Making the page easy to scan.
Highlighting a specific action.
In this chapter, you’ll learn how to use your store’s visuals to maximize the number of cart clicks on your product pages.
Use Color to Draw Attention
Color is interesting. It makes us pay attention.
Take a look at these two different product page designs, one from Evolution of Smooth, the other from Fresh.
Even though the only “real” colors are in the product image, the black and grey “add to basket” button stands out because it’s the darkest element on the page.
Contrast that with the product page design from Fresh:
Like Evolution of Smooth, Fresh also uses a mostly white color scheme. But here, the "add to bag" button is not visually prominent because it's the same color as other elements on the page.
...so how can you use color effectively to draw a shopper's eye? And does it even matter?
First, let's lay to rest the myth that certain colors are better for conversions. There's too much conflicting research to prove one color converts better than another.
What matters is how you use color in your design.
Look at our homepage design:
It's pretty clear where you should click: the pink button that contrasts with the green background and white text.
Zachary Prell does a good job of this:
It's obvious where to click: the giant orange button.
Here's another example: Dormify.
Even though we don’t love that the button is so high up on the page, the pink contrasts with the white-and-black color scheme on the website.
Reduce Friction with Smart Spacing
White space makes pages easier to process.
Because we chunk information in order to understand it.
This is called the Gestalt Principle of Proximity. It looks like this:
Notice how the planets on the right look obviously grouped, but the ones on the left don’t?
That’s the effect you want your product page design to achieve.
Introduce white space to make the chunking process easier.
Take a look at this ecommerce product page design from 4moms:
All that information in the pink box? That’s a single chunk.
(That’s a lot to process!)
It's possible you missed a lot of the key information, like:
- The number of product reviews
- The free shipping
- The payment plan
- All the questions and answers
Our eyes went right to the Add to Cart button and skipped all the other information in that chunk.
Contrast that with the product page design from Kith:
There’s plenty of white space around the image and the text. You can intuitively group sections—the headline, the sizes, the add to cart button, the details, etc.
There’s less friction on Kith’s product page design because the information is easy to digest.
Since it’s less cognitively demanding, clicking “Add to Cart” feels like less of a commitment because your potential customers aren’t stressed out by the page’s design.
(Remember—reducing friction is one of your goals!)
Chapter 6: Make Your Product Page Design Interactive for Better Conversions
Animations are feedback.
Shoppers always wonder:
Can I click this button? If I move here, does the image get bigger? If I have a question, can I expand this section to get my answer?
...but how do animations increase your revenue?
Simple. Feedback creates a seamless shopping experience.
In this chapter, you'll learn how animations can improve your store's experience...and how they can get you more customers, too.
Encourage Engagement with Animations
You might think of animations as design vanities. But animations can help you sell more.
For one, animations are feedback. Can you click this button? Did that item go to your cart? Did that link bring you to a new page, or did it just scroll you to a new section?
Check out this small animation from Evolution of Smooth (EOS):
When a shopper sees the button changes color on hover, they understand they can click on it.
Feedback reduces uncertainty.
Acquire New Customers with Exit-Intent Popups
Popups—or lightboxes—are incredibly annoying.
They're also unreasonably effective at converting visitors into leads (and shoppers into customers).
Zachary Prell strikes a good balance between an invasive lightbox and an attractive offer by only showing the popup when you try to leave their store:
Nonintrusive animations like this popup makes your online store more interesting.
In this example, Zachary Prell pitches a "private sale," but you don't have to do that.
You could tease a discount.
Or give access to exclusive content.
You could ask a question.
The key is that this popup is exit-intent.
That means it doesn't disrupt the shopping experience. It doesn't appear until the shopper indicates they're ready to walk out the door.
Reduce Overwhelm with Accordions
Accordions—those tabbed drop-downs that obscure or reveal text—keep the page uncluttered while allowing shoppers access to information they want.
Ouai uses these for their product FAQ section.
And Boll & Branch uses them to provide extra product details:
If your text is getting too long (like Boll & Branch’s), accordions are a clean and intuitive way to give shoppers all the information they need without overwhelming them.
Chapter 7: Capture Shopper Information (even if they're not ready to buy right now)
Your product page design should, obviously, sell your products.
But what about the people who are just browsing? What if they’re not ready to buy right now?
When they walk out of your store...they're gone. Probably forever.
In this chapter, we’ll show you how to turn lost leads into future sales.
Trade a Party Favor for Email Addresses with Popups
We already showed you Zachary Prell’s exit-intent popup.
But that’s not the only kind of popup strategy.
In the same way you can offer someone a coupon when they enter your physical storefront, on-entry popups can kill two birds with one stone by offering a party favor and collecting their email address.
Figs offers 15% off if you sign up for their newsletter. (Although we do wish this person's gender matched the gendered clothing behind it.)
We like the customization option: if a woman is shopping for herself, she's not going to want emails about men's clothing—to her, that's spam.
This is the simplest approach..but offering a discount might cut into your profit margins.
Let's look at another example.
Nice Laundry offers a pair of free socks for your email address. This works for a couple reasons:
- It gives you an incentive to part with your email address.
- If you're on Nice Laundry's website, you're probably looking for socks. Sending you a pair of free socks lets you try before you buy—and Nice Laundry bets you'll like the experience and want to buy more.
(We don't love the confirmshaming at the bottom. That's not cool. It's more than bad marketing or bad website design—it's mean. You should never intentionally make people feel bad for not signing up for your newsletter or buying your products.)
Revolve has one of the best welcome pop-ups we've seen:
They highlighted the offer (10% off), gave you a compliment ("Hey good lookin'!"), give you the option to self-identify (although it would be nice if it was clearer exactly what your gender preference is going to be used for), and the CTA is super clear ("GET MY COUPON").
More importantly, they handle rejection a lot better. A simple "No thanks, just let me shop" is all you need.
Seize the Out of Stock Opportunity
Most “Out of Stock” product page designs look like this:
Which is fine. It does the basic job of letting someone know that they can’t order the product they want right now.
But it also represents a missed opportunity.
How are you supposed to know when the item that interest you is back in stock?
ThirdLove gives you the option to receive an email notification once that product is still in stock.
Not only is this a smarter sales strategy: it also lets you begin to create a relationship with your new email subscriber.
Wrapping Up: A High-Converting Product Page Design
That’s how to design a high-converting ecommerce product page design in 2021.
Now it’s your turn.
Which of these tips are you going to use? Was this product page design guide helpful? Did you implement any of the recommendations we made?
Let us know by leaving a comment below.