Skip to content
Adobe Commerce Storefront
Docs Playgrounds Videos

Product Details Page overview

The Product Details Page (PDP) dropin provides a variety of fully-customizable controls to help you showcase your products, including image carousels, thumbnails, pricing, descriptions, and more.

Section topics

The topics in this section will help you understand how to customize and use the Product Details dropin effectively within your storefront.

Installation

Provides the step-by-step process for embedding the Product Details dropin into your site. This topic covers everything from basic setup requirements to more advanced configurations, ensuring that the dropin integrates seamlessly with your existing website architecture. It is designed for compatibility with modern web technologies, focusing on ease of use and flexibility for developers. Visit the PDP Installation page to get started.

Styles

Describes how to customize the appearance of PDP dropins using CSS. We provide guidelines and examples for applying styles to various components within the dropin. This customization allows brands to align the dropin’s look and feel with their overall design aesthetic, enhancing brand consistency across the platform. Visit the PDP Styles page to learn more.

Containers

Describes the structural elements of the Product Details dropin, specifically focusing on how the container manages and displays content. It includes information on configuration options and how to leverage these settings to customize the user experience. Understanding the container is essential for developers looking to optimize the layout and styling of their PDP dropins. Visit the PDP Containers page to learn more.

Slots

Details the various UI slots available within the Product Details dropin. Each slot can be customized or replaced with alternative content, providing flexibility in how information is presented to the users. This topic includes diagrams and examples that describe the default UI controls and how they can be used to fit different needs. Visit the PDP Slots page to learn more.

Functions

Describes the API functions available in the Product Details dropin: getProductData and getRefinedProduct. These functions allow developers to retrieve and display detailed product information dynamically. Visit the PDP Functions page to learn more.