Ecommerce templates

Storefronts, product pages, cart and checkout as whole screens.

Storefront UI is a sequence, and the leaks are at the joins: a product page that forgets the variant on the way to the cart, a cart that reveals shipping at the last step. These are composed screens for the whole sequence — listing, detail, cart, checkout, confirmation — so the joins already line up.

10 matching9 pages1 templateFree to copy
Open the full page for this page

Product Collection

Sticky filter sidebar, sort toolbar and product grid — with the facets dropped rather than stacked on mobile, so a shopping page does not open as a form.

Commerce Pages4 blocks68 lines
Open the full page for this page

Product Detail

Gallery, sticky buy box, details accordion and reviews — ordered by what a shopper needs before they can decide.

Commerce Pages6 blocks75 lines
Open the full page for this page

Checkout

Address and payment with the site navigation stripped and the order summary moved above the form on mobile — both aimed squarely at completion rate.

Commerce Pages2 blocks57 lines
Open the full page for this page

Shopping Bag

Editable lines beside a sticky summary, so the total and the checkout button survive a scroll through four quantity changes.

Commerce Pages3 blocks42 lines
Open the full page for this page

Order Confirmed

The post-purchase screen, with navigation restored and a rail that shows what to buy next rather than what was just bought.

Commerce Pages2 blocks56 lines
Open the full page for this page

Account Orders

Order history in the settings shell rather than a second sidebar layout — an account area and a settings area are the same shape.

Commerce Pages2 blocks42 lines
Open the full page for this page

Product Comparison

The page between a listing and a product detail, with the two questions a comparison table alone cannot answer: will it fit, and can I actually have it.

Commerce Pages6 blocks53 lines
Open the full page for this page

Express Checkout

Checkout for the buyer who will not fill in a form: wallet buttons above the fields, and the address a wallet returns shown and changeable before the charge rather than after it.

Commerce Pages3 blocks57 lines
Open the full page for this page

Order Tracking

For the customer with an order number and no account — a lookup, an arrival range rather than a promised date, and the review form where the "how did we do" email actually lands.

Commerce Pages3 blocks40 lines

Templates1

See all →
Pro
Open the full page for this template

Storefront

Checkout, all five screens of it

The whole purchase funnel: collection, product detail, bag, checkout, confirmation and an account area. Seven routes, no commerce SDK.

7 routes7 pages16 blocksCocoa

Questions about ecommerce templates

Will these work with Shopify or Stripe?
They are presentation only, with data as props, so either works — you supply products and a checkout session. The payment step leaves a slot for the provider's own element rather than styling a card field.
Is the cart state included?
No, deliberately. Cart logic belongs to your commerce backend; what these carry is every screen it needs to render, including the empty cart and the failed-payment state.
Are these ecommerce templates free to use?
9 of the 10 are free to copy and use commercially; 1 need a Pro licence, and each one says so on its own page before you spend any time on it.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add collection-page` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.
Why does this page mix components and whole pages?
Because the phrase does. The same search covers 9 composed pages and 1 template — one of them is the right size for what you are building, and which one depends on how much of the screen you still have to write.