Checkout Editor

A WYSIWYG editor for your checkout’s visual design. Pick a template, set your accent colour and typography, tweak spacing and button radius, and write custom CSS if you need it. Live preview alongside the controls.

Templates

Five base templates:

Template	Vibe
Minimal	Clean, single-column, lots of whitespace. The Swft default.
Split	Two-column with the order summary fixed on the right.
Fullscreen	Maximalist — hero image, no order summary, full-width steps.
Centered	Narrow column centred on the page, like a Stripe Checkout.
Express	Strips everything non-essential. Wallet + email + pay, in that order.

Switching templates is reversible — your settings carry over.

Theme presets

Five preset colour systems:

• Paper — warm off-white background, dark ink text, lime accent. Default.
• Technical — pure white, gridded, monospace headings. Engineering-vibes.
• Warm — peachy background, deep brown text, terracotta accent.
• Electric — black background, neon accent. Dark mode.
• Custom — pick every colour individually.

Typography

Pick from 12 fonts grouped by family:

• Sans — Inter, IBM Plex Sans, Geist, DM Sans
• Serif — Playfair Display, Source Serif, Lora
• Display — Fraunces, Cabinet Grotesk
• Mono — JetBrains Mono, Geist Mono, IBM Plex Mono

Pick one for body, one for headings. Defaults are sensible — start with Inter on both unless you have brand reasons to diverge.

Spacing & shape

• Max width — how wide the checkout content column goes. 480px (narrow) to 1200px (wide). Default 720px.
• Base font size — 14 / 15 / 16 / 17 / 18 px. Default 16.
• Border radius — 0 (square) to 24px (very rounded). Default 8.
• Button radius — same range, separate from card radius. Default 8.

Express & enhancement toggles

In-line toggles for:

• Express Checkout — show Apple Pay / Google Pay above the form.
• Social Proof — show “X people viewing this checkout right now” / recent purchases.
• Inventory warnings — show “only 3 left in stock” when items are low.
• Referral prompt — show “Refer a friend, get £5” on the confirmation screen (Ambassadors).

Custom CSS

A textarea where you can paste arbitrary CSS. Loaded onto every checkout page, scoped to the checkout origin. Use the inspector in Chrome to find the right selectors.

Custom CSS is unsupported

We make best effort to keep stable class names, but if a Swft Checkout update breaks your custom CSS, that’s not a bug — it’s the cost of arbitrary CSS. Use sparingly.

Live preview

The right panel shows the checkout rendered with your current settings, using a sample cart. It updates as you change controls.

The preview is approximate — the actual checkout has a real cart, real shipping methods, real Stripe Elements. Some interactions don’t fire in the preview. Always test the real checkout before launching.

Saving

Changes save automatically every few seconds. There’s no “publish” button — once saved, every new session uses the new design.

If you want to test a design change against control traffic before rolling it to everyone, use A/B Testing.