We have placed cookies on your device to help make this website better. Read our full privacy policy in the link below or close this window to continue.
View Cookie Policy
11 Ways to Optimize Your Product Detail Page Image
Diff Blog

11 Ways to Optimize Your Product Detail Page

Written by Justine Lapointe, Experience Designer

On ecommerce websites, conversion is king. The further down the path to the purchase funnel you go, the more critical it is to get it right or risk abandonment. And there’s no place more crucial in the funnel than the product detail page (PDP). Read on to learn the many components that come together to make a solid PDP that will enhance the overall usability of your site, elevate the user experience and ultimately reduce abandonment. 

1. Concise product titles

Product titles can end up being cumbersome and take up a lot of space on a PDP. The reason behind longer titles is often that more keywords = better SEO, but this is an outdated SEO strategy. There are tactics to preserve the keyword-rich effect of a longer product title which will ultimately lead to a cleaner look and design. Keeping in mind that the most important ‘H tags’ for pulling keywords are H1 (product titles) and H2’s (subtext). In addition, if it is possible to change the handle/URL of a product page, the URL itself may be an effective way to utilize those keywords that are most important for good SEO. Keyword friendly URLs are called “speaking” URLs – they must have a well written anchor tag and be relevant to your product. Keep product titles concise (no more than 5 words please!) and you’ll do yourself and your users a favor.

Want to learn more about SEO? Check out our Shopify SEO replatforming starter kit to boost traffic and drive sales

2. Readily available product descriptions 

Hiding important content within tabs or accordions can have a negative result because users may never discover this information. If you decide to nest information within tabs it’s important that those tabs have clearly defined titles. Any ambiguity here could cause a user to miss out on relevant information that may have resulted in a sale. It is ideal to have your product descriptions exposed as there are important keywords within the description that can contribute to SEO. 

Keep them unique

Product descriptions should be unique – duplicate content doesn’t fly in search engines. If you are having trouble writing unique descriptions for certain pages, placing a ‘no index’ meta tag on those pages would solve that issue. This basically tells search engines to skip the page, which in turn is better for your site’s SEO. 

Keep them short

The length of your product description will depend on a couple things: how familiar your demographic is with the product and how many benefits and features your product has. When writing your descriptions keep in mind that shoppers have short attention spans, so in most cases, three sentences should suffice.

Include benefits and features

As an “experienced” shopper I want to know exactly how I can benefit from using whatever it is that I’m buying. Things I look for when buying a product are: 1) How it will benefit me in the long run, 2) If I will have to continuously be updating it or replacing it, and 3) If it’s useful. The benefits and features of a product should be mentioned in the product description. Keywords about the benefits and features will further drive your site’s SEO and return positive results in any search engine. Additionally, reinforcing information about a product can sit lower on the page; things like: how to's, where it’s made, product care, and product reviews. 

3. Large product images

Having a large image at 50% of the width of the PDP will allow the user to clearly view the details of a product, and help make purchasing decisions easier. It’s best to have more than 1 image at different angles, users will expect this. A simple and neat approach to indicating that there are additional images on a PDP is to include a carousel with visible dots for wayfinding. You don’t always need to have product thumbnails visible, but if you decide to, using them in a way that elevates your design would be best. For some sites having large product images doesn’t make as much sense, and some regulated industries aren’t able to show certain aspects of a product. In these cases, having a smaller image is fine and can allow for more room to play with the overall design and layout of information. Unfortunately not all users have the luxury of being able to see the images that you include, that is why it is important to include image alt tags. They are very important for SEO and part of Web Content Accessibility Guidelines (WCAG) compliance for websites. 

4. Clearly displayed price 

In most cases, price is important to shoppers. It shouldn’t be hard to find and should be in a high visibility area. The price should not look like a decorative element on the page, it should be high contrast and close to the product title or the ‘Add to Cart’ button. Keeping it close to the ‘Add to Cart’ button as well as the quantity stepper allows the user to see the instant update when adding multiple products. Displaying the price near the product title and within the ‘Add to Cart’ button adds a level of trust and confirmation when purchasing a product. Discounted pricing should also be available on the PDP, this information shouldn’t be a surprise at checkout. 

Depending on your target demographic, to some people the price may not be as important. For example, high end retailers may choose to make the price less obvious, as their main demographic isn’t concerned with price as much. On the other hand, if the retailer is on the lower end and has several deals this information would be more of a driving factor in purchasing. In some cases like with long time consumers or those who have automated purchasing set up on their accounts, they may no longer see the price as a deciding factor - unless of course the price goes up.

5. Obvious interactive variants

Not everyone has slender hands and fingers… some users may have been blessed with Fred Flinstone hands. The difficulty here is that “Fred” can’t tap your 15px by 15px touchpoint. More substantial touch points are better in every case, if a user is unable to select a size or color they may be more inclined to shop somewhere else. WCAG and most common standards for touchpoints in general is 35px in diameter. It’s important to consider active, hover and inactive states for your in-stock and out of stock variants. Each state should have a different look, which should eliminate any confusion and allow a more successful path-to-purchase. Variants should be organized in a logical order, and with headings that are the same size, weight and color. Radio buttons should be used only when 1 option is suitable (and selections are limited to a few), or selection buttons can be used to select multiple options. Dropdowns should be used when copy length for certain variants runs too long and when there are too many variants to display. A better organization of the path-to-purchase elements will create repeat users. By ensuring that your site is web compliant, people like Fred will thank you. 

6. Loud ‘add to cart’ button

If the ‘Add to Cart’ button is too hard to find, or isn’t a clear call to action (CTA), Ariana Grande’s song “Thank you, Next” comes to mind! If a user can’t add an item to their bag because of poor UX they will abandon ship. Add to cart CTAs should be loud and prominent on the page - this is one of the final steps before checking out. This CTA in particular can be larger than other CTAs on the site: it should be legible, with bolder copy, and potentially a color to make it stand out even more. The same rules apply for sticky CTAs as well. It’s best to have this CTA in button form as it creates more of an impact. Simple text CTAs in this case will go unnoticed. If you decide to include the total price within the “add to cart” button, please ensure a large enough width to accommodate a fluctuating price or one that has additional decimal places. The last thing you want is a broken button with pricing details missing or oddly displayed. 

7. Reservation busters 

Users should be provided with enough information about a product to feel confident and safe purchasing it. As long as it is not overwhelming, giving a user additional information that would help them feel more confident is always positive. Anything that can remove doubt in a user’s mind would be considered what is typically called a ‘Reservation Buster’. Some of the most effective reservation busters address the most common user doubts head-on: knowing when a product will arrive, how much it will cost to ship, if it can be returned or if there is a product warranty. These elements should be near a conversion point, i.e. as close to the ‘Add to Cart’ button as possible, and can exist as simple microcopy or be more prominently represented with icons or illustrations.

This PDP illustrates the 11 ways to optimize your product detail pages. 

8. Wish list functionality

“Wish listing” or “favoriting” are great ways to track a user’s shopping habits, and go a long way to retaining customers who aren’t sure about purchasing a product. Implementing this feature will enable your site to better understand what your users want. Tracking the behaviour of your users allows you to market to each individual in a unique and personalized way. Wish lists provide users with the ability to save an item to purchase at a later date. Many sites use cookies to track this behaviour and recall products from these lists to gently remind a user not to forget about these specific items. 

9. Upselling, cross-selling and recently viewed

Not to be used interchangeably, upselling, cross-selling and recently viewed product listings are powerful tools for increasing basket size. While the techniques of each are slightly different, the shared intent is to convince users that purchasing additional products would be a benefit to them. Upselling usually entails identifying and promoting a product that would enhance or supplement the product being viewed. Cross-selling is the technique of showing the user a similar product to the one they are viewing in case they aren’t completely sold on the current product. This can have the additional effect of encouraging additional purchases as well (upsell). The recently viewed product listing is pretty self-explanatory – it tracks what the user has looked at, and taunts them to take another look (and hopefully buy). The level of complexity of these features can range from simple algorithms based on product tags to personalization based on artificial intelligence. Ultimately however, the suggestions provided to the user should be relevant to what they want or need. When implemented correctly with the right tools, these features can create a pretty substantial impact on average order value.

10. Social proof

How important are user opinions of your site or products? This probably depends on both the level of product awareness as well as the type of product you’re selling. Social media and the power of influence that it can have on users is at an all time high. When a product is endorsed by an influencer it becomes mainstream and everyone wants to be a part of the trend. Some of the ways to social proof your site are: endorsements by influencers or people who have great knowledge in a certain area, testimonials from customers or 3rd parties, reviews from your customers, brand partnerships or affiliation, and social sharing. The key is to use the social proof that you have in moderation – it’s not a great idea to use all types at once on the PDP. In fact I’d recommend using just a few sources to avoid information overload. Nobody likes a show-off! Only use the social proof that makes the most sense for your brand. For example, if you are a mattress company, having customer reviews is beneficial to your users. This is because when shopping for bigger bulk items users may seek out reviews from multiple sources for insights on the comfort level and quality of the mattress. Keep in mind that when implementing social proof some users don’t fully trust reviews listed on your site as they may assume they’ve been curated. To hedge against this, provide users with links to outside validation to reduce their distrust. 

11. Visual effects

People are visual creatures by nature and are enticed by things that stimulate the senses. Adding features like augmented reality, 3D product views, and micro-animations provide users with a more interactive experience. These additions shouldn’t lessen the importance of a product, they should elevate it. Ecommerce experiences such as AR can now make users feel like they are physically in a store testing out a product without ever having left their home: they have the option to visualize what a piece of clothing would look like on their body. 3D product videos allow users to see the product in use or in more detail. Everything can be visualized in 3D using product imaging software, and these 3D product images can be combined with AR to immerse the user into the experience. An alternative that won’t break the bank are smaller micro-animations, these can be used to add to the overall visual aesthetic of a site and help provide a clearer path-to-purchase. By leveraging technology to create innovative and engaging ecommerce sites that users can interact with, you’ll see in return increased conversion rates. 

Are you wondering if your product detail pages are performing their best? Diff has a user experience team that is ready to help ensure your PDPs are optimized for conversions.

If you have any questions about ecommerce, let’s chat!

You might also like
How to Create a Customer Review Strategy That Will Boost Sales
November 24, 2020
The Link Between Customer Service Mastery And Profitability
November 16, 2020
This Q4, Create Purposeful Customer Relationships Through Social Impact
October 27, 2020
Next article: 100
Previous Article
Why Your Store Needs a Wish List Feature For This Holiday Season
Next Article
10 Questions to Ask About Shopify Accessibility and ADA Compliance

This website is optimized for all modern browsers.

Please download a more recent browser.