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.

commerceconnectorstripestorefrontproductdetailpdpgalleryvariantsquantity

About this block

A full product page for your store: a photo gallery on one side, and the name, price, description, option chips, quantity and buy buttons on the other. Picking a size or colour updates the price and photo to match that version, and the cart charges for exactly what was chosen. One page can serve every product, because it finds the product from the slug at the end of the page address.

When to use it

  • Products in your shop come in sizes, colours or other options.
  • You want one product page that works for your whole catalog.
  • Your products have several photos that shoppers should be able to flip through.

What's inside

  • A large square main photo with up to 4 thumbnails underneath. Clicking a thumbnail, or tabbing to it and pressing Enter, swaps the main photo. A neutral placeholder tile shows when a product has no photo.
  • A back-to-shop link, the product name as the page h1, the price, and the description, which hides when there is none.
  • One row of pill-shaped chips for each product option. Picking chips updates the price, and the photo too when that version has its own.
  • A labelled Quantity field, then Add to Cart and Buy Now. Both stay greyed out until every option is picked, and a Sold out label replaces them when stock runs out.
  • Side by side on desktop, and stacked with the gallery first on phones and tablets.

How to customize it

  • Point the back link at your shop or collection page.
  • Rename the buttons to fit your store, for example Add to bag or Buy it now.
  • Delete the Buy Now button if you would rather shoppers review their cart before paying.
  • Delete thumbnails you do not need. Each one already hides when the product has fewer photos.

Questions

How does it know which product to show?
It reads the product's slug from the page address and shows that product from your catalog. Put the block on a page with the slug products, then set its URL pattern to :handle in Page settings, so /products/classic-tee shows the Classic Tee. PageHub's store templates and the Shopify import set this up for you.
Where do the size and colour chips come from?
From the options on the product in your catalog. Each option gets its own row of chips, and a product with only one version shows no chips.
What does Buy Now do?
It adds the product with the chosen options and quantity to the cart, then opens Stripe checkout straight away.
Previous
Interactive
Next
Booking

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 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.

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.

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.