R07Get them doing the thing
Pro

Template to custom path

Give the visitor a finished starting point, show the result it produces, then show exactly what changes when they make it theirs.

Back to page recipes

Section sequence

6sections, in the order the visitor meets them. Bar height is the section's weight in the page.

  1. OrientStarting-point promise
  2. NavigateTemplate gallery
  3. DemonstrateResult preview
  4. DemonstrateCustomization step
  5. NavigateUse-case filter
  6. ConvertStart from this template

How the page argues

  1. 1

    Promise a starting point, not a blank page.

  2. 2

    Show the gallery early, sorted by the job the visitor came for.

  3. 3

    Preview the finished result of one template at real fidelity.

  4. 4

    Show the customization step: what is editable, and how far it goes.

  5. 5

    Let a use-case filter narrow the gallery when it grows past one screen.

  6. 6

    Start from the chosen template with one action.

What each section has to be

OrientStarting-point promise
One line that trades the blank canvas for a head start, naming what arrives pre-built.
NavigateTemplate gallery
Real thumbnails of real templates, labelled by job. Sorted so the common case is first, not alphabetically.
DemonstrateResult preview
One template shown as a finished, working artifact — not a wireframe of what it could become.
DemonstrateCustomization step
What the visitor can change: content, structure, tokens, logic. Shown as an edit, not described.
NavigateUse-case filter
Filters by job, industry or size, appearing only when the gallery outgrows a single screen.
ConvertStart from this template
Per-template action that opens a working copy, plus a from-scratch route for the confident.

Is this the right sequence?

Who it is for

Visitors who want the outcome today and will happily start from someone else's structure to get it.

Products it suits

Configurable products with recognizable common starting states, where a blank canvas is the real drop-off point.

Not for

Products where a template hides the need for expert setup, and the visitor would ship something wrong.

Evidence strategy

Which proof modes carry the page, in the order they land.

  1. Primary: finished templates — visible proof that good output already exists here.
  2. Secondary: the customization step, which proves the template is a start and not a ceiling.
  3. Tertiary: use-case coverage, which proves one of these is close to the visitor's own case.

CTA plan

What the page asks for, what it offers instead, and where.

Primary
Start from this template
Secondary
Filter by use case, or start from scratch
Placement
An action on every template card; the from-scratch route sits beside the gallery, not above it.

Responsive behavior

What the sequence has to do when the viewport stops cooperating.

  • The gallery goes from a multi-column grid to a two-column grid, keeping the template label visible without hover.
  • The result preview becomes a scaled static frame with a tap-to-open, not a pinch-zoom iframe.
  • The use-case filter collapses into a chip row with the active filter first.

Anti-patterns

The failure modes that make this sequence stop working.

  • Template thumbnails that are illustrations instead of the actual output.
  • A gallery with no editing story, which sells a one-off rather than a product.
  • Alphabetical ordering that buries the template ninety per cent of visitors need.
  • Templates that require a paid plan without saying so on the card.

Build spec

Pro

What an agent needs in order to build Template to custom path: what each section must contain, the copy rule that keeps it honest, the slots to resolve from your product, and the order to build in.

Checking access to the build spec

Agent tags

The vocabulary an agent matches this recipe on.

  • template-gallery
  • result-preview
  • customization-step
  • use-case-filter
  • head-start-entry