13 Drool-Worthy Product Page Designs

Why it rules:

• Image mix of on and off model
• Washing instructions

Everlane’s product pages are a goldmine of all the information a shopper could ever want. We’re talking high-res images, size guide, fabric breakdown, origin, price and reviews.

What sets them apart is the inclusion of washing instructions, which surely saves a lot of people from first-wash laundry mishaps.

2. Mini Cooper

Why it rules:

• Interactive design
• Live price updates

Rather than a list of car features, Mini Cooper opts for an interactive approach on their product page by guiding shoppers through the process of building their very own car. As shoppers add or remove features or make customizations, they see live price updates on the bottom bar.

Whether the website visitor is in the market for a car or not, Mini Cooper does a solid job of drawing people in and selling the product in this fun, slightly addictive way.

3. Away

Why it rules:

• 360º product video
• “Limited Edition” tactic

Away created a simplistic product page with quality visuals to showcase their luggage. Strong copy, sleek color selection and enticing “Limited Edition” colors make for an attractive product page.

With the added bonus of a full 360º video to save shoppers a couple of clicks, it’s clear that Away thought about how exactly to best show off their product to wow viewers — user experience FTW!

4. Soapbox by Wistia

Why it rules:

• Video demos
• Compelling copy

Wistia guides visitors through what their Google Chrome extension is and how it can help with creating videos. The product page is colorful but not overwhelming and expertly uses video examples of the tool in action. The bright orange CTAs capture your attention with action-oriented copy like “Get Soapbox” and “Download the extension.”

5. Cha Cha Matcha

Why it rules:

• 360º product view
• Consistent branding and color scheme

With a fun name like “Cha Cha Matcha” it’s no surprise that their website design would be just as exciting. From a consistent color scheme to playful copy, the branding is exceptional.

Shoppers have the added experience of using the 360º feature to click on, rotate and read ingredients off the can. This is an added interactional element that helps differentiate Cha Cha Matcha with any other standard beverage company.

6. Sheertex

Why it rules:

• Strong imagery
• Product demo video

Sheertex describes their Classic Sheers product as “unbreakable-in-human-hands,” and “Ten times as strong as the other guys.” They expertly tap into buyer empathy with a looping video that compares what it’s like to put on a pair of Sheertex pantyhose versus competing brands that tend to rip during the process — a common pain point for hosiery wearers.

Overall, Sheertex’s product page shows that they really understand their customer’s pain points and paired up with a solid near five-star rating, it’s clear that their pantyhose delivers on what they’re selling.

7. Wealthsimple

Why it rules:

• Compelling copy
• Consistent branding and vivid imagery
• FAQ section

The intriguing “Investing on autopilot” headline paired with a strong header image of the product’s user-interface instantly draws in visitors.

As people continue down the page, they are immediately given info on what the product is and how it benefits them. The consistent color scheme and reassuring copy flows across the page, solidifying Wealthsimple’s notable branding. To help with visitors’ purchasing decisions, FAQs sit at the bottom of the page to quickly answer any questions about the product.

8. Matt & Nat

Why it rules:

• Clean and simple page layout
• Concise language

The modern and minimalist vegan accessories brand, Matt & Nat, carries their fashion aesthetic directly into their product page design. High quality visuals stand out against the clean design, displaying the product on its own and on a model.

The copy is also straight to the point, telling shoppers what the product is and listing out all the specs the buyer would want to know about the item. Right underneath the color selector is the clear yet always effective “Add to Bag” CTA.

Sometimes simplicity is all you need on a product page. Tell the viewer the benefits, the price and let them do the rest.

9. Serac

Why it rules:

• Interactive design
• Strong lifestyle imagery

Men’s luxury outerwear brand Serac leads with a high quality lifestyle image that helps their target customer picture themselves in that setting. Once shoppers scroll down to the product image and click on the yellow dots, a description pops up to describe a feature or benefit of the coat.

If the viewer is sold, the “Buy” CTA is always visible, regardless of where they are on the page. It’s a soft sell approach but could be an effective strategy depending on your brand and product/s.

10. Bang & Olufsen

Why it rules:

• High quality visuals
• Hard-to-miss CTA

When visitors land on Bang & Olufsen’s website, they are immediately drawn to the stunning video at the top of the page with artistic shots of their headphones.

Upon clicking on a specific product and scrolling through its images, the gallery’s pagination is cleverly modelled after audio bars. The bright red “Buy” CTA commands attention against the soft palette, while the rest of the product page has a great mix of product and lifestyle visuals.

11. KOHO

Why it rules:

• Consistent branding and imagery
• Animated design

Pre-paid and reloadable card app KOHO displays their bright and cheery cards in a welcoming hero image. As shoppers select a “Personal” or “Joint” account, the cards open and shut accordingly, adding a cheeky touch of animation. Adding motion design to your product page is a sure fire way to grab attention.

Viewers can then scroll down the product page to learn exactly what they get with each account. This helps to balance the fun design elements with clearly outlined product features and benefits.

12. Dyson

Why it rules:

• Compelling copy
• Strong lifestyle imagery

Though traditionally associated with vacuums, hand dryers and fans, on Dyson’s Supersonic hair dryer product page, it’s evident that they understand the importance of hair care.

Their product page uses compelling copy and strong imagery to sell their hair dryer, with the added touch of video tutorials on how to use the product and customer testimonials. Dyson put a lot of thought and focus into showcasing the main selling points of their hair dryer, and this clearly comes through in their product page design.

13. Le Creuset

Why it rules:

• Interactive design
• Compelling copy and story-telling

Le Creuset tells a story within their description, easily painting a picture for the shopper. Product details like materials and heat source are clearly listed, which helps to emphasize why their product is world class.

They also use a cool scroll bar feature to showcase all of the different color choices available, with the more standard selection bar on the right hand side. Though some product colors are bold, the bright blue “Add to Cart” CTA succeeds in standing out from the rest of the page content.

Some Product Page Best Practices to Leave You With

Optimize your layout

As most people read from left to right, consider that when laying out information on your product page. The most valuable content is what you will want to place on the left side of the page, that way it’s the first thing people will see.

Say you’re selling a TV stand for example–it would be more effective to lead with product visuals on the left. On the flip side, if you’re selling a television where product functionality is the main selling point, leading with the description and specs on the left is recommended.

If it makes sense for your product offering, consider a one-page website design to really make a statement and get to the point.

Keep your product description simple

To beat the 15-second rule, you’ll need to master the art of writing product descriptions that inform and persuade. Be sure to answer any questions that shoppers may have in mind when looking at your product and inform them of characteristics like sizing and materials.

Convince shoppers to add to their cart by keeping your description clear and to the point, so they know exactly what they’re buying.

Bring your product to life with visuals

Humans are visual creatures so it helps to have images to showcase your product. We suggest multiple images that show angles, with a good mix of standalone and lifestyle shots to help shoppers visualize how they would use your product.

Bonus points for including a video or eye-catching animations for added allure.

Give shoppers a clear call-to-action

Even after perfectly laying out your product page, writing a compelling product description and selecting beautiful images, you can kiss conversions goodbye if you have a hard-to-find or unclear CTA.

An effective CTA:

• Uses clear, action-oriented language
• Is logically placed and easy to find
• Stands out from other page elements
• Directly adds the product to the shopper's cart

Bang Olufsen’s CTA proves to be effective by including all of the above.

Why it rules:

• The simple “Buy” copy is straightforward and to the point
• The button sits directly under the description
• Its button is the only red-colored element on the page, which draws in the eye
• The arrow inside the button helps illustrate that the next page will in fact be the shopper’s cart

Include customer ratings and reviews

The power of social proof rings true when it comes to product landing pages as shoppers are susceptible to others’ experiences with your product. Customer ratings and reviews immediately builds trust and credibility and has a major influence on buying decisions.

A lot of the time that riveting five-star review is just the push a shopper needs to hit “Add-to-Cart.”

As mentioned, eCommerce product pages are pretty darn important.

With one in four online shoppers starting their journey on a product landing page, you need to engage them right away. Shoppers often have an idea of exactly what they’re looking for, so giving them the info they need right away is key.

Whether you’re selling a sweater or software, the same principles apply:

• Describe the product
• Mention how it benefits the customer
• Incorporate a variety of product visuals
• Include a clear action-oriented CTA

Ensure the above is applied to your own product page design and you’ll be set up for success in no time!

Need a little help getting that product page (or pages) designed? With our global team of talented designers, Superside can get the job done for you.

We've also got a video that critiques a massive online deals site, looking at how they display their products and offering and how they can make it better. Watch that below!