---
title: Product Detail Page (PDP)
description: A single product page with variants, media, purchase controls, and product recommendations.
type: guide
---

# Product Detail Page (PDP)



<PDPBrowser />

The Product Detail Page (PDP) gives shoppers the information and controls needed to choose a product variant and purchase it.

## Help shoppers choose the right variant

Product pages show the title, price, media, description, and available options. Option choices update the page URL, so shoppers can share a selected color, size, or other variant and use browser back and forward controls.

When colors have distinct media, the gallery leads with the selected color's image. Desktop shoppers get a grid and lightbox; mobile shoppers get a swipeable gallery.

Product updates are cached and refreshed by Shopify webhooks. See [Webhooks](/docs/anatomy/webhooks).

## Included purchase features

* **Variant picker** — shows available colors, sizes, and other options.
* **Add to cart** — adds the selected variant without waiting for the full cart response.
* **Quantity** — accepts values from 1 through 99.
* **Gift cards** — collects recipient details and keeps gifts for different recipients separate in the cart.
* **Buy with Shop** — starts Shopify checkout.
* **Bundles** — shows included items and other bundles containing the product.
* **Complementary products** — presents merchant-curated add-ons.
* **Related products** — presents algorithmic recommendations.
* **Structured data** — describes the product and breadcrumbs to search engines.

Quantity, Buy with Shop, bundles, complementary products, and related products are enabled by default. Disable sections that do not fit the catalog or purchase journey.

## What’s next

Common additions include reviews, detailed material or care information, size guides, virtual try-on, and restock waitlists. These features require another data source or service. Add them only when they help shoppers make a purchase decision that the default product data cannot support.


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)