Petal

Best product page design examples in 2022

Our customers are constantly coming up with incredible ways to design their product pages. Below are some of our favorite examples.


Zaneta StyblovaPublished on Mar 30, 2022

For this article, we’ve collected some amazing product page examples to show you what it takes to create a high-converting page in 2022.

The companies featured below have one thing in common: they know how to make an impact with their pages. From color to imagery, they managed to create an engaging and persuasive design that makes you want to buy.

However, it’s easy to get it wrong. When your copy doesn’t engage, no one reads. And when your design confuses, people run for the hills. By displaying a little creativity and using some of the best practices in this post, you can get it right. Ready?

Product page design best practices for your website

Ideally, your product page will inspire your visitors with creative page elements and persuade them with compelling copy. But what makes a product page great? What pushes it over the edge from mediocre to magnificent? 

Let’s take a look at some of the best practices for creating truly irresistible product pages and then dive into what you can do to make sure they’re working as hard as possible for your business.

Best product pages:

  • Have the information people need to make an informed purchase decision.
  • Highlight the benefits of your product over your competition.
  • Include multiple opportunities for visitors to add items to their shopping cart and check out.

Here are 7 tips on how to create high-converting product pages in 2022:

  1. Your product descriptions should be short, persuasive, and easy to read. Choose the right tone of voice and explain how each feature is useful for your customers. 
  2. Include relevant keywords so your content ranks well in search engines.
  3. Never forget to include a call to action. An effective CTA button can be used to draw attention to the most important parts of your page or site. With the right placement, text, and design, these buttons increase conversions and drive sales.
  4. Use high-quality images and videos. The quality of your assets makes a difference in how professional and trustworthy your brand appears. The last thing you want is for a blurry or pixelated image to detract from the message you’re trying to convey.
  5. Use breadcrumb navigation to let users know where they are in the hierarchy of your website.
  6. Show your visitors how much money they’ll save if they buy something from your site. Provide a comparison of the original price and the discounted price wherever possible.
  7. Include product recommendations on each page, which will make it easier for customers to discover similar items they might be interested in purchasing as well.

Now, let’s take a look at a few product pages we love:

Persuade your visitors with stats and figures 

This product page by My Mirror uses statistics about mental health to show visitors how common psychological distress is. However, if you decide to use some specific data and facts, always remember to use only reliable sources and mention them (you can include a few footnotes at the end of the page).  

My Mirror product page
Using figures and facts on a product page, My Mirror

Stats and figures are powerful and persuasive, but they should always be accompanied by a personal story so that visitors can really understand what that means for real people in their lives. The page talks about the team as well as the psychologists that the client will be encountering:

My Mirror Psychologists section
Featuring the people working on the project, My Mirror

Implemented by Devotion (check out the customer success story)

Create special pages with more info about your products

A great way to promote your products is to create special pages with more information about how your products are made, e.g., the region where it comes from, as Connect did for their wine:

Connect product page
Region where some of the products come from, Connect Wine Australia

If you sell food, you can create a page dedicated to a particular ingredient that would be featured on your blog, social media channels, and in email campaigns. If you offer clothing or accessories, consider creating specific pages for different types of styles or colors. This way, people will be able to access all of your products in a specific category without having to search for them.

Connect product page detail
Information about the product category, Connect Wine Australia

Implemented by Devotion

Enable your customers to find the right product

Choosing the right bathtub for your home can be challenging, especially if you don’t know what exactly you need. This page by Aquatic Bath enables you to easily filter through 200+ products and find the bathtub that will suit your needs based on criteria such as product series, price, material, or shape. Filtering is is an excellent way to help users find what they are looking for in a quick and intuitive manner.

Aquatic Bath product page
Filtering through products, Aquatic Bath

If you click on a specific product, you’re provided with a lot of additional information as well as options on how to customize the product. The product detail page also features a highlighted button that allows you to download a PDF with all the info about your customized bathtub:

Aquatic Bath product specs
Product specs, Aquatic Bath

Implemented by Konabos

Engage your users with compelling visuals

This is a great example of an e-commerce product detail page by Kimball Hospitality that does everything right. It’s clean, uncluttered, and easy to navigate, with the most important information getting pride of place. The page displays the product’s features and benefits, specifications, and materials in a user-friendly format.

Kimball Hospitality product page
Easy-to-navigate landing page, Kimball Hospitality

The page also includes useful close-up images that help customers get a better idea of what the product looks like:

Kimball Hospitality features on a product page
Close-up images on the product page, Kimball Hospitality

Implemented by BizStream

Add testimonials, social proof, and interactive elements

This entire product page by Openmarkets is laid out nicely with a large amount of information and space in between each section. As you scroll down through the sections, the elements pop up from below, which is a nice interactive touch.

Openmarkets product page
Product page with popping-up elements, Openmarkets

The rest of the page includes plenty of clear calls to action and a testimonial:

Openmarkets testimonial
Testimonial on a product page, Openmarkets

Implemented by Devotion

Show us your product pages

Did you like these tips on how to boost your product pages? We’d love to hear what you think and see what you’ve created, so connect with us on Twitter, LinkedIn, Facebook, or Instagram 😉.

If you are looking for ways to improve your entire website, feel free to schedule a 1-on-1 demo or start your 30-day trial to see how a headless CMS can help you deliver engaging digital experiences.


Written by

Zaneta Styblova

As Content Manager, I create and repurpose content in various forms to communicate with a global audience of clients, agencies, partners, and employees. I could be described as a bookworm and language enthusiast who never stops learning.

More articles from Zaneta

Feeling like your brand’s content is getting lost in the noise?

Listen to our new podcast for practical tips, tricks, and strategies to make your content shine. From AI’s magic touch to content management mastery and customer experience secrets, we’ll cover it all.

Listen now
Kontent Waves