# Product overview block The top of a product page: the gallery on one side and everything needed to buy on the other. The block is one `.svelte` file built from `SvRating`, `SvSegmented`, `SvNumberInput`, `SvButton` and `SvAccordion`, with a toast from `SvToaster` when the item goes in the cart. The price is integer cents formatted with `Intl.NumberFormat`, and the product images are inline SVG tinted from the `--sg-*` tokens. ## Installation Add the whole group, or one block by its name (shown under the demo):
See it first with `npx @svgrid/ui try blocks/product-overview`. No project needed. ## Product overview block On the left, the main image with previous and next buttons and four thumbnails. The thumbnails are native radio inputs, so Tab reaches the strip and the arrow keys change the image. On the right, the name, a read-only `SvRating`, the price, color swatches that recolor the images, an `SvSegmented` size picker, an `SvNumberInput` quantity (1 to 10) and Add to cart. Sizes sold out in the chosen color are disabled and named in a hint under the picker; switching to a color where the chosen size is sold out clears it. Add to cart without a size shows "Choose a size." on the picker instead of sending anything. Below that come three trust lines (free returns, shipping time, pre-washed) and an `SvAccordion` with Details, Shipping and Returns. Below 760 px the details move under the gallery. > Live demo: Product overview block - https://svgrid.com/demos/654-block-product-overview-split/ `npx @svgrid/ui add product-overview-split` ## Loading the product and adding to the cart The block's ` ``` Sold-out sizes are only disabled in the browser. In the endpoint, look up the SKU for the color and size, check its stock and read the price there; never trust a price or stock level sent from the page. ## Headless The block is a styled render of the core in its `

{pdp.current.label}

{#each pdp.product.views as v, i (v.id)}{/each}

{pdp.product.name}

{pdp.format(pdp.product.priceCents)}

Size {#each pdp.product.sizes as s (s.value)} {/each} {#if pdp.sizeError}

{pdp.sizeError}

{/if}
``` ## See also - [UI blocks overview](https://svgrid.com/docs/help/ui-blocks/index/) - [SvSegmented](https://svgrid.com/docs/help/ui-components/sv-segmented/) - [SvAccordion](https://svgrid.com/docs/help/ui-components/sv-accordion/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-blocks/product-overview/ . All docs: https://svgrid.com/llms.txt