Customer account (sign-in, profile and orders)

One account page for a shop: signed-out visitors get the email sign-in form; signed-in customers see their name, order count, total spent, order history with tracking links, and a sign-out button.

commercecustomeraccountloginmagic-linkordersprofilestripedynamic

About this block

Everything a shop customer needs on one page. Visitors sign in with a one-time email link, no password. Once signed in they see their profile and every order they've paid for, and only their own.

When to use it

  • As the /account page of any shop that takes payments through Stripe.
  • Instead of separate sign-in, profile and orders blocks.

What's inside

  • A signed-out card with the magic-link form (it returns the visitor to /account) and its sending and sent states, and an unticked opt-in checkbox for news and offers.
  • A signed-in profile header from the customer provider (collection: me) with order count, total spent and sign out.
  • An order list from the customer provider (collection: orders), each with date, total, status and a Track button when there's a tracking link.
  • An empty state for signed-in customers with no orders yet.

How to customize it

  • Keep the block on a page at /account, or change the form's returnTo to the page you use.
  • Point the Start shopping button at your shop page if it isn't /shop.
  • Customer accounts must be turned on for the site's plan.

Questions

Do customers need a password?
No. They enter the email they ordered with and click the link they get. The sign-in lasts 30 days.
Can one customer see another's orders?
No. The orders are read for the signed-in customer only, and never shipped in the page for anyone else.

Browse other blocks

Same library cards — preview live and grab the code 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.

Live product grid (Stripe)

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

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.

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.

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 for a storefront. One dropdown per filterable product field (Color, Size, Material — whatever your catalog has) plus a Price range dropdown. Each value shows a live count that updates as other filters change, and values with no matching products are hidden. Facets come from your site's products collection, which is created when you sync Stripe products or import from Shopify.

Mini cart bar

Fixed bottom bar showing cart item count, subtotal, and a checkout button. Hidden until the cart has at least one item. A compact alternative to the full cart drawer for simpler stores.

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.