Live product grid (Stripe)

Data-bound product card grid that repeats for each Stripe product. Connect Stripe to populate automatically.

commerceconnectorstripeproductsgridcardsdata-boundrepeaterdynamic

Browse other blocks

Same library cards — preview live and grab structure from any block.

View full library

Shopping cart drawer

Pre-styled slide-out shopping cart with header, item list, checkout button, and continue shopping link. Drop onto any page to enable cart functionality.

Product scroll strip (Stripe)

Compact horizontal scrolling product strip with small cards. Great for related products or upsells.

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.

Checkout notification banner

Auto-appearing banner that shows a success or cancellation message after Stripe checkout. Dismisses automatically after 8 seconds.

Checkout success message

Thank-you section shown after a successful Stripe checkout. Centered heading with confirmation message and continue shopping button.

Storefront product detail

Full product detail page: image gallery on the left (up to 4 thumbnails that swap the main photo), and title, price, description, option chips for each variant (like size or color), a quantity field, Add to Cart and Buy Now 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=.

Featured product spotlight (Stripe)

Data-bound hero showcasing a single featured product with large image, title, description, price, and buy button.

Live coupon grid (Stripe)

Data-bound coupon cards from Stripe showing discount amount, duration, and redemption count.

Customer order history

Order history for signed-in site customers, fetched in the browser from their account. Signed-out visitors see a sign-in prompt, and customers with no orders see a friendly empty state.

Live pricing tiers (Stripe)

Data-bound pricing cards that repeat for each Stripe price. Shows plan name, price, billing cycle, and subscribe button.

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.