The homepage is still the front door to a retailer’s online business, but shoppers are increasingly entering the site directly to a Product Detail Page (PDP) via social media or a marketing email. This raises the stakes enormously for the PDP, which is already one of the most hardworking elements of a retailer’s site.
It has to showcase the product, educate and influence the shopper, be optimized for SEO and make it easy for shoppers to add items to their cart. According to Commerce Cloud benchmark data, 30% of sessions start on the product detail page, so yes, your PDP must make a great first impression!
The PDP UX best practices shared here are based on the review of thousands of sites, extensive heat mapping studies, Commerce Cloud benchmarking data, and industry statistics. But remember, what works for one retailer may not work for another. Given how critical the design of the PDP is to your business, A/B testing is always recommended before you implement any changes.
Hierarchy Matters When It Comes to Page Layout
We know, based on heatmap studies, that 45% to 65% of shoppers do not scroll below the Add to Cart button, so the location of elements on the PDP should be carefully considered. The lower a feature is on the page, the lower the view rate; Only 11% of shoppers scroll all the way down to the content slot directly above the footer.
Designers are asked to fit numerous elements on the PDP including product details, pricing, alternative images, videos, swatches, sizes, customer reviews, product recommendations, and user generated content. Take the time to prioritize what is important to your brand and your customer.
- Position key product details and calls to action above the fold as much as possible.
- Optimize white space. Maintain balance between elements on the page but look for opportunities to tighten up extra white space in order to move elements higher up the page.
- Find opportunities to use horizontal alignment instead of stacking elements directly on top of each other (i.e. place the quantity field and add to basket button on the same line).
- Use accordions for displaying and hiding content on mobile. Accordions give shoppers easy access to additional information without excessive scrolling.
- Provide good visibility to customer reviews by positioning them high on the page. According to industry data from Econsultancy, 63% of shoppers are more likely to purchase after reading a review.
- Move social sharing icons down the page. These icons get less than a 0.1% click rate in heatmap studies.
Product Image Display
High-quality product images are absolutely critical for digital shoppers that can’t touch, feel, test or try on your product. Product photography needs to show product details, features and quality.
Heatmap studies revealed important trends in how shoppers interact with alternative product images based on thumbnail location and presentation. Here’s what we found:
Thumbnail Location on Desktop
Thumbnails positioned to the left of the main product image have a click rate of 39.5%, while alternative image thumbnails positioned below the main image get just under an 8% click rate.
Alternative Image Presentation on Mobile
The use of left/right arrows to scroll between the main product image and alternative images had the highest click rate. Thumbnails positioned below the main image performed almost as well, while dots beneath the main image (indicating swiping) had the least interaction, most likely because they simply don’t stand out like arrows and swatches.
Like detailed product images, videos convey important elements of a product (how it’s worn or used) to help digital shoppers make a purchase decision when they can’t check it out in person. If a picture is worth 1,000 words, videos are worth 10,000 because they can demonstrate product details, show products in action, provide instructions for use or assembly and boost shoppers’ confidence in a product, ultimately driving conversion.
Shoppers who watch videos are almost twice as likely to buy than shoppers that don’t watch videos. In fact, retailers see a 10% sales lift when videos are present on the PDP, and a 13% decrease in returns when product videos are present.
However, videos don’t always have to be about products. Brands like Fender Guitar (above) are using educational videos to encourage repeat traffic, repeat purchase, and brand and product engagement.
Swatches vs. Dropdowns
When it comes to selecting product attributes such as size and color, usability is key. You don’t want to introduce any friction in the process of customers’ adding a product to a cart.
When we analyzed swatches vs. dropdowns for product selection, we found swatches have a higher click rate than dropdowns for both desktop and mobile. Additionally, add-to-cart rate was 11% for swatches, and just 5% for dropdowns.
Why? Swatches simply stand out more on the page and allow for quick visibility to color and size availability. Swatches also require less interaction from shoppers, which increases overall usability, especially on mobile.
The Add-to-Cart Button
“Add to Cart” is by far the most important button on your site. It must stand out on the PDP so your shoppers will be compelled to take action. You should test the size, color, shape and position of your add-to-cart button to determine impact on your business. Some brands have reported increases in add-to-cart rates as high as 21% after simply A/B testing different colors. Retailers should also consider testing iconography on the add-to-cart button such as a plus symbol or shopping cart.
Sticky Add-to-Cart Button
We know that mobile shoppers are more willing to scroll than desktop shoppers given the fact that scrolling is a natural motion on touch devices. Implementing a “sticky” add- to-cart button (see ECCO example above) that is persistent at the bottom of the mobile screen and spans the entire width of the screen can be a great mobile optimization. This allows mobile shoppers to click add-to-cart at any time, no matter where they are scrolling within the page.
Consumers are landing directly on PDPs (not homepages) more often, driven there by social media and marketing emails. So the user experience of the PDP is just as important (often more so) than the homepage. Getting the customer to hit ‘add-to-cart’ is the main job of the PDP. Retailers should test simple variations of design elements such as buttons, swatches, dropdowns, image treatments or placement of product information, and remove any friction.Take the data and findings we’ve shared and use it as a starting point for testing your own PDP to see what works for your site and customers.
And check out the Fashion Shopping Focus report for more analysis on how the PDP impacts revenue and shopper behavior.