Storefront — Product Page
Sticky gallery, buy box with options, trust row and detail accordions.
The building blocks of a product detail page (PDP). Lay the gallery and the buy box side by side, then stack the trust row and accordions beneath the options.
Preview
Stoneware Dinner Set
Details & materials
Crafted from responsibly sourced materials. Each piece is finished by hand, so slight variations are part of the character. Full specifications and care included.
Shipping & returns
Carbon-neutral delivery on every order, free over $50. Returns are free within 30 days — no questions asked.
How we make it
Made in small batches with makers we've worked with for years. We tell you exactly where everything comes from.
Install
bun x bosia@latest add block storefront/product-gallery
bun x bosia@latest add block storefront/product-options
bun x bosia@latest add block storefront/trust-row
bun x bosia@latest add block storefront/pdp-accordionsproduct-options pulls storefront/store; all pull @lucide/svelte.
Usage
<script lang="ts">
import ProductGallery from "$lib/blocks/storefront/product-gallery/block.svelte";
import ProductOptions from "$lib/blocks/storefront/product-options/block.svelte";
import { createCart } from "$lib/blocks/storefront/store/store.svelte.ts";
const cart = createCart();
</script>
<div class="grid lg:grid-cols-[1.1fr_1fr] gap-12">
<ProductGallery />
<ProductOptions {cart} />
</div>product-options takes a product, optional sizes, and a shared cart (add-to-bag totals the
selected quantity). pdp-accordions uses native <details> for the detail sections.
Source
src/lib/blocks/storefront/{product-gallery,product-options,trust-row,pdp-accordions}/block.svelte