5 Product page design rules you never want to break

5 Product page design rules you never want to break

5 Product page design rules you never want to break

Design of an e-commerce store is a powerful converting tool.

If the users enjoy their time on the site, chances are high they will buy from you. Vice versa, if the design is sloppy and non-responsive, the users will leave and most probably head to your competitors who may have the same products but faster site load and prettier page layout.

We have already reviewed the good and bad examples of e-commerce product pages and justified our rating. Now we will see the 5 ultimate product page design rules that you want to follow no matter what in order to keep the conversions growing and the customers happy.

1. Remember the five cornerstones of conversion

A converting e-commerce product page has five main elements which should be placed above-the-fold and included in the initial page load:

  1. product photos,
  2. CTA buttons,
  3. price,
  4. customer reviews,
  5. product variations.

Let’s see them in detail.

High-quality product photos

Images are the first thing to grab the users’ attention and persuade them to check out the product. So it’s your top priority to make product photos as appealing as possible.

The first thing to watch for is image quality. Make sure all photos have a high resolution so they will be displayed equally well both on the desktop and mobile screens.

For better customer experience and product discovery, provide a 360-degree view of the product with the image carousel. Another thing that many companies started doing is offering a close-up view of the product details (like shoelaces or embroidered brand logo) to increase the informativeness of the product page.

Hire a professional photographer to ensure high-quality product photos. Or check out some of the available guides online (like this one) and learn how to take some awesome shots yourself. There are various online tools to improve product images (e.g. remove background or apply filters).

Example: Puma

product page puma quality images

Make your CTAs visible

CTA buttons encourage users to buy your products so you want to make them extremely visible and interactive.

The main rules for the CTA buttons design are:

  • make them bright and easily spotted,
  • place them where users will see them (top of the page, near the product image),
  • personalize the content.

Even though there are certain rules to follow, you should always do the A/B tests to see which option works best for your specific site. It may happen that unconventional design decisions deliver better results.

Example: Public Desire

product page public desire cta buttons

Always state the price

Visible and understandable pricing is the number one rule if you want shoppers to buy from you.

If the user is confused about the price or finds out that the price on the product page and the one in the cart differs, this will immediately lead to the cart abandonment and will drag your sales down.

Here is what you can do to avoid such problems:

  • use a large font,
  • use a bright color,
  • always inform the users about additional fees (i.e. shipping or taxes),
  • place the price near the important elements (product title or CTA button).

A good idea would be to add a price calculator to either a product page or checkout to provide a better user experience and eliminate any unpleasant surprises upon paying.

Example: Christian Louboutin

product page Christian Louboutin

Add customers’ reviews

85% of the shoppers rely on reviews when choosing a product and the display of reviews on the product page can boost your conversions by more than 200%.

Reviews increase the store’s credibility and help the shoppers make a buying decision. So don’t forget to use this element in your product page design to raise conversions and build up shoppers’ trust towards your store.

One more thing: don’t be afraid to display negative reviews alongside positive ones. In fact, mixed reviews cause better response because the shoppers see them as more reliable and honest.

Example: Ikea

product page customer reviews ikea

Add product variations

“I love this product but do you have it in another color?”

Retailers hear this one too often. Shoppers may love the brand – but they also love the variety and need a few options to choose from. This is where product variations step in and save the day.

Variations are basically the possible options of color, pattern, size, or shape. While seemingly minor, the display of product variations can double your conversions and greatly improve customers’ experience.

The only thing to watch for is navigation between the variations. One of the most frequent problems for e-commerce stores is that the users do not see how they can choose the desired option. So when they try adding a product to the cart, they receive an error notification and leave the site faster than you jump in to help them.

A great way to allow shoppers to find additional options is by adding facets and filters to the left-hand side of the results page. These enable shoppers to filter results based on their given criteria, which allows them to shop from relevant, in-stock items.

What you can do is either make the buttons larger and more visible or add a “constructor” to the store that will help the user assemble their perfect product step-by-step.

Example: Ali Express

product page product options aliexpress

2. Make the copy shine

Product title and description are among the first things a shopper notices on the page. So it’s crucial you invest some time and effort into creating an engaging and fresh copy.

Product title

The main goal of a product title is to inform the user about the product and its features. For that, follow a simple format:

  • brand name (if applicable),
  • color,
  • size (if applicable),
  • quantity or size (a set of items, unit of length),
  • keywords (if relevant).

Example of a title for a set of tableware: Harrison Champagne Glasses, Set of 4.

Product description

Did you know that 20% of sales failure is caused by confusing product descriptions? Luckily, writing a good description is a clean sailing once you got the most important aspects covered.

First, get to know your audience and find the right tone. Do your shoppers like humor, use slang, or prefer a formal business language? By knowing all that, it will be easier to create a copy that causes response from the users. Remember: you are writing for people so don’t go for an ultimate sales pitch.

Second, include the core elements:

  • product features,
  • product benefits,
  • keywords.

The main point about writing a good product description is to offer value to the shoppers and answer their question, “Why do I need this product and how will it benefit me?”

Tip: for better engagement, place a short product description and then add the “Learn more” option below. This way, you will serve both those people who don’t like lengthy copy and those who want to learn everything about the product.

3. Don’t be afraid to cross-sell and upsell

Upselling and cross-selling are great for boosting sales and providing a personalized offer to shoppers. The most popular way to use these methods in e-commerce is in the form of product recommendations.

Luckily, Magento already has built-in options of cross-selling and upselling that you can configure as needed. But remember the golden rule: always bring value to the user.

When cross-selling, make sure the offered product complements the initial customer’s purchase and increases its value. If you upsell, justify your offer and point out all the advantages of paying more.

Tip: do not impose your opinion. Many e-commerce stores write messages like “We recommend you try this…” but that’s less efficient than “Other customers love…” statement. The secret lies in the fact that shoppers want to make independent decisions – so give them a choice instead of deciding what’s best for them.

4. Optimize for mobile

Mobile e-commerce is gaining momentum and there are approximately 4.7 billion mobile users in the world. So if your store is not mobile-ready, you may be losing sales right now.

Mobile design dictates different rules than the desktop one. Here are the biggest things to focus on:

  • make the mobile store light-weight for faster loading and better performance,
  • ensure the images are displayed well with no losses in quality and color,
  • enlarge the CTA buttons,
  • simplify the navigation and make it intuitive for smoother user experience.

Mobile users tend to be more impatient than desktop ones so your ultimate task is providing them with smooth and lightning-fast experience.

5. Choose the correct store theme

The choice of a store theme is quite a complex task. You need to make sure that the theme’s color, design elements, and overall layout correspond to your brand’s identity and represent you in the desired way.

There are two options to choose from: a ready or a custom theme. Both have their pros and cons.

Ready theme pros:

  • fast to implement,
  • come with product page design template,
  • responsive.

Ready theme cons:

  • may have a poor code,
  • may lack in functionality/customization,
  • may not correspond to your brand.

Custom theme pros:

  • 100% corresponding to your brand,
  • excellent performance,
  • limitless customization.

Custom theme cons:

  • may take a long time to develop,
  • expensive.

Judging from our experience, custom Magento theme development delivers higher ROI and our clients can prove that. By carefully reviewing your store, we will not only identify the UX/UI pain points but also provide suggestions on how to boost your store performance and make it go faster. And faster store means more conversions. Happy customers, happy you!

Magento tips from real projects
Magento tips from real projects
CALL US 24/7:
& asia
+61 (02) 8005-7494