35 Product page design guidelines

Product titles provide all the required information about your products and help users to perceive them better. Descriptive product titles help customers to find exactly what they're looking for.

Users are used to the standard layout of product pages where the product gallery is placed on the left, and the product overview (title, price, product variants, CTA-button, etc) is placed on the right. Don't break this UX pattern.

One of the most important elements on product pages is the main image. The main image can entice users or turn them away, as it's one of the first touchpoints, and it helps them decide whether to look further.

The product gallery is another critical aspect of the product page. If your main image entices your visitors, the next thing that we want users to do is to browse other product images. We are selling our products using images.

If the product gallery contains 2+ images, you should clearly show that to motivate users to browse product images. The more they engaged, the easier it to persuade them to buy.

Product image thumbnails motivate users to browse product images. But there is another important element that also motivates them to do that - left and right arrows near the main image: it works like a call-to-action to start browsing images.

Mobile traffic attributes for about 50% of Revenue in US e-commerce, which means that the product gallery slider should be optimized for native actions on Mobile devices - swipe to switch between images in the product gallery.

Your products can have different colors, materials, and other attributes. That's why it's important to have product images for each available product variant, so users can see how different product variants look.

When users engage with product variants (colors, materials, type, etc.), they should be able to see how a variant looks in the product image gallery. As a result, it will be clear for them that what they see is what they get.

The most desired action on product pages is when users add a product to the cart. That's why a prominent CTA-button is one of the essential parts of a product page. Without a prominent CTA-button, the user experience dead ends when shoppers find the product they want to buy.

Copy of each CTA-button on the website should clearly explain what will happen after the click. If your button is called Add to Cart, then when you click on it, the cart should open, and not the checkout page. Conversely, if your button is called Buy Now, then it is logical that the checkout page will open.

For many shoppers, the price is the primary driver in whether they'll purchase a product. If they can't easily find the price, they'll probably become wary and shop somewhere else.

When shoppers are ready to move to the next step of the purchasing process (i.e., Add product to cart), they should clearly understand the price of the product they are going to buy without the need to make unnecessary actions.

If you have any additional product-specific (i.e., additional shipping charges because of the product size) or country-specific (i.e., VAT) charges, it can become really unexpected if you only show it during the Checkout process. It will be really frustrating for shoppers.

If you put items on sale, be clear about the sale price and the discount. It would be best if you showed users that they would save due to that discount, both in the percentage of savings and absolute numbers (amount of dollars)

Based on Baymard's researches, 64% of users look for shipping information on the product page. They want to know if you deliver to them, how much shipping will cost, and how long it will take. That's why it's important to show that information on product pages.

If shoppers understand that they don't have any risks when purchasing your products, it will be much easier for them to complete orders. If they understand that they can easily get a refund and return or exchange an item, it can decrease the fears associated with shopping on your website.

In the last years, it became popular to include express payment buttons (Paypal, Amazon, Google Pay, Apple Pay) on different steps of the funnel (product page, cart page, at the beginning of the checkout process)

These buttons simplify and speed up the purchasing process. Also, such buttons like Paypal or Amazon (especially when talking about US audiences) add some sort of trust to the store.

It became trendy to offer payments with installments in the last years, making it easier for shoppers to buy expensive products without big one-time spendings. And this is definitely very important for stores that are selling middle and high-priced items.

Customer reviews play a significant role in e-commerce because many consumers rely on product reviews and customer comments to decide whether to buy the product. Therefore, it is important to have a separate section with reviews to show potential buyers how previous customers liked your product.

If you already collected any reviews for a product, you should actively promote that type of social proof higher on the product page (usually, it's placed near the product title or somewhere at the top of the page)

The better UX of your product pages, the easier it will be for shoppers. The easier for shoppers, the better the conversion rate will be. If you can eliminate unnecessary actions, you should do that. When you use dropdown lists for product variants, you force users to do unnecessary actions.

Again this recommendation has the same logic as the previous one. It just improves the UX and decrease the number of actions that shoppers will have to do to change quantity of items they want to purchase.

If you are selling products of different sizes (e.g., clothes), it's critical to provide users with size charts. If shoppers are not sure if it's the right size for them, they will have a lot of hesitation in the purchasing process.

If you are selling products where information about dimensions is important, then there is a high chance that shoppers will want to see it before making the purchase decision. If you hide this information in the depths of the page, then it will complicate the buying process for some customers

If it's easy to read product information, then your shoppers will clearly understand if your product is right fit for them. But if it's not, then it can create a lot of unnecessary concerns in purchasing flow. That's why it's important to double check your product pages from this perspective both for big (Desktop) and small (Mobile) devices.

Font size is not the only thing that impacts product readability. How you structure all product information (the length of paragraphs, subtitles, bullet-lists, white-space, etc.) also significantly impacts it.

Free shipping is a good advantage in e-commerce. Ecommerce giants like Amazon made consumers used to such shipping conditions, so if you have free shipping, you should wisely and proactively promote it on the product pages (and on all other pages of the website) to make sure 100% of users know about it

Consumers heavily rely on social proof when shopping online. While customer reviews are just the most popular example of social proof that is widely used in e-commerce, there are many other social proof types (external reviews, certificates, press references, awards, etc.) that you can also display on product pages to convince users to buy your products.

What are features? Features are defined as surface statements about your product, such as what it can do, its dimensions and specs, and so on.

What are the benefits? Benefits show the result of what a product can actually accomplish for a customer.

Benefits, not features - this is what really helps to sell a product to a customer. When you are selling any product, you are actually selling a certain experience: your product can simplify life, save time or money, make people beautiful or healthier, etc.

There are different types of customers. One needs to read all the detailed information about the product, while others need to read just a few main short sentences about its benefits.

That's why it became quite popular for e-commerce stores to have short product descriptions with key benefits/features on the top part of product pages.

Different options are possible here. For stores with several products, you can direct the user directly to the cart or checkout. For stores with a large catalog, you can only show confirmation that the product has been added so that the user can continue shopping.

But this is where many shops make serious mistakes. Let's take a closer look at how to optimize this step.

Ecommerce stores can increase AOV by cross-selling and up-selling additional items. Amazon is the best example - they have up to 9 sections that promote different or complementary products on product pages.

Even though you are not Amazon and don't have so many SKUs, repeated customers, and so much data about previous purchases, you can leverage that too by adding cross-sell section(s) on product pages.

If you give your shoppers time to think, they can delay making purchases. Sometimes the delay will be short. Sometimes it will be long, so they even forget about the product and the offer altogether.

A very effective way of persuading users to make a purchase right now is by creating a sense of urgency. If you have any discounts or special offers in your store, you can always make them time-limited and notify users about that. That way, you will add a sense of urgency.

When a product or service is limited in availability, then it becomes more attractive to shoppers. When they understand that it's limited and others also desire it, it creates fear of missing out, which persuades shoppers to act fast.

Human psychology is such that we are prone to purchase something when we know that it's the very last one or that a special offer will expire soon.