When you start an eCommerce store, you soon realise that there are a lot of factors that can affect your success. Getting a website visitor to convert to a customer can be a real challenge to some eCommerce store owners, as only 3% of online store visits result in a purchase.
If you want to find success, you need to optimise all pages of your website for conversion, but most of your focus needs to be directed to creating high-converting product pages.
As this is where your website visitors interact with your products and make their purchasing decisions, you need to know how to design them. Read on to learn 30 proven tips to take your product page design to the next level.
1. Write the perfect product title
The product title you write needs to provide the customer with enough information that will let them know if this is an item they may be interested in. A good product title is as descriptive as possible but shouldn’t contain any fluff words that are unrelated to the product.
As there is a limited amount of words you can use in your product title, make sure to use straightforward words so there is no confusion about what you’re selling. If you know the brand and manufacturer part number (MPN) of the item, include them as well.
2. Use a standard layout
Most eCommerce pages have the same product design page layout, as this is something customers have already accustomed to. Typically, the product gallery is on the left side of the page while the product overview, which includes things the title, price, and CTA button, is on the right.
If you’re thinking about having a different type of layout, you should know that it will only hurt your conversion rates. If you change an element customers are already used to, they will spend more time trying to figure out the strange layout than actually shopping.
3. Include an attention-grabbing main image
A very important part of your product page design is your main image. The main image of a product page can either entice your customers or cause them to lose interest.
There are a few guidelines you should keep in mind for your main image:
- The image needs to be high-quality, ideally taken by a professional.
- Make sure the product is in the centre of the photograph.
- Don’t add other products in the photo, as that could confuse customers.
- Have a light or white background.
- Display the entire product.
- Show arrows next to the image so the customer can easily browse through the rest of the gallery.
4. Create a gallery filled with different product images
After you catch the website visitor’s attention with the main image, you need to give them a better grasp of your product with a product gallery. There is no rule about how many images you should include, but it’s important to have enough of them to allow customers to visualise your product.
Some good practices for images in a product gallery include:
- Showing the product from all angles.
- Including the zoom option for all images.
- Taking pictures of the gallery against the same background as the main image.
- Showing your product being used.
- Including all variants of the same product, such as different colours and sizes.
- Showing the next image in the gallery with a thumbnail, not a grey dot.
5. Optimise the product gallery for mobile
A large majority of your customers probably access your website via their mobile devices and that number will surely increase as time goes by. It’s predicted that by 2021, 53.9% of all eCommerce sales will be performed on mobile devices.
If you don’t want to lose a large majority of customers, you need to optimise your product gallery to support swipe actions on all devices. No matter if a customer is using a mobile or desktop device, they need to be able to access all images in your gallery.
6. Include a prominent CTA button
The end goal of all eCommerce stores is to make a sale, and that’s why the most important part of your product page is a prominent CTA button. If you don’t have a clear call-to-action, your website visitors won’t be able to convert.
Some guidelines for a good CTA button include:
- The colour of the button needs to be prominent and colour-contrast to the rest of the page.
- Have enough white space around the button so it’s noticeable.
- Make the button big and obvious so the customers know where to click.
- Don’t use the same colour as the button for other elements on the page.
- The copy on the button needs to clearly explain what will happen after the customer clicks it.
7. Make sure the product price is prominent
Another factor that determines whether or not a website visitor will convert to a customer is the price of the product. It’s important that people are able to find your product price easily without too much effort. Otherwise, they will become wary and mistrusting.
There are two important things you need to remember:
- Use a prominent colour that doesn’t clash with other elements to display your price.
- The font size of your product price needs to be large enough to stand out and be noticeable.
8. Place your product price close to the CTA button
Before website visitors can move on to the next stage of their purchasing process and click the CTA button, they need to be fully aware of the price of the product. Unless they know how much they’re paying for something, it’s very unlikely they will add the product to their cart.
To make it as convenient as possible for website visitors to see all of the important information, place the price next to or very close to the CTA button. This way, everything will be visible on the same screen, even for mobile shoppers.
9. Display all additional charges
there are many additional charges that go into buying a product online, and most of the time the customer has to pay more than just the price of the product. These usually include shipping charges that are often based on the size of the product.
Unless you offer free shipping and don’t have any additional charges, you need to include those charges near the price. If you don’t do this and only show them the total price when the customer has reached the checkout process, it will lead to frustration and possibly even cart abandonment.
10. State how much customers save if a product is on sale
Everyone loves items that are on sale and you will probably sell a product in larger quantities when it’s discounted than when you’re selling it at its full price. However, it’s important to remember that you need to state exactly how much money the customer will save if they buy a discounted product.
If you just say that the item is on sale without displaying its regular price, the customers won’t be able to see the real value of the product. Instead, show both the original and the discounted price, and also make sure to include the exact amount of money the customer will save.
11. Display shipping information in great detail
Before a website visitor can make a purchasing decision, they need to know if your eCommerce store ships to their location and when they can expect the product to arrive. For their convenience, it’s best to display this information on the product page.
- Show costs for all types of shipping.
- Add the delivery time.
- Use geo-targeting notifications.
- Include shipping information in the header and near the CTA button.
12. Assure customers there is no risk
Some people don’t trust eCommerce stores because there are a lot of scams on the internet, so they have learned to be careful with online shopping. If you want to be successful, you need to show website visitors they can trust you and that there is no risk when purchasing your products.
The best way you can show that is to display information about your return and refund policies, as well as a money-back guarantee. This way, customers can shop on your website without any doubts because. If something goes wrong, they know they won’t lose their money.
13. Include express payment options
The days when people were using a credit card as the only payment method on eCommerce stores are long gone. Lately, express payment buttons have increased in popularity, as they significantly speed up and simplify the purchasing process for the customer.
These buttons are available for PayPal, Google Pay, Amazon, and Apple Pay. Aside from including these buttons on the product page, you should also place them at the beginning of the checkout process and the cart page.
14. Offer payments with instalments
Payments with instalments aren’t necessary or even smart to include if the products you sell on your eCommerce store are affordable. However, if you sell products that may be too expensive for some buyers, you should definitely include this option.
If you’re not familiar with payments with instalments, their purpose is to allow customers to purchase high-priced items without big one-time spendings. When customers have the option to pay monthly fees, they’re more likely to make a large purchase.
Payment options with instalments you can offer include:
15. Display customer reviews
Social proof in the form of customer reviews is an invaluable addition to any eCommerce store, as customers read an average of 10 online reviews before they can trust a business. Website visitors rely on customer reviews to decide whether a product is worth purchasing.
Here are some tips for making the most out of your customer reviews:
- Collect reviews by asking for them directly from previous satisfied customers.
- Offer incentives to customers who leave reviews.
- Include as many details as possible in the review.
- Display the reviews right above or below the product description.
- Show the total number of reviews and the overall product rating.
- Show how many reviews each star rating has received.
16. Prominently show product rating
After you’ve collected a decent number of reviews and your product has a good rating, it’s good to use that as social proof as well. The ideal place for your product rating is near the product title so all website visitors can see it even if they don’t look at the reviews.
This works best if a product is rated 4 stars or higher, as it doesn’t only show that people have purchased the product before, but that they also enjoyed it. A good practice for this is to use yellow stars, as they are more eye-catching than any other colour.
17. Use selectors instead of dropdown lists for product variants
As an eCommerce store owner, if you want to have high conversion rates, you need to make your customer’s shopping experience as simple and convenient as possible. This means you need to know how to design a simple product page.
Most eCommerce stores that offer different product variants usually have a dropdown list where users have to click to choose the option they want to see. This is rather inconvenient because the customer has to click on the list to see all the available colour and size options.
Selectors are a much better option than dropdown lists because they’re much simpler, they show all variants on the screen, and make it easier to see what’s available.
18. Use selector for quantity features, too
The same principle for selectors applies to quantity features. If a customer wants to purchase more than one of the same item, a dropdown list is very inconvenient. It only makes customers complete unnecessary actions.
Quantity selectors are a much better and more convenient option, as users only need to click on the plus and minus buttons to choose the number of products they want to purchase.
19. If you sell products that come in different sizes, provide size charts
If your eCommerce store sells clothes, for example, a size chart is an essential addition to your product pages. If the website visitor doesn’t know whether an item is the right size or not, they either won’t buy it, or they will purchase the wrong size and send it back for a refund.
You can easily avoid this if you include a detailed size chart for every product that states the measurements of each size. A size chart will make the decision-making process much easier for customers and eliminate their fears of accidentally purchasing the wrong size.
20. Show all relevant information about product dimensions
For some products, the dimensions are of great importance to the customers. For instance, if you’re selling furniture, you need to specify the exact size, length, and weight of each piece of furniture so customers know if it fits their wants and needs.
Another important thing you need to decide is whether you should show the size of your products in metres/centimetres or inches. This depends on who you’re selling to and what system is in place in that country. If you sell your products worldwide, it’s best to include both options.
21. Choose a big enough font size
We already explained why it’s important to disclose all product information, but it’s equally as important to make sure website visitors can actually read it. The font size you use for product information needs to be big enough so customers can read it on any device.
That’s why it’s important to check how readable the product information is from both desktop and mobile devices, so you can be sure customers won’t have any issues. The text needs to be readable, easy to consume, and the colour of the font you use needs to be in contrast with the background.
22. Pay attention to readability
There are many different factors that influence your product page’s readability, not just the font size. You also need to structure the text in such a way that it has a positive impact on the reader. A good structure makes the content easy to read and scan.
Here are some guidelines for writing great product information:
- Separate different parts of the product information with subtitles.
- Write short paragraphs that aren’t longer than 4 lines.
- Use numbered and bullet lists.
- Use bold font to highlight important information.
- Break apart large amounts of text with additional images.
23. Promote free shipping if you offer it
Free shipping is a big advantage for eCommerce websites, as customers always want to save as much money as possible. If you decide to offer free shipping, it needs to be integrated into your eCommerce website product page design and you need to know how to promote it on your website.
Most eCommerce stores just promote it on the top of their screens with side-wide banners, but a large majority of customers don’t even notice these banners. The best way to promote free shipping is to use this type of banner on all pages of your website but also place the information next to the “Add to cart” button.
24. Show multiple types of relevant social proof
We already explained the power of using customer reviews as social proof, but there are many different types of social proof you can display on your website to boost your credibility.
- Ratings from external platforms that are specifically dedicated to reviews, such as Trustpilot.
- Certificates from well-known third-party companies.
- Press references from trustworthy websites.
- Awards your company or products have received.
- Feedback from high-authority figures.
These types of social proof are even more efficient than customer reviews, since you don’t own them. Therefore, they seem more trustworthy.
25. Detail all of your product’s benefits
There is a big difference between a product’s features and benefits. While the features are nothing more than surface statements, the benefits show what the customer can actually gain from purchasing the product.
Benefits are what makes the final sale because you’re not selling just a product, you’re selling an experience that will improve your customer’s life in some way. That’s why it’s important to write out an inspirational story that will highlight all the benefits in the product description.
To do this, you need to know the needs, problems, and desires of your customers, and make sure to address them.
26. Include a short product description
While some customers are interested in reading detailed information about a product, others are more interested in a condensed version of the same information. That is why some eCommerce stores have a short product description that only includes the product’s key benefits.
You can write this description right above the “Add to cart” button so the customers don’t miss it. Don’t write more than 1-2 sentences or a short bullet list with only 3-5 points.
For customers that want to know more information, place a “Read more” button under the short description. This way, you will make the most out of your product description page design.
27. Decide what happens when a customer clicks the “Add to cart” button
Different eCommerce stores have a different way of redirecting their customers to the checkout page, and this depends on how website visitors usually interact with your website. If customers generally only purchase one item from you, the “Add to cart” button can lead them to the checkout process right away.
On the other hand, if you have many products and customers usually add multiple items to their cart before completing their purchase, it’s enough to simply show a sliding cart window. This makes it easier to keep shopping while also having a clear view of the items in the cart.
28. Include a cross-selling section
If you own a store that offers a lot of items, you can make an extra profit if you include a cross-selling section. This section promotes items that go well with the item the website visitor is currently looking at.
In this section, you can promote:
- Best selling items that are somehow related
- Products based on the customer’s purchase history
- Discounted bundles of products from the same collection
However, keep in mind that a cross-selling section can distract customers and interfere with the purchasing flow. If you decide to implement it into your eCommerce product page design, A/B test it first to see how your customers interact with it.
29. Use urgency triggers
Creating a sense of urgency is a great way to get customers to act immediately to an offer that is about to expire. If you organise sales and discounts on your eCommerce store, you can use timers and countdowns to show that the offer is for a limited time only.
Place the timers where the customer can’t miss it, such as near the discounted price. However, don’t create fake urgency triggers, as this can hurt your business in the long run, especially if you have repeat customers who can notice this.
30. Use scarcity tricks
When there is only a limited amount of a certain product left in stock, it becomes more appealing to your customers. It creates a fear of missing out and urges people to act on the limited offer more quickly. However, similarly to fake urgency, creating fake scarcity is not recommended.
As for how you should approach this tactic, here is some advice:
- Place the scarcity elements next to the CTA button and the product’s price.
- Use different colours and large-sized fonts to make it attention-grabbing.
- Highlight all the different variants of the product that have already been sold out due to high demand.
A good product page is what will push website visitors into customers by creating the best possible experience for them. If you apply all of these best product page design tips, you can be sure that all of your product pages will be optimised for conversion.
If you want to take it one step further and increase conversion rates even more, you can always seek conversion rate optimisation services. They can help your eCommerce business with UX research, A/B testing, and analytics. This way, you can be sure that you have all the necessary elements for success.