Product Page Design Featured Image
Last updated on Oct 24, 2019

Product Page Design: The Ultimate Guide (for 2019)

By Jake

Your product page is the revenue driver on your online store.

A well-designed product page 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 that sells more products, creates repeat customers, and grows your online store for the better.

Keep reading.

Table of Contents

Product Page GoalsPrologue: Product Page Goals (The Big Picture)
Design Your Product Page for Action with an Optimized LayoutChapter 1: Design for Action with an Optimized Layout
Reduce Confusion with a Clear Navigation on Your Product PageChapter 2: Reduce Confusion with a Clean Navigation
Maximize Product Sales with Powerful Visuals on your Product PageChapter 3: Maximize Sales with Powerful Visuals
Create Desire on you product page with powerful copyChapter 4: Create Desire with Powerful Copy
How Consistent Product Page Brand Aesthetics Can Create Loyal CustomersChapter 5: How Consistent Brand Aesthetics Can Create Loyal Customers
Make Your Product Page Interactive for Better ConversionsChapter 6: Make Your Product Page Interactive for Better Conversions
Capture Customer Information on your Product PageChapter 7: Capture Shopper Information (Even If They’re Not Ready to Buy Right Now)
Wrapping Up: Your High-Converting Product PageWrapping Up: Your High-Converting Product Page
Product Page Goals

Prologue: Product Page Goals (The Big Picture)

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.

It’s this:

A table of product page conversion rates from Conversio split by revenue groups.

Stores making more than $100,000 in yearly revenue have much higher PCRs than stores 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 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.

Conversio's PCR chart, but with the highest PCR highlighted

Some “unicorn” stores have product page conversion rates that approach 50%.

That means almost HALF of the people who land on their product 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:

A spaceship/rocket flying up and to the rightMessaging
A trio of aliensTrust
A comet bounces off a planetReduced Friction

The strategies in this guide will help you improve your messaging, establish trust, and reduce the friction of clicking “Add to Cart.”

Keep reading.

Aside: Conversion Rates as a Vanity MetricWe don’t mean “increasing conversion rates” for the sake of increasing your conversion rate. We’re using “conversion rate” as a stand-in for “revenue”; that is, all else being equal, more conversions should yield a linear increase in your revenue. Increasing conversion rate for the sake of increasing conversion rate leads to some shoddy practices like slashing prices and cutting low-performing (but still profitable) paid acquisition channels. That’s not what we’re suggesting. Don’t do those things.
Design Your Product Page for Action with an Optimized Layout

Chapter 1. Design for Action with an Optimized Layout

Even pretty buildings erected on shoddy foundations will crumble.

Your product page’s layout—how you arrange your product page—is just as important as its content.

Why?

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.

Quick LinksHow People Scan Product Pages
The 5 Sections of a High-Converting Product Page
How Sticky Components Keep Important Information in View
Return to the Table of Contents

How People Scan Product Pages

Back in 2006, the Nielsen Norman Group discovered that people scan websites in an F-shaped pattern.

Like this:

Three screenshots of eye-tacking showing that we read text-heavy screens in the shape of a capital F

(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 web 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

Which sections should you include on your product page?

The product details, of course—but what should be in there? What else should be on the screen?

In this chapter, you’ll learn what the standard components of a product page are and how to get the most use out of each.

Section 1: Product Details

Section 2: Additional Details

Section 3: Related Products

Section 4: Social Proof

Section 5: Marketing/Business

Section 1: Product Details (Above the Fold)

The product details consist of the product image, any relevant information about the product, and an add to cart button.

Calpak does this nicely:

Calpak Travel's product page; specifically, the first section (product details)

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.

Here’s how the F pattern works on this image:

An F-shaped reading pattern overlay of this product page.

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 used accordions 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:

A breakdown of the product details section on Herschel's product page for a suitcase.

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 short, some companies nestle additional details and specifications until accordions and tabs.

Smoko uses tabs on their product page to keep the product details from overwhelming shoppers.

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 Add to Cart button.

Zachary Prell uses expandable accordions on their product page to keep the text from cluttering and dominating the screen.

On Zachary Prell‘s product page, shoppers can read a short description of the product. 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 page from becoming cluttered.

Briogeo uses tabs in the product details section of their product page to keep the screen uncluttered.

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:

Related products section on Evolution of Smooth's website

But an even better approach is to show what complements the product on your page, like what Zachary Prell does:

Zachary Prell's related product section is more smartly tailored to the product you're viewing; instead of "related products," they recommended products that "pair well with" the one on the page.

We decided to show some items that complement the product that page sells when we designed Briogeo’s product pages.

Related products section from Briogeo, where we recommended other products that complicated the product the page intended to sell.

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.

Why?

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:

Text-only reviews from the Figs product page

No images. No colors. Just stars, dates, and text.

Still effective.

(Although we don’t recommend giving people the option to leave a review without verifying that they’ve 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 has a simple email-opt in form at the bottom of their screen

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's option to sign up for their newsletter at the bottom of their product pages doesn't give any incentive, so it's unlikely that many people will actually opt in.

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.

Why?

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 Add to Cart button.

Help Button

If you’re going to make anything sticky, it should be a help button.

Why?

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:

Animation GIF of the MeUndies sticky live chat button; as you scroll down the page, the button remains fixed in the bottom-right corner.

If shoppers have a question that the product page doesn’t answer, they can use the live chat to get those questions answered.

Trust? Established.

Friction? It’s gone.

CakPak’s sticky help button offers both an FAQ section and live chat.

CalPak's help button is sticky and 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.

Boll and Branch, when you scroll page the product details, displays a new button. (Unfortunately, there are some serious cosmetic defects that detract from the effectiveness of the button, but it's still a nice example.)

Visual defects notwithstanding, keeping the CTA in view means keeping that option open to the shopper. One thing Boll and Branch does well on this page 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.

Reduce Confusion with a Clear Navigation on Your Product 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.

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.

Quick LinksHow Menu Items Standardize the Shopping Experience
Use a Smart Search Bar to Funnel Shoppers to Bestsellers
Optimize Your View Cart Button for Maximum Conversions
Return to the Table of Contents

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:

A screenshot of Briogeo's navigation bar

Links like the highlighted “Hair Quiz” button help Briogeo funnel visitors to specific pages.

Shoppers take a quiz and receive personalized product recommendations:

A screenshot of the quiz on Briogeo's website that helps them recommend personalized products to shoppers.

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:

A screenshot of the Men's section on Revolve's website. Notice how the menu/navigation items are different than what appear on the women's page. A screenshot of the Women's section on Revolve's website. Notice how the menu/navigation items are different than what appear on the men's page.

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.

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).

An animated GIF that demonstrates Briogeo's smart search bar.

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 but doesn’t navigate shoppers away from the product.

An animated GIF that shows how Briogeo's cart pops out on the right side of the screen instead of disrupting the shopping experience by navigating shoppers away from the product page.

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.

Maximize Product Sales with Powerful Visuals on your Product Page

Chapter 3: Maximize Sales with Powerful Visuals

Images are one of the most important parts of your product page.

Obviously, your product images have a huge impact on how well your product page performs.

But video, 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.

Quick LinksHow to Increase Perceived Value by Changing the Image Size
Encourage Engagement by Modifying Image Size
Show Video to Encourage Purchases
Address Pre-Sales Objections with User-Generated Content
Return to the Table of Contents

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.

A screenshot of Ironside Computers's product page, which we designed

When we designed Ironside Computers’s product pages, we used big, domineering product images.

Ironside Computers's product page uses large photos

But when we designed Mission Stone & Tile’s product pages, we knew that an experience-based product (like stone and tile) would do better with smaller product images and more surrounding white space.

Mission Stone and Tile uses plenty of white space around their product photos

If you sell a product that toes the line between “spec-driven” and “experience-driven”—like headphones—you can attempt both approaches. Large product images AND lots of white space.

Apple uses both large product images AND lots of white space for the iPhoneX, which is both a spec- and experience-based product

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 pages.

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.)

A small robot that looks like a human child...if humans had antennae.Small images performed better for experience products.
A large robot that looks like a strong adult man.Large images performed better for spec products.

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.

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.

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 fun, short (8-second) video on a loop that shows a model wearing their product.

Figs uses a short video that shows a model wearing their product and dancing around.

Wyzowl reports that 74% of customers have been convinced to buy a product as a result of watching a video.

If that’s not reason enough to include video on your product pages, we don’t know what is.

…that said, video is no good if it’s not obvious.

On Peak Designs's product page, the video is hidden at the end of the carousel. It would be more effective if it was immediately 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, 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?

People like us do things like this.

It comes down to answering pre-sales objections.

A spaceship/rocket flying up and to the right
How will this make my hair look?
A trio of aliens
How does this look on people like me?
A comet bounces off a planet
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.

Luxy Hair supplements their product page with reviews that show user-submitted photos of the product in action.

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 lets customers filter for reviews that match their own circumstances on the product page

LuxyHair turned reviews into an extra sales tool.

Not bad.

Create Desire on you product page with powerful copy

Chapter 4: Create Desire with Powerful Copy

The copy on your product page 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.

Quick LinksAIDA: The Copywriting Formula You Didn’t Know You Needed
Format Product Descriptions for Maximum Impact
Change Your Product Description Content to Hit Hard Where it Counts
Social Proof Skyrockets Conversions
Return to the Table of Contents

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 example from Briogeo:

Briogeo's product page used AIDA to effectively market their merchandise.

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 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.

An icon of a mechanical arm and a test tube filled with a purple liquid.Use feel-good language for low-end products.
A spaceship/rocket flying up and to the rightUse utilitarian language for expensive products.

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 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:

Herschel puts reviews near the add to cart button

Placing 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 reviews suggests this product doesn’t sell well. Social proof can work against you, too.)

Sometimes, it’s worth being creative with your social proof, like displaying a 1-star review to ward off people who aren’t a good fit and appeal to people who are:

Snowbird ski resort displayed 1-star reviews in a magazine spread to prevent sales from the kind of person they didn't want to come to their slopes

But in most cases, you should display your good reviews.

How Consistent Product Page Brand Aesthetics Can Create Loyal Customers

Chapter 5: How Consistent Brand Aesthetics 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 “add to cart” clicks on your product pages.

Keep reading.

Quick LinksUse Color to Draw Attention
Reduce Friction with Smart Spacing
Return to the Table of Contents

Use Color to Draw Attention

Color is interesting. It makes us pay attention.

Take a look at these different product pages, one from Evolution of Smooth, the other from Fresh.

EOS uses a dark bold CTA to draw the eye

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 from Fresh:

Fresh's product page doesn't use color effectively to draw the eye to a CTA

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:

Huemor uses a bright pink button to draw the eye to a CTA

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:

The orange CTA on Zachary Prell's product page stands out and makes it obvious where to click

It’s obvious where to click: the giant orange button.

Here’s another example: Dormify.

Dormify's pink CTA is the only standout color on the screen

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.

Why?

Because we chunk information in order to understand it.

This is called the Gestalt Principle of Proximity. It looks like this:

Planets grouped to illustrate the Gestalt Principle of Proximity.

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 to achieve.

Introduce white space to make the chunking process easier.

Take a look at this product page from 4moms:

4moms doesn't use a lot of white space on their product page, so the important details get lost in the clutter

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 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 from Kith:

Screenshot of a product page from Kith for some shoes

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.

Kith's product page uses spacing to separate the different elements

There’s less friction on Kith’s product page 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!)

Make Your Product Page Interactive for Better Conversions

Chapter 6: Make Your Product Page 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.

Quick LinksEncourage Engagement with Animations
Acquire New Customers with Exit-Intent Popups
Reduce Overwhelm with Accordions
Return to the Table of Contents

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):

Animated GIF that shows how the Add to Cart button on EOS's website changes color when you hover over it.

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:

Zachary Prell uses exit-intent animations to keep customers from exiting the store without making a purchase--or at least, without giving away their contact information.

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.

Ouai uses accordions to keep their product page from becoming too cluttered with text.

And Boll & Branch uses them to provide extra product details:

Boll and Branch uses accordions to keep supplementals details hidden on their product page.

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.

Capture Shopper Information on your Product Page

Chapter 7: Capture Shopper Information (even if they’re not ready to buy right now)

Your product page 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.

Quick LinksTrade a Party Favor for Email Addresses with Popups
Seize the Out of Stock Opportunity
Return to the Table of Contents

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 uses popups to help incentivize customers to join their mailing list.

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 displays a lightbox once the page is finished loading, asking you to subscribe to their newsletter and offering you a bonus for your trouble.

Nice Laundry offers a pair of free socks for your email address. This works for a couple reasons:

  1. It gives you an incentive to part with your email address.
  2. 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—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:

Screenshot of a popup from Revolve's website, which we think does a lot of things right in terms of creating a good shopping experience.

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 pages look like this:

Herschel's out of stock page for a backpack

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.

ThirdLove gives you the option to click a button to be notified (by email) when a product is back in stock,

Not only is this a smarter sales strategy: it also lets you begin to create a relationship with your new email subscriber.

Product Page Conclusion

Wrapping Up: Your High-Converting Product Page

That’s how to design a high-converting ecommerce product page in 2019.

Now it’s your turn.

Which of these tips are you going to use? Was this guide helpful? Did you implement any of the recommendations we made?

Let us know by leaving a comment below.

READERS ALSO LOVED

What do you think?

Have feedback? Maybe some questions? Whatever it is, we'd love to hear from you.

Leave a Reply

  Subscribe  
Notify of