skip to Main Content
Getting Started: Product Detail Pages

Getting Started: Product Detail Pages and the Art of Showing and Telling


Editor’s note: This is the second in our six-part Getting Started series, designed to assist beginners with online commerce.

The product detail page (PDP) is one of the most important sections of a transactional eCommerce website. If it looks unprofessional or is slow to load, buyers will go elsewhere – faster than you can say, well, “page load.” In one survey 87% of shoppers say product content is extremely or very important in making purchasing decisions. Besides attractive graphics – layout and photography – and fast load times, what else should you consider when building your product detail page? Navigating what and how you share product details can be challenging with so much information available. Calibrating the amount of information is key.

By following these best practices, you can optimize your PDP, enabling conversion rather than serving as a barrier to purchase.

Clear Product Descriptions

SA product description should help customers understand the benefit of the product they are viewing. A rich product description can be a few, brief sentences utilizing keywords associated with the product that also support better SEO performance.

Be sure to list important details about your product. In the case of clothing, for instance, this might include:

* Weight
* Washing instructions
* Dimensions
* Material(s) used

Available Sizes with Sizing Chart

Let’s stick with the example of clothing. People come in myriad shapes and sizes, and they need to know if your garment will fit before committing to a purchase. Next to a drop-down menu of available product sizes, include a sizing chart. The link should open an overlay on top of the existing page and not take the visitor to a different page.

Visible Color Variants

Rather than showing colors you offer in a drop-down menu, consider using a list of images. Imagery can be a more effective selling tool than text alone, offering a quick view of the color options. Ensure when using images that you clearly show the selected variant. You can outline the product or use a badge graphic. This eliminates uncertainty when the customer is browsing.

Customer Ratings and Reviews

Even if your product is unique, customer reviews and ratings are crucial in building trust with potential customers. Make sure the rating symbols appear near the title of the product “above the fold,” along with a link to the in-page customer reviews that gives customers a glimpse at the number of reviews offered.

Image Variants

Seeing a product from a different angle or context can be integral in convincing a new visitor to make a purchase. Say you’re looking at a tiki torch. Seeing the product in front of a white background may not be enough to inspire a purchase. Add some variant images so people can imagine the product in their actual lives. One variant image could be a manicured backyard photo with the item smartly placed. Another variant image could show a few torches lighting a nighttime backyard party with friends enjoying themselves.

Variant images should be:

* Clear and small—between 40 and 80 pixels
* Accessible via the keyboard (you can tab to the image and hit the enter key to view it)
* Placed below or to the side of the featured, active image

Provide Product Image Zoom-In Ability

Certain products don’t elicit the need for a close-up look. If you’re selling a book, for example, it’s probably not critical to show a zoomed-in view of the spine. But what about a pet leash? Does the item have any sharp edges? What does the build quality look like? Adding a hover zoom-in feature can instill customer confidence in the features offered.

Natural view:

Zoomed-in view:

Informational Video

Sometimes variant images might not tell the whole story for a curious customer. Including an informational video can drive home how your product works in a more engaging way. For example, if you are selling clothes, providing a video that shows how they look on a live model and in motion can motivate a purchase.

Discounted Products

Maybe you’ve discounted a product to increase sales. If you don’t visually show that you’ve discounted the price, potential customers may not see the value you are offering. To drive home this point, be sure to show both the crossed-out, original price along with the new, reduced price.

Similar or Related Products

Utilizing the space below the main product with a related products section is a great way to unobtrusively offer the visitor more buying options and a potential up-sell without seeming pushy. Make sure that the products on display are relevant to the product being viewed. A common mistake when starting a store is to show unrelated products. This can lead to a negative perception – that you don’t know your buyers and that you are interested only in sales rather than customer care.

The Right Balance

A strong PDP is like a great meal—you might not be able to recite every ingredient included, but you notice when something important is missing. Most modern templates get a lot right when it comes to the design aspect of a product display page. But refining your PDP beyond best practices should be specific to what your customers want and need to know about your products.


Alexandra Wood
Alex has worked in eCommerce for over 8 years supporting large multi-$100M companies and those just starting out. Today, she leads Small-Medium Business Solutions at LiveArea. When not working you can find her cheering on her sports teams and enjoying good weather with friends on a patio in Dallas.

Andy Hoffman
Andy Hoffman began his web career when people still wore flannel shirts tied around their waists. He currently lives in Portland, OR, and serves as Shopify Lead for LiveArea. When he’s not coding, Andy enjoys drumming, biking, coffee, and Abe, his evil-genius cat.