Author: Luke Carthy
Whether you’re focusing on organic (SEO) or paid campaigns, product detail pages (PDPs) are central to how your potential customers browse your offerings, perform research, and ultimately buy from your business.
For most online stores, every single PDP is constructed from and powered by a single page template that is solely responsible for connecting shoppers to thousands of products and URLs. That being said, many eCommerce websites leave money and opportunity on the table by failing to maximize their template’s potential.
If you’re using an off-the-shelf theme for your eCommerce store, there are almost always opportunities to optimize the stock PDP template to improve consumer confidence and give your shoppers all the details they need to convert.
With that in mind, let’s dig into the key elements your PDPs need to have for increased conversions and sales.
Table of contents:
Mobile-first design
We couldn’t talk about PDPs without first addressing the devices that your potential customers use to access them.
It’s not atypical for 70% of traffic to PDPs to come from mobile devices. With the lion’s share of traffic going to mobile (particularly for D2C brands), it’s critical that you apply a mobile-first philosophy when designing a great product page.
Pro tip: If you’re primarily serving B2B customers, you’ll find the mobile/desktop split to be more even. In these cases, I’d still recommend focusing on mobile first as we expect a greater shift to mobile over the coming years. B2B commerce is typically up to five years behind the curve.
My advice here is to cater and design your PDP for mobile users first, then take advantage of the greater real estate for desktop shoppers later.
Plenty of brands start the other way around and romanticize the desktop UX whilst neglecting mobile. This is where a lot of issues can creep in, resulting in a lackluster PDP experience.
If you’re running search ads, a large proportion of your shoppers will be visiting from a mobile device. Mobile traffic via search ads is typically much more expensive, so you should prioritize your mobile experience first.
With that being said, let’s jump into what makes a great PDP experience for potential customers—starting from the top of the page and moving downwards.
Breadcrumbs
A wonderfully simple (yet hugely beneficial) feature on PDPs, breadcrumbs actively reduce bounce rate and help customers explore similar products with just a single click—but only if they’re designed well.
There’s a lot of pressure to display the right product for each visitor on the first click. If what you’re showing isn’t quite what your customer is looking for, a quick click into the breadcrumbs can reveal more options from the same category.
Here, the challenge for mobile users is: how do you effectively display breadcrumbs with such little screen real estate?
The trick here is to only show the deepest category for the product, as that’s often the most relevant and most engaging breadcrumb level. For example, let’s say you’re a luxury furniture retailer. A potential customer has landed on a leather corner sofa. The category hierarchy could look like this:
Home > Sofas > Leather Sofas > Leather Corner Sofas
The mobile breadcrumb would just display “Leather Corner Sofas” as that’s the deepest category for the product being viewed.
Showing all levels of your website hierarchy on mobile can make the page look cluttered—the breadcrumbs would likely spill onto multiple lines and it would take up more precious screen space.
Comparatively on a desktop, you have the real estate to show all levels simultaneously:
Product images
Product images are the gateway between your product and your potential customers, helping to close the gap between shopping online and shopping on the high street. Your images can make or break your conversions and sales, so they’re an absolutely critical factor for eCommerce success.
Image performance
Images are often the largest element on the page (in terms of file size), so this is where you typically have the most leverage when it comes to influencing load times.
Using image compression tools, like TinyPNG, to compress your website images (product images, etc.) can shave up to 70% off the file size without impacting quality.
Separately, to make your images even more lightweight, consider next-gen image formats, such as JPEG 2000 or WEBP which are much more efficient and lightweight than JPEG or PNG alone.
Note:Wix will convert your images to WebP format for you automatically (for browsers that support it), ensuring the fastest possible experience for your customers.
Image galleries
Having worked with and extensively tested many iterations of gallery designs and layouts, here are the key points I recommend you consider:
Thumbnails are a must. If you have multiple images, displaying “dots” (to indicate additional images) isn’t enough. Allow shoppers to scan thumbnails and select the images they want to see, rather than forcing them to scroll through each image sequentially.
Make it easy for shoppers to zoom and pan. Customers should be able to easily zoom and pan images just like they would on their phone’s gallery. Pinch-to-zoom and being able to pan an image help close the gap between in-person and online shopping.
Don’t forget about video. Video can really bring products to life. If you sell tactile products (such as apparel or fabrics), showing a video of someone modeling a garment or squeezing a cushion can really help your customers get a stronger idea of what the product is like and how it fits their needs.
Showcase user-generated content. Extreme Terrain (in the image below) is a brand that implements user-generated content (UGC) to inspire shoppers with ways that other customers have used their products. This can really help to reduce buyer anxiety and improve conversion.
Lazy load gallery images. Even highly optimized and compressed images can have large file sizes (especially GIFs). So, to improve initial page load times and provide a smooth UX for shoppers, lazy load images where possible. Note: Wix websites lazy load images by default.
Link to the product’s brand category
One of the biggest omissions I see on PDPs is not linking to brand categories for eCommerce sites that sell a multitude of brands.
Brand is often one of the most considered factors when customers shop, particularly at the luxury/premium end of the market. So, make it easy for customers to explore a brand from your PDPs.
Let’s look at two retailers side-by-side to explore the difference here.
Currys is an electronics retailer that sells products from thousands of brands. As you can see from the example below, there’s no easy way to navigate all SHARK brand products from the PDP. | Toolstation, on the other hand, makes it easy for customers to browse all products from a brand, empowering brand-aware customers to explore more. |
 |  |
Pro tip: Linking to brand categories from PDPs also contributes to your internal linking efforts. Doing this can help your brand categories rank better, capturing more brand-focused, bottom-of-funnel search traffic.
If you only sell one brand, but have multiple collections, you can deploy the same strategy here to instead link to the different collections within your brand.
Product descriptions
Product description design is all about making this section of your PDP as intuitive and interactive as possible for customers (while also ensuring that the content is SEO-friendly, as I’ll discuss in the JavaScript section below).
Firstly, hastily throwing together a complete product description is often bad news, particularly if the description is lengthy.
You want to avoid making your product descriptions look unwelcoming or feel like a chore. Getting customers to read your content is already a challenge in itself—don’t make it more difficult than it needs to be.
Breaking up your description into sections and using a tab or accordion for each section of your description can help make your product’s written content more approachable.
In addition, it allows your customers to quickly jump to specific parts of your description, rather than having to scan it all or take the extra step of searching the text on the page to get to what they’re looking for.
Here’s a great example of using accordions/toggles to break up content and make it more accessible:
Speaking of your written content, your PDP is also a great place to take snippets of key content from elsewhere to minimize distraction and reduce the chance of visitors going to other pages to get the information they need. Examples of these supporting, product-related details include:
Size guides
FAQs
Return policies
Delivery option
By serving these key pieces of information on the PDP, it’s easier for customers to buy on the page (instead of potentially getting distracted right before checkout).
Key calls-to-action
Naturally, your “Add to Cart/Basket” button is a crucial action you want customers to take, so make it convenient to access from anywhere on the PDP to minimize friction.
A great way to do this is by making the “Add to Basket” button persistent alongside the price at the bottom of the screen (once it’s out of view). Just ensure it doesn’t clash with any live chat or loyalty icons, etc.
The color of your (call-to-action) CTA will depend on the design of the rest of the product page, so make sure there’s a high level of contrast so it stands out. For extra “flair,” a gentle animation can add a nice, dynamic touch. To learn more about the subtle art of calls-to-action, bookmark this CTA guide by Lazarina Stoy.
Quantity fields (optional)
As insignificant as this might seem on the surface, screen space on your PDPs is at a real premium. Removing your quantity field can free up precious space, but deleting it isn’t necessarily the right choice for every online store.
Be sure to look at your purchase data to understand what quantities people typically purchase. For example, when it comes to sofas, most customers will only purchase one of each item. Sure, they may purchase multiple unique items, but typically only one of each.
In contrast, in the world of beauty products, your customers may be more likely to buy multiples of the same item. This is especially the case for brand-loyal customers stocking up on their staple items.
It also goes without saying that if you’re serving B2B customers, you’re more likely to need a quantity field as many customers may purchase items in bulk (taking advantage of price break discounts, for example).
Pro tip: If you decide to remove the quantity field from your PDP, make sure you have it on the basket page so people can easily tweak their quantity before checking out.
How to increase trust signals and shopper confidence
From product and site-wide reviews to UGC that showcases your brand’s loyal audience/community, trust signals and social proof can help instill confidence and encourage first-time customers to buy from your online store.
Pro tip: For maximum impact, I recommend that you place your reviews widget/badge underneath the “Add to Cart” CTA. This encourages customers to take that action and allows them to engage with your convincing trust signals and commerce functions without scrolling.
Social proof and UGC
Featuring real customer testimonials, images, videos, and even FAQs can all help encourage visitors to turn into customers (whilst building trust and authority with brand new audiences).
Word-of-mouth is (and always has been) a powerful marketing tool for brands. User-generated content digitizes this form of marketing and works to bring new customers onboard or even encourages repeat customers. With an impressive 79% of consumers suggesting that user-generated content influences their purchase decisions, it’s certainly worth investing in UGC on your PDPs.
Platforms, such as reviews.com, allow you to collect product and merchant reviews from your customers, but they also have add-ons available to more seamlessly integrate UGC into your overall workflow.
Show off your other unique selling points
Free delivery, extended returns window, generous guarantees, etc.—your key and distinguishing benefits will further reduce shopper anxiety and encourage visitors to buy.
When possible, it’s a great idea to position these unique selling points near the “Add to Cart” CTA, too, so as to eliminate any last-second apprehension that might deter a potential customer.
Structured data markup
Structured data markup (in the form of Schema) helps contextualize your web page content for search engines. It fundamentally helps search engines get a better understanding of the page or product.
Additionally, product schema can help your website take advantage of “rich results” (shown above) within the search results to entice potential shoppers before they even click through. These include:
Pricing and stock information
Breadcrumbs and category hierarchy
Product ratings
Item condition
Shipping information
Brand
Colors and attributes
etc.
Note: Wix automates structured data markup on all Wix Stores product pages, Wix Bookings services pages, Wix Blog posts, Wix Forum posts, and Wix Events pages with preset markup, facilitating rich results without site owners having to implement it themselves.
Minimize JavaScript dependency
Relying too heavily on JavaScript (JS) rendering to display content can mean that search engines can’t (or won’t) load that content, which could have negative implications for your SEO (and potentially make your website bloated and slower to load, too).
To be clear here, I’m not suggesting that using JavaScript is bad—far from it. In fact, your eCommerce site likely needs JavaScript for some commerce functions to work as planned. The issue creeps in when JavaScript needs to be rendered in order to display text, images, and content on the page.
Not all search engines are created equal—and most search engines cannot render JS. There are multiple reasons for this, but one of the key factors here is that rendering JS is resource-intensive and is expensive for search engines to execute.
This means accessing crucial content on pages is a real challenge for search engines when they depend on JS rendering to display content.
It’s worth mentioning that Google can actually render JS. However, due JS rendering demanding far more of Google’s resources, Google crawls fewer pages and does so less frequently.
This can impact how fast new content appears in organic results and influence how soon updates make it to Google results, too, which could be a fairly acute challenge for eCommerce sites where stock, pricing, and availability change frequently.
Here’s a visual example of a website that entirely depends on JS to make its content visible—if a search engine can’t/won’t run the JS, all it will “see” is the image on the left:
JavaScript Off | JavaScript On |
 |  |
Check how dependent your website is on JavaScript
For me, the easiest way to check JavaScript dependency is to use a free and simple Google Chrome extension to toggle JS on and off in your browser—it’s called Quick JavaScript Switcher. Turning JavaScript off will allow you to see how your website would look and feel to most search engines.
Ensure all your content is there, hyperlinks are intact, and images are present. If your content mostly or completely disappears from the page, your website is likely too dependent on JavaScript.
Avoid pop-ups
So many eCommerce sites utilize marketing pop-ups to encourage sales, collect leads, incentivize sales with discounts or promotions, etc.
However, the worst place on an eCommerce site to show an “on-entry” pop-up is the PDP.
The PDP is often the template that’s most affiliated with the strongest buying signals and queries—specific, detailed and truly bottom of the funnel.
If a visitor enters your site via a PDP, there’s a greater chance that they’re going to convert as it’s more likely that they’ve specifically searched for an item or they’ve used a long tail query to land on one of your PDPs.
Therefore, displaying intrusive and potentially frustrating pop-ups is likely to erode conversions and negatively impact sales.
Having tested this across multiple sites, removing pop-ups and interstitials from PDPs has always delivered a positive outcome.
PDP optimizations work together to grow sales, but some are more important than others
When it comes to creating effective PDPs, remember that there’s no silver bullet on offer here; rather a collective of incremental design changes and components that jointly help you to move the needle and grow sales.
However, designing for mobile-first is the most important recommendation of them all. Failing to do so will cost you sales and customers. Not prioritizing mobile users compromises all of the other suggestions here.
Additionally, there’s no sign of consumers’ preference for mobile slowing down either. In fact, quite the opposite—consumer spend on mobile continues to grow. Look after your mobile audience and in return, they’ll look after you!
