Storefront

7 blocks · Live data from your Stripe account — product grids, pricing tiers, order history, customer lists, invoices, coupons, cart, and checkout.

Storefront search bar

Search input that filters the product list on the same page. Updates ?q= in the URL so results are shareable and SSR-rendered.

Storefront product detail

Full product detail page: image gallery on the left (up to 4 thumbnails click to swap), title / price / description / size + color chips / quantity / buy buttons on the right. Bound to the singular 'product' Stripe collection, resolved by slug from the URL.

Storefront category nav

Horizontal category chips pulled live from Stripe products (metadata.category). Clicking a chip filters the product grid via ?category=.

Storefront filter sidebar

Compact filter row with price range inputs and a sort dropdown. Writes ?minPrice, ?maxPrice, ?sort to the URL — SSR + client refetch handle the rest.

Storefront pagination

Prev / Next navigation for paged product lists. Reads ?page= and writes the next/prev value on click.

Storefront facet filter

Shopify-style dropdown filter bar. One Dropdown per auto-detected facet key (Color, Size, Material — whatever your catalog has) plus a Price range dropdown. Each dropdown shows values with live counts that update as other filters change; zero-count values are grayed out. Requires a ProductIndex sync (via Shopify import or the Refresh products button in your dashboard).

Storefront promo code

Promo / coupon code input. Shoppers type a Stripe Promotion Code here; the code rides the next cart-checkout request and Stripe applies the discount on the hosted checkout page. Invalid codes surface a cart error; valid codes show a 'will be applied at checkout' note.