Product Page Design for Your Effective Online Store

All our eCommerce brands want to grow fast and sell more. Sales and all that magic with the product’s moment of glory happen on the product page. Let’s discover what makes the eCommerce product page design not only beautiful but also effective. Start with the basics and dig deeper into the most useful tips.

What Is the Product Page?

The product page is a page on your websites dedicated to one particular product. It gives an overview of the item, presents it, and provides the opportunity to purchase. There are numerous product pages on your website – as many as products you have.

Usually, the product page consists of several parts:

• product name;
• images or videos;
• product description;
• product quantity selection;
• ‘Add to Cart’ button;
• additional features, such as Wishlist, Care Guide, Reviews, ‘You May Also Like.’

Why is the product page so important?

• It is where your customers decide whether to make a purchase or not;
• It is where your customers often start their journey from Google;
• It is where your brand can shine and make a strong impression.

Most brands spend days and hours to make their product pages engaging. Let’s see some great examples of product pages designs and figure out what makes them cool.

Considering the Best Product Page Designs

When we are visiting any online store, in most cases, we don’t notice how we buy products. We all are impulse buyers (even if we don’t think so). 🙂 We don’t pay much attention to buttons, little links, or hearts suggesting we save the product to the wishlist. BUT. All those things were carefully crafted, selected, and tested by the brand teams who analyze the users’ behavior and make small changes to improve our shopping experience.

Now we suggest you not only take some product page design inspiration but also pay attention to detail. These great brands from various industries work hard on their websites to increase their conversion and satisfy their customers, and we’ll explore their technics.

Furniture Product Page: IKEA

IKEA, Furniture, Worldwide

Look at that cool Scandinavian style — nothing extra, just their stylish product and only necessary information.

While you are thinking about that sofa which may perfectly fit your living room, pay your attention to the page’s structure, here we can see:

• A short description with the most necessary info. 3-seat, dark gray, cover, price. Bold and straightforward without overselling texts. All you need to know to make a decision and spend not more than 2 minutes.
• Next, well-notable but still calm ‘Add to Shopping Bag’ button;
• Cover variation swatches that change the look of the sofa when clicking. They let us know how the product will look in other designs.

Quite usual and straightforward, right? But it still works well.

What’s cool:

1. A short notification is saying ‘available to order online.’ Useful? – Yes, of course.
2. Product images help us make up a decision: product by itself, product views from different angles, texture, and the interior.
3. Pretty little heart suggesting we love this product and add it to the wish list. We can then turn back to our wishlist and make a purchase a bit later. That means more orders for IKEA and one more happy customer. 🙂
4. This product page design is minimalistic but informative: you can read all about the material used, designer, style, sizes, package details, sustainability & environment info in tabs.
5. ‘See this or similar products in real homes,’ showing real pictures on Instagram, and suggesting which product will help us get this look!
6. Features such as ‘Goes Well With’ and ‘Similar Products’ include the possibility of seeing the interior by hovering. They help users create harmony (because they come to IKEA not only for the sofa but also for interior), and these features help IKEA grow the conversion.

There are a lot of great things in IKEA, including their websites. See how they highlight their competitive advantage and make it short: You have 365 days to change your mind. – It means a safe purchase. IKEA cares about customers right on the product page.

*Tip: Note, the whole 365 days (not one year)! We think this period is longer than just a year.
Great job, IKEA! We are also among your fans 🙂

Clothing Product Page: ME EM

ME ME, Fashion, UK

Let’s take a look at this intelligent page that looks balanced, stylish, and luxurious at the same time. Soft colors, enough white space, and elegant fonts make this page attractive for our eyes and focus our attention on the product’s quality. The ‘Add to Bag’ button doesn’t scream but invites us to make a choice.

The product description is short and consistent. It consists of just four words but gives us a full overview of the product. ‘Romantic’ – articulates the occasion, ‘floral’ – grabs our attention to the print, ‘satin’ – gives us the understanding of material used, and ‘skirt’ – sure, we see the skirt here. This is how informative and short product description can look if you’d like to be brief. We can also find such useful information as the fit, fabric care, and delivery terms. We can even share the look with a friend and go shopping together.

What’s cool:

1. High-quality images and the ability to zoom them, scroll and get a detailed view from different angles. It helps us understand how that particular skirt will look in action and even imagine its texture.
2. The color palette helps to understand how the colors match each other.
3. Again the heart and ‘Why We Love It’ chapter explaining the key product benefits and designers’ thoughts about their product. – Why not? It creates some story behind and adds more positive emotions and authentic feel to the page.
4. ‘Wear It With’ is a really simple but still useful feature. It suggests the other products that go well with that particular skirt. For sure, it helps the brand grow conversion and help the customer get a stylish fashion look.

ME EM is just one of the fashion brand examples that can inspire you to create an excellent product page. We invite you to check out our few more website overviews of fashion brands and pay special attention to their product pages.

Shoe Product Page: Allbirds

Allbirds, Shoes, New Zealand (Worldwide)

This website design is breathtaking. You must visit its key pages, such as Our Story, Sustainability, and Materials, to feel this brand. They are consistent on all pages, including each product page. So, Women’s Tree Dashes, ladies and gentlemen.

What’s cool:

1. Color and size swatches help us choose our desired parameters with minimum clicks. Pay attention to the size swatches: they indicate sizes that are sold out. – That’s useful and honest and helps build the right expectations. BUT. They don’t leave the customer without anything and suggest they subscribe to the waiting list and get the notification when their desired size comes to stock again.
2. The visualized product benefits, key features, description, and care guide are all in neat tabs. Together, they shape the product’s image and express brand positioning, taking up minimal space but providing a lot of useful information.
3. Images & videos sell those products. You can click play and see how those shoes look on a real person. Great quality!

[w4p_ga_youtube_player video_url=”https://www.youtube.com/embed/zw71Z2eHL4I?controls=0″]

Allbirds’ product page is an excellent example of a website page that communicates brand benefits and brand values and cares about their customers.

Beauty Brand Product Page: Tangle Teezer

*Attention: This example is especially useful for those who offer unique products with different value propositions.

Tangle Teezer, Beauty, UK

Tangle Teezer is a UK beauty brand with history. Their revolutionary hair brushes gain a dedicated place in the hearts and minds of customers across the world. They are bright and fresh for women, and their product page supports that image. The design is clear and bright with colorful products, bright accents, and a pinky ‘Add to Cart’ Button.

What’s cool:

1. Images and product descriptions look great. Of course, even Her Majesty the Queen met the Tangle Teezer team during their Queen’s Award for Enterprise in International Trade. So, they maintain a high level.
2. Tabs with size & colors suggest we choose the brush model quickly.
3. Visualized product benefits help us make a choice quicker and pick what we need – that’s a great way to emphasize a value proposition.
4. The product video adds emotions to this page and shows a product in action.
5. Technology. Imagine, even hairbrushes have enough to say about their innovative technology. We think that’s great because they tell the truth. Tangle Teezer and the story of its founder, Shaun Pulfrey, really inspires. He spent over 30 years working in hair colorists salons and aimed to create the world’s first detangling tool. He researched and developed that idea and created the technology for cute and useful Tangle Teezer brushes. This block is not so appropriate for many other products; however, it’s a real competitive advantage and the brand’s Big Idea.
6. How to Detangle, Perfect For. After talking about the technology, they tell us how to use their product. Great idea! Especially if the product is innovative, functional, or just something new to people.
7. Genuine Customer Reviews – the final point in that product greatness. Happy customers share their opinion about the product, prove its quality, and motivate others to check it by themselves. Product reviews are one of the most powerful tools to earn customers’ trust. We often tend to refer to the other’s opinion. Some of us even need several “yes, that’s great” to make up a decision.

Tangle Teezer evokes positive emotions. If their product page is not enough for you to get inspired, visit their Timeline, Made in GG sections to view their brand story, and just look at their lovely products.

Accessorize Product Page: Worth & Worth

Worth & Worth, Accessorise, USA

Okay, let’s visit another cool website with stylish and atmospheric hats. Worth & Worth brand from the USA invites us to pick the hat that perfectly suits us and offers everything we need to make the right choice. What we like right from the start is the ‘heart’ symbol right near the product name. It somehow creates the connection between that hat and invites you to love it directly from the first glance.

They offer convenient payment methods, various sizes, and colors. All necessary descriptive information is in the tabs and swatches to save space and not to overload the page design. Again, the most contrast elements that catch our attention are the product itself, and the ‘Add to Bag’ button. That works like a signal to our eyes: look at that hat, then shop it. That’s not all.

What’s cool:

1. Images and zoom. Images look high-quality and authentic. You can zoom them and overview each detail of that ‘wild-rabbit’ fur, and see how this hat perfectly suits that girl or man in the photo.
2. The size guide deserves special attention. When you click ‘size guide,’ you expect to see a simple spreadsheet with sizes. However, here, first, they ask you how you are going to wear the hat. Then they take you to the video tour of how to measure for that particular style, offer the classic size chart, and tips on how to do all correctly. All this helps customers and provides an engaging shopping experience.

If you are looking for a cool hat or the inspiration regarding the accessorize product page, Worth & Worth may be helpful.

Food & Beverage Product Page: Mokarico Coffee

Mokarico Coffee, Drinks, Italy

We are going to sunny Italy to get some coffee and are landing on the Mokarico Coffee product page. So, what interesting we can see: Italiano texts that are short but informative (we translated). SPEDIZIONE (or Shipping) tells us that we should wait for only 2-6 working days to get our coffee. Page design is minimalistic with an accent on the green ‘Add to Cart’ button and a product.

What’s cool:

1. Profilo Il caffè (The Coffee Profile) shows us the information about the aroma, sweetness, acidity, etc. That’s useful information to help us imagine the taste of coffee and compare it with the other coffee types.
2. Il caffè (The Coffee) section provides information about processing, region, and recommendations to prepare the coffee.
3. Le certificazioni (The quality certifications) helping grow customer trust.

Mokarico invites us to try their other types of coffee with the ‘Suggeriti per te’ (Suggested for You) feature, and that looks attractive. Why not?

After all these beautiful examples, let’s drink some coffee and move to the product page design best practices.

Following Product Page Design Best Practices

After we get the full view of some best product pages from the top brands, we’ll summarize the best practices they apply to gain customer loyalty.

Working on the Product Value Proposition to Create the Page

Before creating any page design and a website at all, think about your product.

We usually start with an analysis of what our customers need. Good. They need bread, water, electricity, food, and other essentials. But what about that pink or blue Tangle Teezer from one of our examples? Or what about that hat? Do we really NEED them?We explain to ourselves that we need them because we will… finally start doing sports, learn something new, look better, be more productive, save time for the most productive things in the world. However, some super-people keep that promises to themselves. Still, most of us just buy and feel happy. That’s all 🙂 Brands that deliver value help us explain our wants as needs and give us the power to fulfill the potential.

First:
Why will my customers WANT my product, and for what NEEDS and GOALS that may work?

Brainstorm the ideas and work on your product value proposition.

This is the plan:

• Why may my customers want my product?
• What emotions must this product evoke?
• What deep and inner goals and wishes this product can help to cover?
• Can my product inspire somehow?
• What are the key benefits of this product? The most significant benefit?
• What are the proofs for those benefits?
• For whom exactly is that product?

Next:
What do my customers NEED TO KNOW?

Here we mean functional characteristics that will help the customer get the necessary information on the product page. Let’s brainstorm some ideas for various product categories. Here we should think about the particular product category.

Other useful features such as ‘People Also Like,’ Wish List, Instalook, etc.

Finally:
What DOUBTS may my customers have?

This is the point to stop and think about what can stop our customers from making the purchase. Let’s see how that works:

Not enough trust. We can add customer reviews, quality certificates, or a money-back guarantee. Detailed photos and Instagram accounts can show our products in action. We can engage customers to chat with our managers and feel more care in the process.

Not enough information. Making the page more descriptive and visual may help. We can come back to the previous step and brainstorm more useful info. If that doesn’t work, let’s add a live-chat or an opportunity to connect directly via Facebook messenger, Viber, Email, Phone, or Whatsapp. Many people like friendly communication and will be glad to ask questions. We can also save frequently asked questions and then put them to a dedicated page on the website.

Not enough reasonable price. Low prices are not a guarantee of rising sales. People even can pay higher costs for value. First, we should check the competitors’ prices. If our prices are too high for the market, it’s good to decrease them or carry out sales. But take your ROI into account. Your product price can’t be lower than investments. If the price is average for the market, we’ll try something else. Offer added value: free shipping, beautiful packaging, or gifts.

All these ideas are just a few of what we can do for our customers. The overall recommendations are the following: we should step into customers’ shoes, go shopping by ourselves, and evaluate our experience.

After we brainstormed those ideas, it’s time to create a product page layout.

Building the Product Page Layout to Showcase the Product

Let’s summarise what useful we saw just a few minutes ago in the examples. We’ll imagine how the product page layout looks in general and what already works.

*Note, if we talk about details such as button color or placement, the choice between a link or a button, the answer is A/B testing. We can create two similar versions of the pages with a tool like Google Optimize and test small changes to see what performs better.

So, how the product page layout looks in general:

• Page header & menu are at the top (as on every page on the website);
• The product name is usually placed at the top of the page or on the right part. If you offer several brands on the website, also add the brand name;
• Product images & videos must be high-quality and provide the ability to zoom. Usually, we can see them on the left part of the page screen or at the top.
• The product price goes below the product name and is one of the key info parts. Price should be visible right from the first glance.
• The product description is usually short but informative. The description goes somewhere after price, generally on the right part of the screen.
• The Wishlist heart or the Comparison button also can be somewhere here.
• ‘Add to Cart’ button must be in contrast with the layout to catch attention.
• Benefits should look short and straightforward, be visual, and go below the description in taps, swatches, before or after the ‘Add to Cart’ button.
• Additional links represent care guides, size guides, etc.
• Additional features go below to continue shopping: You may also like, People also buy, Best fits with, reviews.

How exactly we should put all those features on the page is the task of UI design. But the main principles are to place the key elements logically: Name – Impression – Price – Buy.

The right part of the screen is for information, and the left one is for visual impression. People tend to start viewing the page from left to right. That’s why we begin with a first-glance emotion and then move on to the short analysis.

Evaluating the Product Page UI & UX to Sell More

User Experience is a key to each website’s success, and it is a full set of knowledge and practice helping web designers create engaging digital experiences. We will not get too deep into detail but will list the basics of the product page design UI.

Dosed Accents

The overall product page design shouldn’t distract the user from the main goal – shopping. It’s better to do less than over decorate. We mean create soft light or neutral background and put accents on the key features. The key elements are your products, price, and the ‘Add to Cart’ button. They should catch attention and stay in focus. Add enough white space around page elements – this way, users’ eyes will feel relaxed and simply find the essential info.

Stutterheim, Fashion, Sweden

Readable Texts

All texts on the website should be readable. That means fonts should be convenient for reading and be in balance with each other. The same principle applies here: it’s better less than more. We should use only 2-3 fonts on the page. Use minimal text-decoration of bold, italic, various font colors. It’s a good practice to highlight only 1-3 words with bold in the copy only if necessary.

Text color should be in good contrast with the background color even if we turn the page into black and white colors. That’s important for people with disabilities who can’t see some colors. The minimal recommended font size is 14 px, and we don’t recommend to make it less than 13px, even on mobile.

More Visuals

As we already mentioned, people are emotional buyers. Most of us perceive the information through our visual channel. That’s why we should benefit from this and show more. Use beautiful high-quality photos of products, show the details, provide views from different angles, add the ability to zoom, and create a life-like experience. Many people also like to feel the product. That’s why it’s a good idea to show the texture in detail and even show the video about how this product works in action.

By the way, that helps to get more interactions with your page, and positively affects the page position in search results. The more people interact with your content, the more useful it’s considered by Google.

Structured Description

The product description is another one crucial product page element. It should be short, informative, and well-structured. We should use from 1 to 6 sentences to describe the product: what it is, for whom, what benefits it provides.

Then we talk about the structure: choose the key features that customers need to know and list them with 1-2 words for each component.

Necessary product parameters that must be selected to make the purchase should go before the ‘Add to Cart’ button and are easy to interact with.

And one more recommendation: put necessary information to the product description. Place information that must be selected to purchase into swatches. Hide additional, not necessary info in tabs and dropdowns. Provide detailed information, such as care guides, size guides, etc.on the other pages or pop-ups available by a link on a product page.

Minimum Clicks to Buy

Finally, the crucial UI point is the following: we must remember the goal. Customers come to our store to research and then buy. That’s why we should make their journey from entering our site to the purchase as quickly and smoothly as possible. When entering the product page, the user takes some actions to make a purchase: clicks the images to view the product, selects product parameters such as size, color, etc., browses additional important information, adds the product to the shopping cart, continues shopping.

How can we shorten the way to the purchase?

• Put parameters that need to be selected to visual swatches, not dropdowns. This way the user just clicks the swatch and selects;
• Block the size and color swatches that indicate out-of-stock products to create the right users’ expectations and omit useless clicks;
• Show the essential information in the structured product description: key product parameters, your benefits, availability, price, selectors;
• When the product is added to the wish list or a shopping cart, show them in the sidebar or pop-up with the ability to continue shopping without page reload;
• Offer additional products in ‘You May Also Like’ or ‘Others Buy’ features.

Look how Tiger of Sweden uses these ideas on their structured product page:

Tiger of Sweden, Fashion, Sweden

Checking SEO for Product Page to Rank on Google

Customers must get to your page somehow to make a purchase. One of the most effective ways to get the traffic to your product page is the website performance optimization. Product page SEO needs a dedicated topic and a specific part of work. We’ll overview the most important principles that relate to the product page design:

User-Friendly URLs

Each product page has a separate URL. This URL must look natural and include the keyword. The keyword of your product page is usually the product itself and its brand name:

https://yourstore/category-name/product-mane

Friendly URLs get more clicks on Google, rank better, and create the order on your website.

Optimized Product Description

It’s a good idea to add the focus keyword to your product description. For example, if you’d like to rank for the word ‘woman umbrella,’ add it to your copy when describing your product.

Don’t forget to keep all your product descriptions unique for each product page. Copying product descriptions from the other stores that sell similar products or copying the same info from your product pages can evoke duplicate-content issues. In plain words, Google can downgrade pages in the search results or even give them a penalty if it indicates duplicate content (the text that is almost the copy of your competitors’ info). That’s why we should try to create unique content wherever possible.

Interactive Elements

We mean well-organized swatches, buttons, color and quantity selection options, social-media buttons, images, and videos by interactive elements. All these elements collect user clicks and make an impression on Google. The more useful clicks and purchases your product page gets, the better it ranks in search results. Famous brands aim to get more interaction with their brands and create engaging content for their entire websites.

Crafting the Product Page Content to Make an Impression

So, after we saw several examples of the product page design, talked about features and layout, let’s sum it up, and list what helps us create a great impression.

Clean page design. The beautiful design with enough white space, focus on products, and balanced colors create the first impression.

High-quality images & videos. Visuals help us to show the product and demonstrate its best features. This way, we grow customer trust and confidence.

Price. All prices should be actual. If the online store carries out the sale, it’s a great idea to show its end date.

Informative description. The product description copy should explain the key characteristics of the product. It’s better to omit the water in texts and not to oversell.

Additional: User Guides, Catalog of the Collection, Technical Docs. Such documents available to download in PDF will help the customers better understand our products, familiarize them with our brand, and get more detailed information. This also helps to raise their trust and confidence before the purchase.

Shipping info. People want to know what steps they need to take to get the products, how fast they can get them, and the price. If you offer free shipping or any other shipping terms, show that.

Other features that can help you make a great impression come down to care about your customers. They provide additional touchpoints with a brand: a live chat, contact forms, and product features that help provide a more personalized experience. These are the features like Product Constructors, AR Fitting Rooms and apps, auto suggestions for the particular customer based on their previous experience.

Making on a Product Page Optimization

After we got the full overview of the effective product page design, here are some essential steps for the product page optimization:

Improve Product Page Mobile Experience

The mobile experience of the product page design may come down to just three components: fast page speed, user-friendly page elements, something special.

• Check your mobile page speed with Google Speed Insight, and evaluate your results. Sometimes it’s hard to achieve, but we should try to get the mobile page loading speed up to 1 second. Google’s recommendations in that test may be helpful here. Also, pay attention to the image size – sometimes too have images and GIFs can slow down the page.
• Pay attention to the size of buttons and elements optimized for taps. These elements should be large enough to tap with a finger.
• Hide not necessary info on mobile devices. Product pages on mobile can look a bit different from desktop due to the screen size and how we use them.
• Add something special. For example, we can create an app with the collection of our products to let the customers take it to the physical store and pick our most suitable piece for the other products in their looks, interiors, etc.

For example, Egger, the Austrian wood products company, offers the collection of their decors in the app. You can simply download their app and take it to the store or home to fit and pick the perfect decor for your interior.

Egger, Wood Products, Austria

Put Your Product in the Spotlight

High-quality images, videos, and product demos help create a great impression and turn customers’ needs into wants. The product is the main hero of the product page, so it should be the one that takes the most attention. Informative product descriptions highlight the product benefits and help the customer make the right choice. If your product page lacks conversions right now, try to review your copy, add useful information, and test changes.

Another interesting way to sell products is by demonstrating them on Instagram. People come to Instagram, see your products in action, view looks, makeups, interiors, how that product looks on other people, and read what people say about it. Then they like, comment, and ask questions. We can see the people interested in our products and help them order online or right on Instagram.

Look how ZARA interacts with their customers on Instagram:

ZARA, Fashion, International

Google, Facebook, or Instagram ads that show your product benefits and attract more new customers to your brand.

Up-Sell & Cross-Sell

When it comes to increasing the conversion rate at the online store, we can brainstorm the product page design features that help grow the number of orders for the one customers:

• ‘You May Also Like,’ ‘People Also Buy’ – show product suggestions and offer complementing products that the customer may also add to their shopping cart.
• ‘Wear it With’ helps the customer get the complete look and suggests products that go well with what they chose.
• ‘Buy in the Set and Save’ – suggest the selected product in the set with another complimenting item. The condition is the following: if the user buys these products together, they save, and the cost is lower than if they buy these products separately.

There are plenty of interesting tricks for growing conversion.

If that’s what you need, check them out!

Add More Speed & Function

Finally, when you have an excellent copy, beautiful images, cool features to sell more, and a product page design that your customers enjoy, invest some time in technical optimization.

• Make a technical website audit with such tools as Google Search Console, SEMRush, Screaming Frog. Indicate and fix technical issues, delete duplicate content, and set up correct redirects.
• Check your page speed with Google Speed Insights and Pingdom. If your page loading speed is over 2 seconds, that’s the room for improvements. Check image size and the tool’s recommendations. If you need any help with your eCommerce store optimization, you can always get help here. We are happy to assist you 🙂
• Check your SEO settings, product page URLs, page titles, and review your copy. Most eCommerce platforms, such as Magento, Shopify, WooCommerce, offer flexible SEO settings. If that functionality is not enough, it’s easy to add more SEO features with extensions and plugins.

Finally, when your product page looks polished, and you feel satisfied with the result, test, do experiments, and observe how your customers react. User experience is a changing and developing thing that never stops. So we should be flexible and adjust. Let’s recall our primary recommendations for the product page optimization:

What Makes a Good Product Page

The easy but still complicated question about the product page drives thousands of web designers, marketing, and UI specialists across the globe to test and analyze users’ behavior over and over again.

The good product page design focuses on the user and makes the page is easy to navigate. It presents the product at its best, helps the user buy this product fast and get help quickly.

How exactly this page may look is defined by your particular business and your brand vision. If you’d like to create the right product page and even build the whole online store, we will help and take this challenge together with you.

*Our special thanks and admiration:
It was an enjoyable experience to create this article and showcase such successful brands, as IKEA, Tangle Teezer, Tiger of Sweden, Stutterhaim, ME EM, Allbirds, Worth & Worth, Mokarico Coffee, Egger, and ZARA. We are thankful for their unbelievable contribution to eCommerce’s growth, for their inspiring stories, and for the possibility to learn from their example. Learning from the best drives progress.