Designing Product Details Pages

The product details page (PDP) is one of the most influential pages in the customer journey. It’s where shoppers stop browsing, evaluate a product, and decide whether to buy. Liferay Commerce provides the flexibility to design these pages in a way that matches your business needs, from simple, structured layouts to highly tailored product experiences.

In this lesson, you’ll learn how to design effective PDPs in Liferay and choose the right approach for your storefront.

Product Details Page as a Conversion Tool

After a customer finds an item through search or navigation, they land on the product details page (PDP). This is the final sales pitch. A successful PDP is informative, persuasive, and designed to eliminate friction. Getting this page right is essential to maximizing conversion rates.

Regardless of your design strategy, modern PDPs require several key building blocks:

• Product Info: Core details like the product name, SKU, description, and price.
• Product Media: High-quality images and videos.
• Option Selection: Controls for selecting variants (e.g., color, size).
• Purchase Action: A quantity selector and "Add to Cart" button.
• Technical Attributes: A specification table (e.g., material, dimensions).

Liferay provides out-of-the-box tools (e.g., dedicated commerce fragments) to add these components to your page.

Liferay’s Approach to PDP Design

Liferay enables you to build these pages in two ways: using standard pages or display page templates (DPT). The method you choose has significant implications for the scalability and maintainability of your storefront.

The standard page approach involves creating a standard Liferay page and using the Product Details widget. This all-in-one widget renders all essential product information in a predefined layout. While this method offers a fast setup, it is structurally rigid. Modifying its appearance typically requires a widget template.

 

In contrast, using display page templates is the more powerful and flexible approach. It leverages Liferay’s visual page builder, empowering you to create and modify product displays by dragging and dropping fragments. Once you define a template for products or a content type, Liferay uses it to display those items at a dedicated URL. This removes the need for coding while giving marketing teams full control over their layouts.

Managing PDPs at Scale

Most products on a site will share the same layout. Setting a single default page or template for all of them simplifies management and ensures a consistent brand experience. With Liferay, you can set a default at the site level using display page templates or at the channel level using standard pages. Additionally, you can override defaults for specific products. These overrides are configured at the channel level and can use either display page templates or standard pages.

When multiple PDPs are set, Liferay determines which to use based on this priority hierarchy:

1. Product-Specific Override: If a display page template or standard page is assigned to an individual product, it overrides both site and channel defaults.
2. Default Display Page Template (Site Level): If no override exists, Liferay uses the site’s default display page template for products.
3. Default Standard Page (Channel Level): If no default template is set, Liferay uses the channel’s default PDP. This setting supports standard pages only.
4. System Fallback: If none of these are configured, Liferay uses the first page it finds with the Product Details widget. However, this can lead to unpredictable results and should be avoided.

To ensure a stable customer experience, you should always configure a default PDP, preferably a display page template. Then, you can reserve overrides for high-impact marketing scenarios. Strategically combining defaults with targeted overrides ensures your storefront remains scalable while delivering distinct, rich experiences for your most valuable products.

Best Practices For Designing a PDP

To ensure maximum conversion and efficiency across your product catalog, follow these best practices:

• Prioritize Display Page Templates: Use display page templates instead of standard pages for greater flexibility. This empowers commerce administrators and marketing teams to quickly update layouts without requiring developer intervention.
• Set a Default DPT: Ensure you set a default display page template for products at the site level. This ensures predictable behavior across your entire catalog and prevents the system from falling back on random, unpredictable pages.
• Use Overrides Sparingly: Use the product display overrides only for flagship products, new launches, or major campaigns. This reduces administrative burden.
• Design Separate B2B/B2C Templates: Design distinct display page templates for B2B and B2C channels. The B2B template should prioritize data and efficiency, while the B2C template should prioritize aesthetics.

Following these guidelines ensures your storefront delivers consistent, engaging, and informative experiences.

Clarity’s Product Details Page Strategy

To maximize conversion across its two distinct audiences, Clarity plans to use a hybrid approach to PDP design. For the B2B distributor portal, they’ll use a standard page for speed and simplicity. In contrast, Clarity's marketing team will use low-code display page templates for the public B2C website. To ensure maximum flexibility, Clarity also plans to leverage the override feature, creating a unique custom display page template for their new "Smart Glasses" launch that includes embedded videos and reviews to justify the premium price.

Conclusion

Product detail pages are typically where purchase decisions happen. By understanding Liferay’s architectural and configuration options, you can design PDPs that scale across your catalog while still giving standout products the attention they deserve.

Next, you'll set up a default PDP for Clarity’s products.