Make it yours.

Swish is built with native Framer styles, components and CMS. Here is where everything lives, so you can rebrand it in an afternoon.

01

Colors

Parquet is the page background, Ink is for text, borders and panels, Cream is text on ink and Accent is for buttons, totals and selected states. Change Accent once and the whole site follows.

The City map, Booking module and FAQ board read these same color styles, so they follow your changes automatically.

Assets → Colors

02

Fonts

Text styles are grouped in Display (Big Shoulders), Body (Barlow) and Mono (JetBrains Mono). Swap the font inside a style and every text using it updates, on every breakpoint.

Assets → Text styles

03

Header and footer

The header, the floor texture and the footer live in the Main layout template, shared by every page. The burger menu is a variant of the Header component.

Nav and footer links scroll to section anchors on Home: #cities, #book, #runs, #coaching, #pricing and #faq. If you rename or delete a section, update its link.

Assets → Layout templates → Main

04

Sections

Each section of Home is one frame. Reorder, hide or duplicate them in the Layers panel. Spacing is set on the section itself, so a moved section keeps its rhythm.

Home → Layers

05

Images

Select a photo and replace its fill: Hero → Photo, the Leagues banner and the Gallery strip. Court photos come from the CMS and from the code component properties.

Select the image → Fill

06

CMS

Open runs, Court types and Coaching are CMS collections. Add, edit or reorder items there and the lists on Home update by themselves. Court types feeds the three court tiles in order, so keep exactly three items.

CMS → Open runs, Court types, Coaching

07

Interactive components

City map: cities, stats, blurb, photo and map position (X and Y in percent). Booking module: cities, court names, court types with rate and photo. FAQ board: questions, answers and the contact link. Each one also has Display, Body and Mono font fields: if you change fonts in your text styles, type the same family names there. Cities live in both the City map and the Booking module, so update both when you add or rename one. The City and Day fields in the hero are real dropdowns: they read the cities from the Booking module and update it when a visitor picks a value.

The “Book in” button of the City map scrolls to the Booking module and selects that city. Test interactions in Preview, the canvas does not run them.

Select the component → right panel

08

Hero height

The withViewportHeight override makes the hero fill the screen minus the header. Remove it to go back to a fixed height.

Hero → Code overrides

09

Contact email

Swish ships without a contact email, so nothing points to a fake address. Add yours in three places. Footer: in the Main layout template, show the hidden email text, type your address and link it to mailto:you@yourdomain.com. Privacy and Terms: show the hidden Questions label and email in the summary panel. FAQ board: set the Contact link in the right panel, and the contact line appears as soon as a link is set.

Main → Footer · Privacy · Terms · FAQ board

10

Pages

Besides Home, Swish ships Courts, About and Contact, plus two CMS detail pages: every open run gets its own page at /runs/slug and every coaching program at /coaching/slug. The Join buttons and program cards link there on their own. Coaching has four fields for those pages: Overview, Schedule, Group size and Includes (separate items with ·). Open runs uses About for the page intro.

Pages → Run, Program

11

Contact form

The Contact page uses a native Framer form with Name, Email, Topic and Message. It has no destination yet: select the form, open Send To in the right panel and pick email, a webhook or Google Sheets. Edit the topics in the options of the Topic field.

Contact → Form → Send To

12

Before you publish

Connect the newsletter form and the contact form to a destination (select each form, then Send To in the right panel) so messages reach your inbox or tool. Replace the legal pages with your own text and set the SEO title, description, social image and favicon. Delete this Guide and the Style guide when you are done.

Site settings