Page Templates
Templates are ready-made looks for your Flo page. Each one sets your background, font, button colors, button shape, hover style, and spacing together so you do not have to tune every control from scratch.
You choose a template in the builder Page tab under Templates. The phone preview updates as soon as you click a swatch. When you are happy, click Save appearance, then Publish or Update live so fans see it at https://myflo.link/yourname.
For fonts, buttons, layout, and SEO beyond templates, see Themes and fonts. For publish steps, see Publishing.
Open Templates in the builder
Open the builder
Dashboard → Builder on a desktop browser (wide screen recommended).
Switch to Page
In the right sidebar, click Page. Deselect any block if the Block tab is still active.
Expand Templates
Open the Templates section at the top of the Page tab. It opens by default when you first land on Page.
Click a template swatch
Pick one of the square previews. A purple checkmark shows the active template. The center canvas updates immediately.
Save and go live
Scroll down and click Save appearance (toast: Appearance saved). Then Publish or Update live in the top bar.
Preview vs live page
The builder canvas shows your template choice right away. Fans only see it after Save appearance and a published page — Publishing.
What a template changes
One click updates all of these page-wide settings:
| Setting | What the template sets |
|---|---|
| Page background | Solid color or smooth gradient behind your blocks |
| Font | Main typeface for block titles and body text on the page |
| Button color | Default fill or accent for Join, Buy, Subscribe, Book, and similar CTAs |
| Button text color | Label color on those buttons |
| Button shape | Rounded or Pill corners (templates use one or the other) |
| Button fill | Usually Solid; Shadow Splash uses a softer Soft fill |
| Hover animation | Lift on hover on most templates; Neon Grape uses Pulse |
| Block spacing | Vertical gap between blocks — all templates start at Normal |
| Page width | Content column width on large screens — all templates start at Default (480px) |
Templates replace several settings at once
Switching templates overwrites background, font, button colors, button style, animation, and spacing. If you had custom tweaks under Typography or Buttons, open those sections again after you change templates.
What templates do not change
| Item | Where you edit it |
|---|---|
| Block text, offers, and order | Block tab and canvas — auto-saves on a delay |
| Profile photo, bio, and socials | Edit profile header on the canvas |
| Page title and meta description | Page tab → SEO |
| Public vs Unlisted | Settings → Page & domain — Your Flo page |
| Per-block button or color overrides | That block’s Edit window (unchanged unless you change them) |
| Cover banner on the profile header | Edit profile header — not tied to templates |
No separate background picker yet
Page background is set by the template you pick. The Page tab does not include a standalone color or gradient picker today — choose another template for a new backdrop, then fine-tune Typography and Buttons below.
All 10 templates
Flo includes 10 built-in templates. Swatches are arranged in a 3-column grid with the name under each preview.
Dark and moody
Best when you want a link-in-bio that feels cinematic, premium, or night-mode. Block cards stay dark with light text.
| Template | Look and feel | Font | Buttons |
|---|---|---|---|
| Classic | Flo’s default — deep purple-black canvas, purple CTA | Inter | Rounded, solid, lift on hover |
| Dark | Near-black background, high contrast | Inter | White buttons, black text, lift on hover |
| Midnight Hues | Purple-to-blue gradient backdrop | Inter | Violet buttons, white text |
| Cyan Chic | Cool teal-to-slate gradient | DM Sans | Cyan buttons, dark text |
| Neon Grape | Deep purple canvas, subtle violet card tint | Space Grotesk | Violet buttons, pulse on hover |
| Shadow Splash | Navy gradient, dramatic depth | Inter | Coral-red soft-fill buttons, white text |
Bright and bold
Best for warm, playful, or daytime brands. Flo detects a bright background and switches block cards to a light style — white cards and dark text so offers stay readable.
| Template | Look and feel | Font | Buttons |
|---|---|---|---|
| Peach Punch | Bold solid orange page | Nunito | Pill-shaped coral-orange buttons, white text |
| Apricot Sorbet | Soft peach gradient | Nunito | Orange pill buttons, white text |
| Lime Light | Fresh mint-green gradient | Poppins | Green rounded buttons, white text |
| Blueish | Soft sky-blue gradient | Plus Jakarta Sans | Blue rounded buttons, white text |
Light block cards on bright pages
Peach Punch, Apricot Sorbet, Lime Light, and Blueish use bright backgrounds. Flo automatically shows white block cards with dark text on those pages. Darker templates keep the classic dark card look.
Choose a template for your brand
| If your brand feels… | Good starting points |
|---|---|
| Professional / default | Classic or Dark |
| Luxury or editorial | Midnight Hues or Shadow Splash |
| Tech or creator | Neon Grape, Cyan Chic, or Classic |
| Warm and friendly | Peach Punch, Apricot Sorbet, or Lime Light |
| Calm and trustworthy | Blueish or Cyan Chic |
You can switch templates anytime. Treat the first pick as a starting point, then adjust Typography and Buttons until the preview matches your brand.
After you switch templates
Use this short checklist so nothing surprises you on the live page:
- Scan the canvas — Do blocks, the profile header, and buttons look readable together?
- Typography — Confirm the font still fits your voice (templates set font, but you can change it).
- Buttons — Check color, shape, fill, and hover — see Button styles.
- Layout (optional) — Templates leave Default width and Normal spacing; widen or tighten under Layout if you want.
- Save appearance — Required for Page tab changes.
- Update live — If the page is already published.
Profile header fonts
Name and bio can follow the page font or use their own choices in Edit profile header → Design. Changing a template does not reset a custom header font you already set — Profile header.
Fine-tune without changing template
After you pick a template, you can adjust individual pieces in the same Page tab:
| Section | What you can change |
|---|---|
| Typography | Any of Flo’s page fonts (sans-serif, serif, display, mono) |
| Buttons | Colors, shape, fill, hover animation — Button styles |
| Layout | Narrow, Default, or Wide page width; Compact through Spacious block spacing |
| SEO | Browser title and meta description — does not affect how the page looks |
Those tweaks stay even if you switch templates later — but remember a new template click will overwrite font and button defaults again.
Templates and A/B tests
Creator plan requiredOn Creator+, each A/B test variant can use its own page settings, including a different template. Set the template while that variant is focused on the canvas, Save appearance, then run or update the test — A/B tests in the builder.
When you promote a winner, the live page adopts that variant’s look — Promote winner.
Troubleshooting
| Issue | What to try |
|---|---|
| Template preview changed but live page did not | Click Save appearance, then Update live (or wait for auto-save on a live page, then refresh) |
| Switched template and lost custom button colors | Expected — re-set colors under Buttons, then Save appearance |
| Blocks hard to read on a bright template | Flo should use light cards automatically; if text still feels weak, increase button contrast under Buttons |
| Want a custom gradient not in the list | Pick the closest template, then adjust Buttons and Typography; custom backgrounds are not separate yet |
| Wrong template highlighted | Click the swatch again — the checkmark marks activeTemplateId in your saved settings |
| Only see 10 templates | Flo ships these built-in looks only — no upload-your-own template today |
Quick reference
- Page tab → Templates
- Click a swatch → preview updates
- Tweak Typography / Buttons if needed
- Save appearance
- Publish or Update live
What's next?
- Themes and fonts — full Page tab (typography, layout, SEO)
- Button styles — shape, fill, colors, checkout branding
- Publishing — draft, live, and Update live
- Profile header — photo, bio, cover, header fonts
- Page builder overview — builder tour
- Promote winner — end a test and set the live look