Discover the key elements that make up the PDP. From product visuals and essential information to interactive features like size selectors, learn how each component contributes to an engaging and intuitive shopping experience.

Key PDP Elements

1. Product Media

The Product Media section showcases images, videos, or 3D renderings provided by your brand, allowing customers to explore the product visually.

Default

Product Media when scrolled

Key Features:

• Media Carousel: Scroll horizontally to view all available visuals, replicating the in-store browsing experience.

Enlarged media

Pinched to zoom in

• Enlarge and Zoom: Tap any media to enlarge it for detailed viewing. Use pinch-to-zoom gestures or swipe to navigate between media in enlarged mode.

2. Key Information of the Product

The product’s essential information is displayed prominently below the media carousel.

Default

With Sale price

Includes:

• Style name and ID.
• Color name(s).
• Pricing: Both original and sale prices, if applicable.

3. Additional Information of the Product

This section provides detailed product information like descriptions, composition, or washing instructions.

Default

Description expanded

Key Features:

• Expandable Sections: Tap the arrow icon to expand or collapse individual details, keeping the interface clean and user-friendly.

4. Color Variants

If a product comes in multiple colors, they are displayed in this section.

Key Features:

• Displays up to two rows of color variants.
• +N Button: If there are more variants than fit in two rows, a "+N" button expands to show the full list.

5. Size and Length Selectors and Add to Basket Button