Product Card

A full single-product display page — image gallery, variant picker, quantity selector, price, description, and a Stripe-powered Buy button. Embed it on any page to create a dedicated product landing page.

Layout

The block uses a two-column layout: image gallery on the left, product info on the right. On narrow viewports it collapses to a single column.

Image gallery

Variants

Color and size choices (when the product has them) are shown as separate pill selectors above a list of matching variant rows. The price updates to reflect the selected variant's price. If inventory tracking is enabled, out-of-stock variants show “Out of stock” text next to them, but the row stays clickable — it is not disabled.

Checkout

The button is labeled Add To Cart, not “Buy now”. It stays disabled until the selected variant has been synced to Stripe — while unsynced, it shows “Sync to Stripe first” or, if Stripe isn't connected at all, “Connect Stripe to enable checkout”. Once enabled and clicked, it creates a Stripe Checkout Session for the selected variant and quantity and redirects the customer to Stripe's hosted checkout page. On success, the order is recorded and Resend sends a confirmation email if configured.

In the editor

In the editor, the block shows a product picker to select which product to display. The full product detail view renders as a preview, including the quantity selector and checkout button — nothing about that section is specifically disabled for editor mode. Whether the button is clickable depends only on the Stripe-sync state described above, same as on the published page.