Skip to content
GetUrUI

Storefront

NewTemplateCommerce

A complete one-page shop for Oriel, a fictional ceramics and home-goods studio: every product drawn in SVG and repainted live by colourway, a category mega-menu and instant search, a filterable grid that re-flows, quick view with size and quantity, a cart drawer with free-shipping progress and promo codes, and a three-step demo checkout ending in an order confirmation.

Get this template

A self-contained Next.js project. One-time purchase, lifetime updates for this template, source yours to deploy.

$39

One-time payment in USD, plus tax where applicable.

Or get every template with Lifetime

By continuing you agree to the Terms and the License. You ask for access to the digital content straight away and acknowledge that you lose your 14-day right of withdrawal once you download or install a paid item; our Refund policy still applies.

Included with Lifetime ($149) — compare plans.

Live preview
Open

What is this?

A complete storefront on one page with real client-side shopping: browse, filter, quick-view, add to bag, apply a promo code and check out in three steps. Every product is drawn in SVG, so it ships with no images to license or replace.

Who is it for?

Makers, studios and small brands, and the developers who build for them, who want a shop that feels crafted and premium, ready to connect to Shopify, Stripe or any headless commerce backend.

What you get

Everything needed to make it yours.

Products that repaint

Each product is an SVG still life; picking a colourway repaints it live in the grid, the quick view and the bag.

Shopping that works

Filters by category, colour, price and stock re-flow the grid; quick view handles size and quantity; the bag tracks everything.

Cart drawer

Quantity steppers, a free-shipping progress bar, a working promo code, a suggested add-on and a running total.

Three-step checkout

Contact and shipping, delivery options and a clearly marked demo payment step, ending in an order confirmation.

A real design kit

theme.css holds every color and type role for light and dark, and 16 reusable components cover cards, prices, swatches and forms.

Color with meaning

Warm neutrals throughout, with cobalt reserved for buying actions, so the path to checkout is always the most visible thing.

Sections

  • Design kit: theme.css with light and dark color roles + type scale
  • 16 reusable components (product card, price, swatches, cart line…)
  • Announcement bar and navigation with mega-menu
  • Instant search
  • Hero with drawn still life
  • Category tiles
  • Shop grid with filters
  • Quick view
  • Cart drawer with promo codes
  • Three-step checkout
  • Reviews with rating histogram
  • Newsletter and footer

Stack

Next.jsReact 19Tailwind CSS 4Motion

39 source files · GetUrUI components bundled

motion, lucide-react, clsx, tailwind-merge

More templates