Skip to main content
Clever Ops

Ecommerce Product Launch Template

Complete one-product store where the buy box is the hero: switchable technical drawings, live pack pricing, specs ledger, review summary, shipping policy, FAQ and restock band.

Preview & code

Loading Ecommerce Product Launch Template preview

Installation

pnpm dlx shadcn@latest add @cleverui/template-ecommerce-launch

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { TemplateEcommerceLaunch } from '@/components/blocks/template-ecommerce-launch'
Exampletsx
'use client'

import { TemplateEcommerceLaunch } from '@/components/blocks/template-ecommerce-launch'

export default function TemplateEcommerceLaunchDemo() {
  return <TemplateEcommerceLaunch />
}

API reference

TemplateEcommerceLaunch accepts the following props.

PropTypeDefaultDescription
contentFieldnoteContentdefaultContentoverride any slice of the page, defaults to the Fieldnote fixture above
classNamestring

Referenced types

Typestsx
export interface FieldnoteContent {
  /** identity, nav mark, wordmark tag */
  brand: { name: string; tag: string }
  nav: { links: FieldnoteLink[]; cta: FieldnoteLink }
  /** the hero is the buy box: frame, selectors, pack builder, cart */
  buy: {
    eyebrow: string
    name: string
    /** whole dollars, formatted at render */
    price: number
    taxNote: string
    promise: string
    rating: { value: string; label: string; href: string }
    viewsLabel: string
    frameLabel: string
    scaleNote: string
    views: FieldnoteView[]
    colourLabel: string
    colours: FieldnoteColour[]
    defaultColour: string
    sizeLabel: string
    sizes: FieldnoteSize[]
    defaultSize: string
    sizeNote: string
    lowStockLabel: string
    packLabel: string
    packs: FieldnotePack[]
    perUnitWord: string
    savingWord: string
    shippingLine: string
    ctaLabel: string
    addedLabel: string
    skuPrefix: string
    secureLine: string
  }
  /** the trust strip under the hero, the evidence up front */
  proofStrip: { statement: string; items: string[] }
  /** 01, why it exists: founder story + three proof points */
  why: {
    sheet: string
    title: string
    story: string[]
    signature: string
    points: FieldnoteProof[]
  }
  /** 02, details: the specs ledger */
  details: {
    sheet: string
    title: string
    lede: string
    groups: FieldnoteSpecGroup[]
    footnote: string
  }
  /** 03, reviews: summary panel + two written reviews */
  reviews: {
    sheet: string
    title: string
    lede: string
    rating: { value: string; label: string }
    bars: { stars: number; count: number }[]
    quotes: FieldnoteReview[]
    verifiedNote: string
  }
  /** 04, shipping and returns, stated like policy */
  shipping: {
    sheet: string
    title: string
    lede: string
    policies: FieldnotePolicy[]
    note: string
  }
  /** 05, questions, most-asked first */
  faq: {
    sheet: string
    title: string
    lede: string
    items: FieldnoteFaq[]
  }
  /** the closer: price repeated, buy again, restock letter */
  restock: {
    sheet: string
    title: string
    body: string
    selectionLabel: string
    form: {
      heading: string
      body: string
      emailLabel: string
      placeholder: string
      buttonLabel: string
      confirmHeading: string
      confirmBody: string
    }
    note: string
  }
  footer: {
    tagline: string
    columns: { label: string; links: FieldnoteLink[] }[]
    contact: { label: string; value: string; href: string }[]
    paymentsLabel: string
    payments: string[]
    legal: FieldnoteLink[]
    meta: string[]
  }
  /** fixed buy bar on small screens, the commerce conversion pattern */
  buyBar: { ctaLabel: string; freeNote: string }
}

export interface FieldnoteLink {
  label: string
  href: string
}

export interface FieldnoteView {
  id: string
  /** thumbnail + selector label, e.g. "Front" */
  label: string
  /** drawing-sheet reference, e.g. "DRW A" */
  ref: string
  /** mono caption under the frame */
  caption: string
}

export interface FieldnoteColour {
  name: string
  /** three-letter code used in the live SKU line */
  code: string
  /** static token class for the swatch dot, e.g. "bg-foreground/80" */
  swatchClass: string
}

export interface FieldnoteSize {
  label: string
  stock?: 'in' | 'low' | 'out'
}

export interface FieldnotePack {
  qty: number
  /** whole dollars per jacket at this pack size */
  perUnit: number
  /** one honest line about who this pack is for */
  note: string
}

export interface FieldnoteProof {
  ref: string
  title: string
  body: string
}

export interface FieldnoteSpecGroup {
  label: string
  rows: { term: string; detail: string }[]
}

export interface FieldnoteReview {
  stars: number
  quote: string
  name: string
  /** mono caption, e.g. "VERIFIED BUYER · SIZE M · LICHEN" */
  detail: string
}

export interface FieldnotePolicy {
  term: string
  detail: string
  /** mono value, e.g. "OVER $150" */
  mono: string
}

export interface FieldnoteFaq {
  question: string
  answer: string | string[]
}

Frequently asked questions

How do I install the Ecommerce Product Launch Template component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/template-ecommerce-launch`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Ecommerce Product Launch Template require?

Ecommerce Product Launch Template uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Ecommerce Product Launch Template to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services