Ecommerce Design / Ecommerce Marketing

How 29 Sites Built the Perfect Ecommerce Product Pages (Best Practices & Examples You Can Steal)

Rachel Jacobs / 17 min read

It’s official.

  • Mobile commerce is on the rise (and not just browsing, but actual conversions)
  • Google is getting more serious about their mobile algorithm, separating it from it’s desktop version to account for mobile consumer habits and preferences
  • Webstores are officially storytelling complements to Amazon, where price and convenience reign.

These 3 factors all mean one thing:

Your product page is the most important page on your site.

Build your product page effectively and both your traffic and conversions will skyrocket.

Fail to do so, and almost all your marketing and advertising efforts will fall short of goal.

This is risky business – and it’s the same business that digital marketers building landing pages have long been grappling with.

Your product page is now a landing page – at least in function.

This means it needs to (in order of importance):

  • Use psychological triggers to convince browsers to add to cart
  • Grab consumer attention immediately to the add to cart button
  • Fully explain both the product and the company (after all, consumers are bypassing your homepage)
  • Build trust in the product and company, often through social proof
  • Upsell or resell to increase AOV

There are a variety of ways to do each one of these, and we’ll focus on each section below and show you examples of how folks are turning their ecommerce product pages into landing pages.

The key is to focus on these 3 best practices:

  1. Keeping your product page focused on the product and consistent with your brand
  2. Boosting your customers’ loyalty and confidence
  3. Inspiring customers to become promoters of your brand.

The bottom line is that the quality of your product page — its visual elements, content, and navigation—has the power to make or break your store.

Let’s dive in.

The Anatomy of a Perfect Product Page

Product pages are ubiquitous. They are an industry standard –– a best practice, if you will.

Browse any online store and the multitude of components typical of product pages are recognizable on nearly every site you visit.

And that’s because, as the Baymard Institute so elegantly puts it:

It’s often on the product page where users make up their mind on whether or not they want to purchase the featured product.

This makes the product page layout, product page design, and features, the centerpiece of the user’s ecommerce experience.

At the same time, the product page layout and features are under a lot of strain as they’re largely a template reused for almost every single product on the site.

So, the question becomes:

How do you create a high quality user experience on a single ecommerce product page that you can easily replicate across your entire catalog?

80 Shopping on Instagram Examples

You don’t have to go digging around the internet for Shopping on Instagram examples. So, we did it for you.

You’ll get to:

  • Explore more than 80 real examples of Instagram Shopping in the wild, no more stalking to see who is doing what
  • Draw inspiration to educate your own posts and your own strategy. Some folks are seeing as much as a 1,416% increase in sales and traffic!

Request your examples.

7 Ecommerce Product Page Best Practices

Well, first you make sure that you have all the necessary elements of a product page to begin with.

From there, you can update and optimize.

Here are the 7 product page requirements:

  • Feature image
  • Gallery or product photos
  • Product overview, including title, price, features, CTA and customization options.
  • Product description.
  • Social proof, including review and ratings.
  • Similar product suggestions (upsell and cross sell).
  • Human interaction for any help or guidance needed.

Let’s walk through what each one of these are before we dive into examples.

1. Feature Image.

The single most important element of ecommerce product page design is your feature image.

This is an eye-level, mid- to long-shot that showcases your product.

Just imagine what an ecommerce product page would look like with a poorly lit and pixelated image, or even without one at all!

Would you trust a store that failed to properly photograph their products?

Your feature image can excite visitors or turn them away as it forms their first impression and helps them decide whether to look further.

Your best bet is a polished, perfectly centered product image with a white or light background and soft or no shadows.

You’ll also be able to use this image on Amazon in the case you sell your product on that marketplace. In other words, two birds, one stone.

Take a look at Stormy Kromer’s product image below. It is clean. It is large (you can zoom in on it). It looks like it is worth the price.

Beyond the feature image, the product page must convince the browser of the item’s value.

2. Gallery of product photos.

If your feature image successfully wins over your visitors, the next thing they are most likely to do is browse your image gallery.

Galleries are another important aspect of ecommerce product page design. Ideally, you will have about a dozen images in such a gallery, most of them clean-cut, like your feature image, and showing your product from all relevant angles.

It’s also good to include at least one or two in-context or lifestyle images to invite an emotional response from your customers.

You can even add a 360-degree shot, too, that engages consumers even more or a video that conveys other information or answers customers’ questions.

Do you need a dozen extra images?

No. You only need enough images to allow consumers to better visualize your products –– especially the details.

Other than paying for shipping, not being able to touch or feel, or try out, a product is the most hated aspect of online shopping.

If you can solve for that with only a few images, more power to you.

Here’s a great example by Solillas, where they have 4 total images:

3. Title and overview.

Beyond the images, your product page needs to give high-level information of the product right off the bat.

That information includes:

  • Product title.
  • Price.
  • Features and components.
  • CTA.
  • Customization options.

Ideally, all of this information lives above the fold. That isn’t always possible (in fact, it is rarely possible).

Many brands make up for this with aesthetics.

Instead of using heavy text for an overview (this is *not* the description), they use colors, fonts and icons.

Let’s look at a couple examples.

Ethel’s Baking

Ethel’s Baking nails the product image (yum!). Beyond that, the product overview information is clean, branded and clear.

Here is what they do well:

  • Use of iconography to highlight important and differentiated product information (in this case, gluten free)
  • Branded font as a way to bolster the brand even on a product page (where users may not have even seen the homepage)
  • Review visibility in the form of stars (more use of iconography). This helps to build trust.
  • Customization options up-front.

ON PRODUCT LANDING PAGES, FOCUS ON TRUST

There’s so much that goes into ecommerce product page optimizations, including things like product focus, great images, copy quality, product reviews, button placement, access to important information, etc.

The list goes on and on.

My #1 piece of advice is to focus on aspects of your product page that instills trust while diminishing anxiety. These usually come in the form of reviews, shipping, return policies, etc.

— David Feng, Co-Founder and Head of Product, Reamaze

Hook & Albert

Hook & Albert does a great job with their overview section as well.

In fact, later, we’ll look at their entire product page as a great example of a landing page.

Here is what they do well:

  • Beautiful imagery up-front, showcasing packing needs in image #2 that is vital to understand for the buyer
  • Limited time offer call out to increase conversion
  • Review visibility in the form of stars (more use of iconography). This helps to build trust.
  • Need to know specs information before the fold (AKA without having to scroll)
  • Chat option.

FLOS

Now let’s look at an example that goes a bit more minialstic in an effort to address the brand’s specific audience.

FLOS’s products come at a higher price point, meaning there is a longer buying funnel in general.

To push consumers to purchase, they must include information that helps to visualize the product in their space as well as communicate value.

Here’s how they do it:

  • Multiple product-solo and lifestyle product images
  • Designer call out to speak to the value prop
  • Clear customization options available
  • Dimensional sizing charts to help consumers visualize the item in their space
  • Chat option.

All right – after you get your product overview accomplished, now it’s time to really drive home your product page SEO capture any lingerers.

To do that, you need unique product descriptions.

Want more insights like this?

We’re on a mission to provide businesses like yours marketing and sales tips, tricks and industry leading knowledge to build the next house-hold name brand. Don’t miss a post. Sign up for our weekly newsletter.

4. Unique product descriptions.

Product pages are the most important part of your store, not just because they inform customers about your products and entice them to buy from you.

They are important also because great product pages help with your search engine rankings and bring in more customers in the first place.

Improving your product pages is one of the easiest things you can do to improve your sales, and all it takes is a bit of time.

Here is what you need to create highly ranked product pages:

  • Unique product description
  • Product videos
  • Social proof (which we’ll cover in the next section).

Unique product description

Writing a unique product description can be challenging.

After all, it’s hard to measure how well copy is doing at converting someone. It’s more of an assist than the player making the goal.

That said, writing product descriptions that are both optimized for your product page keyword (typically your title) as well as speaks to your branding is the goal.

To do that:

  • Use Google to search for your keyword. Take a look at your competition’s product pages. Your goal is to make yours better.
  • Use bullet points and graphics to get information but boring to read informational across.

Let’s look at a couple examples.

Subzero Superfoods

Subzero Superfoods does a fantastic job on their product pages. Beyond having great product photography, they turn their product description into a true journey.

How do they do it?

  • Use iconography to quickly showcase important product features
  • Include directions or recipes if relevant for your product (how to put it together, etc.)
  • Be fun in your product copy –– if that’s in your brand’s standards.
  • Include images and showcase what else is included in the product. This helps to prove out value.

Marucci

Maybe you’re thinking right now:

I have way too many SKUs to get that detailed about every single product.

That’s a fair thought.

Let’s look at an example of brand that also have thousands of SKUs and how they manage their product descriptions effectively: Marucci.

Here is how they do it:

  • Keep the product descriptions short and sweet.
  • Use additional photography to draw the eye to the information.
  • Include relevant, must-know info including specs, etc.
  • Link off to additional product information on the blog to increase site interlinking and SEO.

And while unique product descriptions are necessary, there’s one more factor to the product description game that will help increase your search rankings and your conversions.. And that’s product video.

Product Video

Videos are a fantastic way to show off your products and make your shoppers feel like they’re getting an in-person demo.

Remember, the #2 most hated aspect of online shopping is the inability to touch or try the product.

Video can help solve for this.

Even better, videos will drive more people to your pages thanks to better search results, then help convert them once they’re there.

Chew on these:

Why do videos increase search results?

Google uses a number of factors when ranking any given page.

Video is helpful because:

  • Video results in a click on your page (to play the video) meaning a signal of engagement to the algorithms.
  • Videos result in longer time spent on page due to the length of a video (keep them short!), meaning a signal of engagement to the algorithms.
  • Also, Google owns YouTube and rewards the use of it.

So adding videos to your product pages can help you in every aspect of the online sales cycle.

Product videos engage your users more, meaning they’ll spend more time on your site (increased page stickiness).

Great. So videos are a major benefit to your store, but how do you get your hands on them?

If you have product demos from the product manufacturer, that’s better than nothing.

But the best solution is to make them yourself.

Not only do you get to fully control the content of your video, but it’s better for your search results if you’re putting out unique content rather than just adding something everyone else has.

How to Make an Ecommerce Product Video:

If you’re not a professional videographer (few are), it may seem a little intimidating to shoot your own product videos.

Thanks to the glut of cheap cameras and easy-to-use editing software on the market, it’s actually pretty easy.

No matter if you are just starting up or are managing the ecommerce site or aspects of it for a multi-million dollar brands: you can start making and testing product videos right now.

Here are a few tips to get you started:

  • Start with a script. Know what you’re going to say so you aren’t tripping over your own words. You don’t have to stick to the script exactly, but just have some talking points to help keep you on track. Make sure they include the key differentiators of the product.
  • Keep it short. In studies, some of the best performing videos are 30 seconds or less in length. And going over three minutes means performance plummets. Just keep in mind that attention spans online are even shorter than normal.
  • Show and tell. Take full advantage of the medium by showing the product in action, not just standing beside it and listing the features. When you mention a feature, show how it works.
  • Act natural. Not everyone is comfortable on camera, but you want to appear as natural as possible to set the right tone. Think of it as having a conversation with your customers, just like you would if you were showing them a product in person.

Let’s look at a few examples.

Giant Teddy

Giant Teddy makes great use of time by turning their product photo shoots into opportunities for product videos as well.

Given that for Giant Teddy, the size of the item in relation to other things is the most important aspect to get across, they can cut a short 45 second video with the photographer to showcase that feature.

Check out the video below and the product page here.

Kodak

Kodak takes the idea of including a product video to the next level – using 4.

Then again, Kodak is hitting the ecommerce market hard. Their entire site experience is exceptional – with a WordPress front end for SEO and unlimited customization and BigCommerce for the checkout functionality to offset PCI compliance concerns and inventory management.

But, for today, let’s just focus on their product videos. You can see how they are laid out below.

See the entire page here.

Rand McNally

Rand McNally hits in the middle here. They produce videos specifically for their product pages,

This is especially effective if you can manage it. Rand McNally produces a small number of products, so they have the opportunity to make each one impactful.

See the video below to describe their GPS product here.

Pro Tip

While writing product descriptions is nobody’s favorite task, getting them right is essential.

If you are short on hours in the day, try a platform like Automated Insights that uses AI and machine learning to help you create your product description in half the time.

Though automated programs can save you a lot of time, make sure you give their results at least two rounds of edits by an actual person. Make them catchy and memorable, ensure that they tell a story, and pack them with all the info customers are looking for.

5. Reviews and ratings.

Product reviews build trust, and that trust increases conversion.

More than 80% of consumers consult reviews when making a purchase, and adding them to your site can help lift sales by as much as 18%.

In fact, reviews aren’t just helpful in increasing conversions.

They are a new and necessary aspect of our online shopping lives.

Research have found that social media impact on how we perceive a stranger’s recommendation has altered historic beliefs and assumptions.

In the International Journal of Market Research, M. Nick Hajili wrote:

“Trust, encouraged by social media, significantly affects intention to buy. Therefore, trust has a significant role in ecommerce by directly influencing intention to buy and indirectly influencing perceived usefulness.”

Drum all that up to mean one thing:

You need social proof on your product pages.

Let’s check out a few examples.

BUILD MORE TRUST WITH YOUR AUDIENCE

You need to build more trust with your audience.

I continually see ecommerce sites that put very little energy into making their product pages look better than just a generic page with no social proof.

Obviously you want to make it easy for the buyer to buy the product, but you don’t necessarily want a empty page.

Displaying reviews below the product and testimonials from major magazines or other outlets can be incredibly effective at building trust.

Overall, it’s important to provide real evidence that your ecommerce store is more than just another generic site.

– Daniel Wallock, Marketing Strategist, Wallock Media

Paul Mitchell

Adding social proof and product reviews to your page can take many forms.

Clearly it must include actual reviews.

But most sites already do that.

So, what can you do to take it to the next level? That’s where this example from Paul Mitchell comes in.

They’ve added respected third-party awards to the product page to help seal the social proof deal.

Two Leaves

Two Leaves, like Paul Mitchell, also allows for customer reviews.

On this particular product, there are more than 50 of them.

But, they also do something few others brands do – they humanize their employees and use their preferences (after all, we all have taste buds!) to highlight staff favorites.

MountainCrest

You’ll notice in the example above that Two Leaves also formats their reviews a little differently than usual.

Let’s take that to the extreme.

MountainCrest uses a tool called RivetWorks to source product photos and reviews at the same time.

This gets them plenty of images they can use on their site and social media, along with the reviews and visuals for them to help sell their products.

See the full product page here.

6. Similar product suggestions.

Take a look at Sierra Designs’ impressive Related Products section.

It is clean, large enough to be noticed, and located below everything else so it’s not obtrusive.

These product suggestions are another layer to your on-site strategy that helps you further engage and delight your visitors with items that can complement their selection.

All product pages on your site are customizable in this aspect. Here is how you set up recommended or related products.

You essentially have 3 options. You can use one, none or all of them.

  1. Customers also viewed: These show up on the product page. It follows this logic: Customers who viewed this product also viewed these products. [photo]
  2. Related products: This also shows up on the product page, and can be manually set. It follow this logic: Products with similar names or descriptions; can also be set manually. [photo]
  3. You may also like: This is a pop-up after a customer adds an item to the cart. It follows this logic: Products that are similar based on name and description. [photo]

You can also market similar products via hard coding, apps, pop-ups, or even chatbots that serve as personal shopping assistants.

And don’t forget about using data to serve the right upsells and cross-sells at the right time.

If you are using BigCommerce Insights, you can use the Frequently Bought Together report to see which items make the most sense to upsell customers to.

6. Customization options.

If you’re offering items in different size and colors, make it seamless for customers to customize their selected product.

This is called hyper-personalization, and it’s one of the most popular ecommerce marketing tactics of the year.

Place easy-to-use customization options on your sidebar or another place, where they are clearly visible.

Every interaction counts, and the shorter and smoother each option is, the more likely customers will make a purchase.

What’s more is that you can add in conditional logic.

Let’s look at a few examples.

Andie Swim

Andie Swim allows customers to add on logos, initials and more to their swimsuits.

Check it out below:

They set this up using product options.

In total, they have 7 product options deployed – 2 conditional.  

Marucci

Marucci clearly does their product pages very well. Second mention in this article!

Beyond their typical product pages, they also have a customized product section.

See the experience below:

How many product options did you see? 14 – 1 of which using conditional logic!

And that one using conditional logic is actually an upsell. 

BonBonBon

BonBonBon has mastered the art of hyper-personalization.

You can go to their site today, and order any combination of any number of BonBons that you want.

No kidding.

And – they didn’t use product sets to do this. They used plain and simple SKUs.

That’s right. Every possible box combination is entered on the backend as a SKU (hidden from customers typically). That’s how they can serve up the “price point in mind” feature.

Setup Hyper-Personalization On Your Site Now

On BigCommerce? Product options are out of the box. Follow the video below or the link here to set them up.

7. Human interaction and FAQs.

Finally, be sure to provide links to any additional information your site visitors might be looking for.

For example, include a clear link to your returns and exchanges policy page as well as to a frequently updated FAQs page that can answer any outstanding questions.

Our Pampered Home does this well. See their product page here.

You can even go a step further and install a chatbot that answers common questions.

You don’t want visitors to navigate away from your page by searching for more info on Google. If that happens, you have not done your job.

Coast New Zealand does this well, offering important informational based on data points. In this example, my IP address is coming in from the U.S. So, I get an international message.

Product Page Optimization

All of this work put into your product page is important for conversions. But, you want to make sure that it drives increased organic traffic over time, too.

More free traffic. More conversions. That’s a winning strategy.

Let’s look at how to do it.

1. Stay on top of your SEO.

SEO is the most affordable long-term strategy to sustainably generate leads, and you should always keep it in mind when building and promoting your product pages.

Keep in mind that your product page speaks to both people and search engines, so research your keywords well to get key-phrase ideas and enrich your SEO.

Below is an example of how different key phrases related to “pink shoes” compare according to data from Semrush.

Source: Semrush

Your product copy should be informative and memorable while also keeping SEO in mind and including the relevant keywords you have researched.

Likewise, invest time in optimizing your metadata both for your page in general and your images.

Include descriptive key phrases in the alt text of your images to give your organic ranking a leg up.

In addition, use videos to make your page rank better and drive more traffic.

Search engines favor pages that include videos because it’s a phenomenal way to create unique, quality content.

Another great way to boost your ranking through organic traffic is to join affiliate programs and generate backlinks to your page.

Getting links from authoritative industry sites and blogs tells search engines that your store is to be trusted and promoted.

7 Ecommerce SEO Best Practices to Improve Product Page Rankings:

Optimize your product pages now by following these seven ecommerce SEO best practices to increase your product page rankings and your conversion rate.

  1. Know how users search for your products by doing keyword research.
  2. Write unique product descriptions.
  3. Create titles, meta descriptions, H1s and Image alt tags based on keyword research.
  4. Use long-tail keyword phrases.
  5. Ensure you have product rich snippets.
  6. Add additional content to product pages.
  7. Promote and engage.

2. Curb the size of your images.

Your web page also must load fast enough on all devices, including mobile, so don’t overload it with images that take forever to load.

Rather, keep your images light. Follow your platform’s image guidelines to strike the right balance between quality, zooming capability, and a fast-loading site.

Every extra second your page takes to load can hurt your conversion rate.

Editor’s Note: If you are on BigCommerce, the platform takes care of image optimization for you – automatically. Learn more here.

With that in mind, test your images and your product page using Google PageSpeed Insights to see if you can optimize them for both desktop and mobile.

And use the world of tools out there to further optimize them.

Page Load Speed Is Often Overlooked. It Shouldn’t Be.

One of the most overlooked metrics on product pages is the time to load the site, and with a lot of ecommerce traffic coming from mobile, this becomes even more important.

We’ve seen with several brands massive improvements in conversion just by increasing the site speed.

– Eric Carlson, Co-Founder, 10X Factory

3. Keep a Uniform Look.

Finally, keep your product pages and images uniform and consistent across all your product lines.

Consistency promotes trust and increases your conversion and retention rate.

One way to maintain an orderly look is to use the same aspect ratio and product scale across all your product lines so visitors can easily navigate your pages without being distracted by the image style itself.

Keeping your images square is also good standard advice so that they look good on all devices, including smartphones.

Here’s a great example from Meeaudio. All images are perfectly sized for consistency and quick loading.

Product page optimization should be someone’s full-time job.

This process should be codified in your procedures, measured and executed continually.

The three metrics we currently use are 1: Search Results Page Rank, 2: Sub-Category-Page-Rank (online marketplaces), and 3: Sales Volume.

Sometimes when sales volume dips against historical numbers it is due to changes in the way pages are ranked. If you’re keeping an eye on these metrics and trends, daily, weekly, monthly you can adjust pretty quickly in order to regain your sales volume.

– Jason Boyce, Co-founder & CEO, Dazadi

The Impact of Powerful Visuals

The visual media you use on your product pages is up to your brand. But you have a lot of different options – and some types tend to work best for specific purposes.

Let’s look at each option.

1. Photos.

Quality images are your best brand advocates, casting the very first impression on your customers.

Everything else on the page, including content and navigation, is there to build on that first impression and lead your visitors to a purchase.

So take your time with your photography. Create unique and polished photos that evoke trust and boost your consumer lifetime value.

2. 360-degree shots.

360-degree shots are super interactive and make your page stand out. People love them!

They are proven to increase conversion, reduce returns, and attract more attention to your website.

While they can be pricey and complicated to shoot, if you can fit them in your budget, they can positively affect your bottom line.

3. Video.

Not only do people usually prefer video as a way of learning new information, video is also responsible for the majority of internet traffic.

On product pages, video helps your organic search ranking and is a great tool to grab attention, create relationships with your customers, or answer questions about product features in seconds.

Solo Stove, for example, uses a lot of videos on its product page to the delight of its customers and conversion rate alike.

Source: Solo Stove

While quality video production is expensive, if you’re just starting out, you can shoot a few seconds-long blurb videos that promote a lifestyle or answer questions with just about any camera.

Adding them to your gallery will give substance to your page and help your conversion.

Engaging Apps and Plugins (Tools!)

Another way to fortify your product page that no ecommerce store can ignore is using apps and plugins that interact with your customers.

They can help you tackle:

  • Abandoned carts
  • Answer questions
  • Offer suggestions.

You can also use apps to create a sense of urgency and scarcity, which are proven to boost conversion.

Some of the key tools you can employ include:

Source: Chatra

12 Best Ecommerce Product Page Examples

Your product page is one of your most important sales tools your business has.

Keeping it optimized and up-to-standard is a must. So, as a wrap up, let’s look at 12 innovative product page examples.

1.Hook & Albert.

2. Olive Clothing.

3. Coast New Zealand.

4. Marucci.

5. Enro.

6. Tabitha Simmons.

7. Kardiel.

8. Atkins.

9. Fresh Fronks.

10. Ethel’s Baking Co.

11. Handpicked Wines.

12. Solo Stove.

BE DIFFERENT, BUT TRACK YOUR METRICS.

Don’t be afraid to go above and beyond the status quo. Most product page designs are very generic and follow a similar pattern as the competition.

That said, the most important metrics for ecommerce product page optimization range from social and referral traffic to conversion rates.

You want to see referral traffic coming to your site because it indicates that the story your product page is telling is compelling. You want to track conversion rates because it’s important that your visits are turning into sales.

– Ross Simmonds, Founder, Foundation Marketing

Want more insights like this?

We’re on a mission to provide businesses like yours marketing and sales tips, tricks and industry leading knowledge to build the next house-hold name brand. Don’t miss a post. Sign up for our weekly newsletter.

SHARE

537 Shares
Leave a Comment

Less Development. More Marketing.

Let us future-proof your backend. You focus on building your brand.