Vitral 0.2

Fernhill Supply

A complete storefront for a small home-goods brand. Browse by room, sort the grid, open a product to pick a colour and size, and carry it through a cart with a coupon to a checkout that validates each step before letting you on.

StoreCheckoutCatalogue
Live demoSource on GitHub

Screens

  1. 1

    Store

    Hero, categories and a sortable product grid

    Open live
    Fernhill Supply: the Store screen
  2. 2

    Product

    Gallery, variants, quantity and reviews

    Open live
    Fernhill Supply: the Product screen
  3. 3

    Cart

    Line items, a coupon and the order total

    Open live
    Fernhill Supply: the Cart screen
  4. 4

    Checkout

    Shipping, payment and review in three steps

    Open live
    Fernhill Supply: the Checkout screen

What's inside

4 screens and 22 components, wired together with shared state and local navigation.

Features

  • Hero, category tiles and a product grid you can filter and sort
  • Product page with a photo gallery, variants, quantity and reviews
  • A cart that recalculates as you edit it, with a working coupon (FERN10)
  • A linear checkout: shipping, masked payment fields, review
  • Shared cart state across every screen, with a live badge in the header

Screens

Questions

About Fernhill Supply, and about templates in general.

No. The checkout validates its fields and shows a confirmation, but there is no payment provider behind it — wire your own into the place-order handler.