Product details page overview

The product details page (PDP) drop-in component renders detailed information about your products, including descriptions, specifications, options, pricing, and images.

The practical application of rendering different product types is to provide a consistent user experience across different products. For example, a simple product can be rendered with a single price and quantity, while a complex product can be rendered with multiple options; their combination resulting in product variants. This flexibility allows you to showcase a wide range of products in a consistent and user-friendly manner. These product types allow you to cater to diverse customer needs, streamline operations, and enhance the shopping experience.

Use cases

The PDP component provides a variety of fully-customizable controls to showcase your products according to your brand’s aesthetics and build interactive experiences that engage customers. Use cases include:

Image Carousel: Display multiple product images in a carousel format, allowing users to view different angles and details of the product.
Product Information: Showcase detailed product information, including pricing, descriptions, and specifications.
Product Variants: Display different product variants, such as colors, sizes, and styles, allowing users to select the option that best fits their needs.
Product Reviews: Include user reviews and ratings to provide social proof and help users make informed purchasing decisions.
Customization Options: Customize the appearance and behavior of the drop-in component to align with your brand’s design aesthetic and user experience goals.

Render product types

The PDP component supports rendering different product types configured in your Adobe Commerce instance by default using data provided by the Catalog Service GraphQL API. Adobe Commerce supports seven product types, but the Catalog Service GraphQL API schema maps these to two types:

Simple products are products that are defined with a single price and quantity. Catalog Service maps the simple, virtual, downloadable, and gift card product types to simpleProductViews.
Complex products are comprised of multiple simple products. The component simple products can have different prices. A complex product can also be defined so that the shopper can specify the quantity of component simple products. Catalog Service maps the configurable, bundle, and grouped product types to complexProductViews.
Go to the Commerce APIs Playground and run the product query to see the product data structure for different product types.

Product metadata and SEO

Generating product metadata is crucial for optimizing search engine visibility, enhancing user experience, integrating with social media, supporting ecommerce functionality, ensuring compliance, and enabling data-driven decision-making.

The Commerce boilerplate provides a metadata generation script that fetches product data from the Catalog Service GraphQL API and generates meta tags and structured data in JSON-LD format. The script writes the metadata to an Excel file, which you can upload to Edge Delivery Services.