Product Page Design

Overview

Build high-converting product detail pages (PDP) with zoomable image galleries, variant selectors (size, color, material), quantity controls, and social proof elements. This skill covers responsive layout patterns, platform-specific customization, and the component choices that drive conversion — from above-the-fold hero sections to sticky add-to-cart bars on mobile.

When to Use This Skill

• When building a product detail page from scratch for a new storefront
• When optimizing an existing PDP for higher add-to-cart conversion rates
• When implementing a variant selector that handles multiple option types (size + color)
• When adding an image gallery with zoom, thumbnails, and swipe support
• When integrating social proof elements like reviews, ratings, and stock indicators

Core Instructions

Step 1: Determine the merchant's platform and choose the right approach