In theory, product pages are simple. You want to give the right amount of information to the customer and help them buy the desired product. But the reality looks a bit different.
According to studies, 55% of users spend less than 15 seconds on any given website. This means that once someone arrives on your product page, you’ve only got a short amount of time to spark their interest. If you miss your chance to catch the visitor’s attention – you’ve lost.
Here we discover the techniques that are used by world-renowned companies in building their product pages, along with reviewing some current best e-commerce product pages. Learn our tips and develop a product page that sells!
We develop optimized
10 Steps to Make the Best E-commerce Product Pages
Recommendations on how to create an e-commerce product page abound. To compile the recommendations below, we gathered our customers’ insights together, as well as our own observations, and some generally accepted e-commerce product page best practices.
#1 Use great product images
Selling is always primarily about representation. The better you represent your items, the more the customers desire them. That’s it. To date, the best way to represent your products remains the use of images that are high-quality and customized. Your photos should be perfect in showcasing all the features and characteristics of the product.
The best practices for creating great product images include:
- Quality. Do not neglect investing in procuring high-quality images – nobody likes blurry images, and your customers are no different no matter how impressive your products are. Get a good camera or even hire a professional photographer.
- Consistency. Keep the same style and size across all product images – they should be of uniform size and style across all product brands you carry because consistency just looks better!
- Size. A generally-accepted recommendation says 1920×1080 is optimal for product images.
- Quantity. Implement multiple images to show the product from every angle. This will ensure clear demonstration of all its features.
- Uniqueness. You can use the default product pics provided by the supplier. However, we recommend that you avoid this tactic, because such images tend to look generic and dull.
ASOS is often named in various TOPs-lists when reviewing the best product pages. We especially like their product pics, which are always bright, high-quality, and attractive, as you can see in the screenshot below. Additionally, we’d like to emphasize the following:
- ASOS hires photo model–representatives of different ethnic groups, which is currently a hot trend.
- Their models reject standard mannequin-like posing. Instead, they are depicted in motion, which gives their pictures a fresh approach.
#2 Showcase the product from all angles
Standard product images are not always sufficient for delivering a clear impression about the product. Every industry has the same tired set of angles for doing product images: from the front, top, and side. Give your customers a little bit more, and they’ll be grateful for the abundance of images showcasing the item from all sides. It will also help prevent any potential misunderstandings about the products.
The best practices for illustrating the product are to:
- Rotate the product. This way you can prevent any possible misunderstanding – the more you show – the fewer questions the customer will have.
- Show what’s inside. It works especially well for the apparel industry – shoes, clothes, accessories. Customers love the opportunity to see the interior of a pair of fine shoes, stitches on the flipside of a fashionable trench coat, the pockets inside a clutch, and so on. These details will help them to best imagine themselves wearing the item in question as well.
When talking about the best product page examples, it’s hard to pass by Argent without a mention. When shopping there, you can rest assured that you won’t encounter any unpleasant surprises about the product you’ve ordered. The reason is simple – Argent provides a lot of images, thus allowing you to evaluate every little detail of the product:
- Models clearly show all the product’s features such as the textile’s texture, the stitches, edgings, and overall quality of the product.
- All of the product images are high quality, enabling customers to see all the details about a chosen item.
#3 Develop a clear call-to-action
The call-to-action button is a great way to nudge users forward in the direction of making a purchase. Because of this, it requires a lot of attention to ensure that is bold and appealing. Not to worry, all you have to do is to make it easily found and just apply one of many popular phrases already in use on the button. There’s no need to be abundantly creative when it comes to the wording choice, otherwise, you risk confusing your customers. Instead, simply employ the proven adage “Buy Now”, “Add to Cart”, or “Sign Up”. If none of these seem to fit the ticket, there are many more options out there. The advantage of these phrases is that they are well-known, encourage predictable behavior, and don’t confuse people.
The best practices for the call-to-action are:
- Make the CTA visible. It’s always a good idea to select a color bright enough to catch the shopper’s eye. You can consider using a different color for other buttons on the page so the CTA button doesn’t blend in with them. Another tip is to try using contrasting colors to make the button really pop.
- Keep it large. Let your CTA button be the largest one on the product page. It’s the most important one, so it should look the part. You can have one or two other buttons that are the same size, but not larger than the CTA.
We particularly liked the call-to-action button at Blissworld store, which you can see in the screenshot below. Here’s why:
- The call-to-action button is clear, bright, and easily-findable on the page.
- The copy used for the button is considered to be one of the most effective and converting.
- There is no similar button on the page, and the CTA grabs the visitor’s attention from the first sight.
#4 Create appealing product copy
Along with product images, customers also pay considerable attention to product descriptions. Even more so, some customers prefer reading the descriptions over watching product images. Thus, good product copy must be among your priorities during the product page development.
Knowing what to write is half the battle and knowing how to write is the other half. Here are the best practices to create an outstanding product copy:
- Be brief. Nobody likes reading longreads, especially when it’s boring. The best action is to keep the description under 10 sentences.
- Prioritize. Put relevant information first. There’s no guarantee that the visitor will read product descriptions from A to Z, even if they’re brief. Make sure that the first thing they read is the most vital information about the product.
- Be creative. Your supplier can provide you with default product copies, but we don’t recommend using it. Rather than blending in with other stores selling the same products, create your own descriptions. If creative writing is not one of your strengths, consider hiring a professional copywriter to add that necessary spark to your descriptions.
Negative Underwear does a really good job with a copy for their products. Here’s how:
- The product details are presented as a list of features, which is convenient and easy for customers to digest. The list points are short and informative, giving a good impression of the product.
- In addition to the product description copy, Negative Underwear begins with a quirky short sentence, not to depict the product, but to entertain visitors. And it works!
#5 Take care of the metadata
Metadata is the only point on this list that matters not for customers, but for search engines and browsers. Metadata is about making your store findable to customers, and indexable to search engines. Metadata is also about summarizing the basic information about the webpage. Metadata is responsible for making, finding, and working with particular instances of data easier.
The best practices that are used to create and optimize metadata are as follows:
- Employ search keywords. This step will help you to be more findable and indexable across all search engines.
- Include a call-to-action. By doing so, you encourage potential visitors to enter your webpage.
- Describe the page or the product. The visitor should be informed about what’s waiting for them by clicking the link, and a short page description is a really good way to achieve this.
As an example of well-optimized metadata, you can take a look at the Gymshark website. Here’s what you’ll find:
- The metadata is clear and concise. From the very first meeting with the brand on the search engine result, the customer gets a comprehensive understanding of what is waiting for them on the website.
- All the images across the website have alt-tags. This ensures that in cases of poor internet connection the customers won’t be confused about any missing images that can’t be loaded – instead, they’ll see alt tags with alternate text in the place of the images.
#6 Implement mobile responsive design
According to studies, mobile devices are currently the most popular for making online purchases – with around 40% of them made via smartphones. With this in mind, naturally it makes sense to ensure your website enjoys mobile optimization, paying particular attention to the product pages. We recommend that you make your product pages look great and work well on any portable device.
Independently of the device you prefer for surfing Triangl – you can be sure that your experience will be smooth and seamless. This makes Triangl a good example in terms of mobile-first design:
- The mobile layout is clean and elegant. The products have enough white space to “breathe”, and thus they are clearly highlighted.
- Every product image across the store is well-optimized for mobile devices – you’ll see no blurring or distortion irrespective of whether you use a pad or smartphone to explore the website.
#7 Show stock availability
You know the situation. We’ve all been there. You go to order a particular product, and get through the whole shopping process, only to then be informed about its lack of availability at checkout. This is a really annoying experience for anyone. To prevent your customers from encountering the same situation, you can implement a stock counter. You can easily find an appropriate solution by third-party integration like a module or extension for the Magento platform, application for Shopify, or plugin for WooCommerce, depending on your website’s situation.
Unconditional invented a very clear solution to resolve the question of stock availability – they simply implemented the use of a bold, highly visible “Sold” mark on the items that are out of stock. While customers may still be disappointed the item they want isn’t available, it averts attempted purchasing of a missing product, and communicates the stock information to customers much sooner, thus avoiding worse frustration down the line.
#8 Lay out shipping policies clearly
Often shipping costs become a nasty surprise for customers, leading them to abandon the shopping process. There are two possible solutions for you here: a good one and a perfect one. A good option is informing the customer about shipping in advance – for example, you can place the shipping terms into the footer of the page or include them on every product page across the website. The perfect option is offering free shipping – by offering this, customers will have no need to make any calculations. As for the best ways to implement free shipping, there are two options: conditional and unconditional shipping. Conditional implies the fulfillment of certain conditions, such as meeting a minimum order value, the purchase of featured items, economy delivery and so on. On the other hand, like the name implies, unconditional free shipping means free shipping for every item and every order without any conditions.
In our opinion, Pour Moi’s online store deals very well with the placement of shipping and return terms. Here’s how:
- Shipping policy terms are situated on every product page, so there is no need for the customer to search for them on the site.
- The terms are written very clearly and leave no chance for misunderstandings.
#9 Implement rating & reviews tools
Being trusted by customers, both present and potential ones, is one of the cornerstones for any business. However, it is especially vital for the e-commerce sphere. Collecting customer reviews is a good way to build a good relationship between your business and your customers. By implementing ratings and reviews on your product page, it allows you to connect with potential customers in a way that shows them you are operating in a trustworthy manner.
Implementing rating and reviews tools is a smooth and easy process – just upload and install the needed third party integrations. You can find such integrations on Magento Marketplace, the Shopify App Store, or the WooCommerce Extensions page.
The best practices for the rating and reviews section design are:
- Make the reviews and ratings sections easily available – don’t make your customers feel like they’re playing hide-n-seek while searching for opinions.
- Don’t hide negative customer reviews. This is your chance to grow your credibility and authority, showing that a negative review is not a problem for you, and you can address them.
- Implement pre-moderation before you publish any review – this is a common practice which allows you to prevent the posting of any inappropriate content on your website, such as advertisements, insults, NSFW content, and even spam.
Adidas knows everything about proving themselves to their customers with a prominent tool for reviews and ratings. Here’s how they deal with it:
- In addition to traditional average ratings and reviews, visitors can also discover the number of customers who have already experienced buying an item and how they estimate size, quality, width, and even comfort with it.
- The review tool design looks fresh and attractive, despite requiring many fields to fill in.
#10 Optimize your store
Even if you sell unique products on a perfectly-designed website, poor page speed load can frustrate the shopping procedure for customers. Time is money, and keeping this in mind, customers prefer to abandon a slow website in lieu of a fast one. To prevent this, we recommend that you pay attention to optimizing your website speed, paying particular attention to product pages.
The best practices for page speed optimization are the following:
- Compress product images. There is a plethora of tools, both free and paid, which can make images lighter without any visible distortion. You can consider Apptrian, Potatocommerce, Compress JPEG, and many other similar tools
- Employ CDN. This step will be especially efficient if your store’s audience is spread worldwide. In addition to supported geographical proximity, CDN will take over delivering web content and speed up the page loading.
One of our recent clients had performance issues on his digital media website, so he came to us. For performance rate estimation, we used Google PageSpeed, which assigns points from 1 to 100 to the website in question. Any result above 80 points means that website is well-optimized. After our engagement, performance increased from 43 points to 96, as you can see in the screenshot below.
As you can see from all of the above, creating the best e-commerce product page design is not rocket science. All it takes is a commitment to following clear and simple recommendations designed to keep your customers’ stay on your website pleasant and enticing.
To finish, we’d like to give you a few final recommendations on how to create the best e-commerce product pages design development:
- Combine all these tips wisely. Before implementing any tip, think about how it will fit an existing page structure.
- Don’t ever stop improving your product page. Stay open to new trends, tips and methods for product page enhancement and don’t be afraid to try novelties in this field.
Now that you have picked up some meaningful insights on how to develop great e-commerce product pages, you’re absolutely ready to apply them to your own website. However, if anything remains unclear to you or you even just have a few questions about something else regarding your online store – you’re always welcome to drop us a line at anytime. We’ll be happy to answer any questions you have!