Coming SoonCustom template functionality is planned for a future release. The underlying creative design library infrastructure is in place.
Custom Templates Overview
Custom templates allow you to:
- Save successful landing page designs for reuse
- Create organization-specific templates
- Maintain brand consistency across experiences
- Speed up landing page creation
Template Architecture
The template system is built on the creative design library:
Creative Design Library
├── Global Templates (Fanfare-provided)
├── Organization Templates (your custom templates)
└── Page Instances (individual landing pages)
How Templates Work
Template (reusable)
↓
Clone
↓
Landing Page (instance)
↓
Customize
↓
Publish
Creating Custom Templates (Coming Soon)
From Existing Page
- Open a published landing page
- Click Save as Template
- Enter template name and description
- Choose visibility (personal/organization)
- Save template
From Scratch
- Create new landing page
- Design your template
- Save as template before adding experience-specific content
- Use placeholders for dynamic content
Template Properties
| Property | Description |
|---|
| Name | Template identifier |
| Description | Use case and contents |
| Thumbnail | Preview image |
| Category | Organization category |
| Tags | Searchable tags |
| Visibility | Personal or organization-wide |
Template Content
Static Content
Content that remains the same across uses:
- Brand logo placement
- Standard header/footer
- Legal disclaimers
- Social links
Placeholder Content
Content to be replaced per-use:
- Headlines (marked as editable)
- Product images
- Feature descriptions
- Dates and times
Dynamic Bindings
Content that updates automatically:
- Experience name
- Experience dates
- Countdown to start
- Current status
Managing Templates
Organization Template Library
View and manage your organization’s templates:
┌─────────────────────────────────────────────────────────┐
│ Organization Templates │
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ [Thumbnail] │ │ [Thumbnail] │ │ [Thumbnail] │ │
│ │ │ │ │ │ │ │
│ │ Product │ │ VIP Event │ │ Holiday │ │
│ │ Launch │ │ Template │ │ Sale │ │
│ │ │ │ │ │ │ │
│ │ 12 uses │ │ 5 uses │ │ 3 uses │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ + Create Template │
│ │
└─────────────────────────────────────────────────────────┘
Template Actions
| Action | Description |
|---|
| Edit | Modify template design |
| Duplicate | Create copy for variations |
| Delete | Remove (doesn’t affect existing pages) |
| Share | Share with team members |
| Export | Download template JSON |
Template Versioning
Track template changes over time:
| Version | Date | Changes |
|---|
| v3 | Mar 15, 2024 | Updated hero section |
| v2 | Feb 1, 2024 | Added FAQ section |
| v1 | Jan 10, 2024 | Initial creation |
Template Categories
Organize templates by category:
| Category | Example Templates |
|---|
| Product Launches | Standard drop, Premium drop, Flash sale |
| Events | Ticket release, Virtual event, In-store |
| Campaigns | Holiday, Seasonal, Partnership |
| Waitlists | Pre-launch, Beta signup, Interest |
Sharing Templates
Within Organization
All organization templates are available to team members with appropriate permissions.
Template Permissions
| Role | Capabilities |
|---|
| Admin | Create, edit, delete all templates |
| Editor | Create personal, edit own, use all |
| Viewer | Use templates only |
Exporting Templates
Export templates for backup or sharing:
// Export template as JSON
const templateExport = {
name: "Product Launch Template",
version: "1.0.0",
creativeDocument: {
schemaVersion: 1,
kind: "landing-page",
editor: "section-builder",
body: {
// Template sections
},
},
metadata: {
description: "Standard product launch template",
tags: ["product", "launch", "queue"],
},
};
Importing Templates
Import templates from JSON:
// Import endpoint (coming soon)
await adminApi.templates.import({
template: templateJson,
organizationId: "org_...",
});
Template Best Practices
Design for Reuse
| Do | Don’t |
|---|
| Use placeholder content | Include specific product names |
| Apply brand theme | Hard-code colors |
| Include common sections | Over-customize for one use |
| Document template purpose | Leave unnamed |
Placeholder Strategy
Use clear placeholders that are easy to identify:
[PRODUCT NAME]
[HERO IMAGE]
[LAUNCH DATE]
[FEATURE 1 TITLE]
[FEATURE 1 DESCRIPTION]
Section Library
Build templates from reusable sections:
- Create section variations (Hero A, Hero B, Hero C)
- Document each variation’s use case
- Combine sections into full templates
- Test across different content
Template Inheritance
Future capability: Template inheritance
Base Template (brand standards)
↓
Product Template (extends base)
↓
Sneaker Drop Template (extends product)
↓
Landing Page Instance
Current Workarounds
Manual Template Creation
Save template designs as JSON files:
# Export current page design
# Copy from editor output drawer
# Save to templates/product-launch.json
Page Duplication
Duplicate existing pages for new experiences:
- Create a “template” experience with landing page
- Clone the experience for each new launch
- Customize the cloned landing page
Design System Documentation
Maintain a design system document:
# Brand Landing Page Standards
## Hero Section
- Headline: 48px, bold, primary color
- Subheadline: 18px, regular, muted color
- CTA: Primary button, "Join Queue" default
## Features Section
- 3-column layout
- Icon + Title + Description
- Consistent spacing: 32px gap
## Color Usage
- Hero background: Brand gradient
- Section backgrounds: Alternate white/gray
- CTAs: Primary color
Template API (Coming Soon)
Programmatic template management:
// List organization templates
const templates = await adminApi.templates.list({
organizationId: "org_...",
category: "product-launch",
});
// Create template from page
const template = await adminApi.templates.createFromPage({
landingPageId: "lp_...",
name: "Summer Drop Template",
description: "Template for summer product releases",
});
// Create page from template
const page = await adminApi.landingPages.createFromTemplate({
templateId: "tpl_...",
experienceId: "exp_...",
slug: "summer-2024",
});
Next Steps
