e-commerce product gallery thumbnails pdp product gallery thumbnails images pdp detail product page with image gallery multi-image product detail
Product Detail With Gallery
Fetch pattern JSON:
curl https://webspire.de/patterns/product-detail/with-gallery.json with-gallery.html
<section
class="ws-product-detail"
style="
--ws-product-detail-bg: oklch(0.98 0.005 75);
--ws-product-detail-text: oklch(0.2 0.02 75);
--ws-product-detail-text-soft: oklch(0.45 0.015 75);
--ws-product-detail-border: oklch(0.85 0.01 75);
--ws-product-detail-accent: oklch(0.55 0.15 150);
--ws-product-detail-action-bg: oklch(0.35 0.02 75);
--ws-product-detail-action-text: oklch(0.98 0.005 75);
"
>
<div class="mx-auto max-w-7xl px-6 py-16 lg:py-24" style="background:var(--ws-product-detail-bg);color:var(--ws-product-detail-text)">
<div class="grid gap-10 lg:grid-cols-2 lg:gap-16">
<!-- Product Gallery -->
<div class="flex flex-col gap-3">
<div class="aspect-square w-full rounded-2xl" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300));border:1px solid var(--ws-product-detail-border)" role="img" aria-label="Main product image"></div>
<div class="grid grid-cols-4 gap-3">
<div class="aspect-square rounded-lg" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300));border:2px solid var(--ws-product-detail-accent)" role="img" aria-label="Thumbnail 1"></div>
<div class="aspect-square rounded-lg" style="background:linear-gradient(135deg, oklch(0.65 0.12 220), oklch(0.55 0.14 270));border:1px solid var(--ws-product-detail-border)" role="img" aria-label="Thumbnail 2"></div>
<div class="aspect-square rounded-lg" style="background:linear-gradient(135deg, oklch(0.72 0.08 180), oklch(0.62 0.12 230));border:1px solid var(--ws-product-detail-border)" role="img" aria-label="Thumbnail 3"></div>
<div class="aspect-square rounded-lg" style="background:linear-gradient(135deg, oklch(0.68 0.1 200), oklch(0.58 0.13 250));border:1px solid var(--ws-product-detail-border)" role="img" aria-label="Thumbnail 4"></div>
</div>
</div>
<!-- Product Info -->
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold tracking-tight sm:text-4xl" style="color:var(--ws-product-detail-text)">Premium Wireless Headphones</h1>
<!-- Rating -->
<div class="mt-3 flex items-center gap-2">
<div class="flex gap-0.5" role="img" aria-label="4.5 out of 5 stars">
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:oklch(0.8 0.02 75)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<span class="text-sm" style="color:var(--ws-product-detail-text-soft)">(128 reviews)</span>
</div>
<!-- Price -->
<div class="mt-5 flex items-baseline gap-3">
<span class="text-3xl font-bold" style="color:var(--ws-product-detail-text)">$99.00</span>
<span class="text-lg line-through" style="color:var(--ws-product-detail-text-soft)">$129.00</span>
</div>
<!-- Description -->
<p class="mt-4 text-base leading-relaxed" style="color:var(--ws-product-detail-text-soft)">Experience studio-quality sound with active noise cancellation, 30-hour battery life, and ultra-comfortable memory foam ear cushions. Perfect for commuting, working, or relaxing.</p>
<!-- Size Selector -->
<fieldset class="mt-6">
<legend class="text-sm font-semibold" style="color:var(--ws-product-detail-text)">Size</legend>
<div class="mt-2 flex flex-wrap gap-2" role="radiogroup" aria-label="Select size">
<label class="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium transition" style="border:1px solid var(--ws-product-detail-border);color:var(--ws-product-detail-text-soft)">
<input type="radio" name="size" value="S" class="sr-only"> S
</label>
<label class="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium transition" style="border:2px solid var(--ws-product-detail-accent);color:var(--ws-product-detail-text)">
<input type="radio" name="size" value="M" class="sr-only" checked> M
</label>
<label class="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium transition" style="border:1px solid var(--ws-product-detail-border);color:var(--ws-product-detail-text-soft)">
<input type="radio" name="size" value="L" class="sr-only"> L
</label>
<label class="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium transition" style="border:1px solid var(--ws-product-detail-border);color:var(--ws-product-detail-text-soft)">
<input type="radio" name="size" value="XL" class="sr-only"> XL
</label>
</div>
</fieldset>
<!-- Quantity -->
<div class="mt-6">
<label class="text-sm font-semibold" style="color:var(--ws-product-detail-text)">Quantity</label>
<div class="mt-2 inline-flex items-center rounded-lg" style="border:1px solid var(--ws-product-detail-border)">
<button type="button" class="px-3 py-2 text-lg font-medium transition hover:opacity-70" style="color:var(--ws-product-detail-text)" aria-label="Decrease quantity">−</button>
<span class="min-w-[3rem] text-center text-sm font-medium" style="color:var(--ws-product-detail-text)">1</span>
<button type="button" class="px-3 py-2 text-lg font-medium transition hover:opacity-70" style="color:var(--ws-product-detail-text)" aria-label="Increase quantity">+</button>
</div>
</div>
<!-- Add to Cart -->
<button type="button" class="mt-8 w-full rounded-xl px-6 py-3.5 text-base font-semibold transition hover:opacity-90 sm:w-auto" style="background:var(--ws-product-detail-action-bg);color:var(--ws-product-detail-action-text)">Add to Cart</button>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
e-commerceproductgallerythumbnailspdp
Slots
| Name | Required | Description |
|---|---|---|
| mainImage | Yes | Primary large product image. |
| thumbnails | Yes | Row of thumbnail images below main image. |
| title | Yes | Product name heading. |
| price | Yes | Current and original price. |
| actions | Yes | Add to cart button. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| thumbnailCount | number | 4 | Number of thumbnail images to display. |
Enhanced variant with thumbnail gallery. Use when products have multiple images that users need to browse.