Template guide
Everything you need to run Perch
How the CMS, the map and the filters fit together, and what to change before you publish. No code needed.
7
CMS collections
4
Code components
3
Breakpoints
Pro
Framer plan
01
Start here
Five steps from the demo to your own directory. Pages are built from the CMS, so you mostly fill in content.
1
Make it yours
Swap the logo, then change colors and fonts once in the project styles. Every page follows.
Assets › Styles
2
Add your cities
One item per city, with its time zone. Each city gets its own page and a spot in the City filter.
CMS › Cities
3
Add your places
One item per place. The map, the open status and the filters read these fields, so follow the rules in section 03.
CMS › Places
4
Curate
Group places into Lists and write Guides. Both pick their places from the CMS, so there is nothing to lay out.
CMS › Lists, Guides
5
Publish
Go through the checklist in section 08, then connect your domain.
Site settings
02
The CMS
Seven collections. Places is the center: the other six describe a place or group several of them.
Places
54 in the demo
One item per place, 24 fields. Each item gets its page at /places/name-of-the-place.
Points to
City
→
Cities
one
Type
→
Types
one
Perks
→
Perks
several
Checked by
→
Team
one
Cities
8 items
Country, cover, time zone and the city sponsor.
/cities/:slug
Types
4 items
Cafés, coworking, libraries, hotel lobbies. Each one is a tab on Explore.
/types/:slug
Perks
6 items
Each perk becomes a filter button.
No page
Lists
6 items
Hand-picked places with a short intro.
/lists/:slug
Guides
6 items
Articles, with the places they mention on a map.
/guides/:slug
Team
4 items
The editors who check places and sign lists and guides.
No page
CSV
Adding a lot at once? Import one CSV per collection in this order: Team, Types, Perks, Cities, Places, Lists, Guides. A reference can only point to an item that already exists.
03
Adding a place
Every card on the site is drawn from the same fields. Here is where each one shows up.
1
Cover
Image, 4:3. Also used in the map popup and when the page is shared.
2
Open status
Hours, read in the time zone of the place’s City.
3
Featured
Toggle. Adds the badge and the green outline, and moves the place to the top.
4
Name and Wi-Fi speed
Wi-Fi speed is a number in Mbps. It is also the label on the pin.
5
Type and Neighborhood
The card shows the Singular field of the Type: Café, not Cafés.
6
Outlets and Noise
Option fields, one choice each.
Not on the card: Coordinates.
A hidden Map pin inside the card reads them to put the place on the map.
Field rules
Hours
Places
Days, then times on a 24-hour clock, rules separated by commas. A missing day is a closed day.
Mon-Fri 08:00-19:00, Sat 09:00-17:00, Sun closed
Mon-Fri 08:00-12:00 & 14:00-19:00
lunch break
Thu-Sat 18:00-02:00
past midnight
Mon-Sun 24h
never closes
Coordinates
Places
Right-click the place in Google Maps and click the numbers at the top: they are copied. Paste them as they are, latitude first.
38.7167, -9.1500
Time zone
Cities
Set once per city, as a time zone name. Open status works out the local time from it, daylight saving included.
Europe/Lisbon
America/Mexico_City
Asia/Tokyo
Perks
Places
Tick Fast Wi-Fi from 100 Mbps, Quiet when Noise is Silent or Quiet, Plenty of outlets when Outlets is every seat or plenty. Keep 6 to 8 perks in total.
Fast Wi-Fi, Quiet, Plenty of outlets
Slug
All
Unique in its collection. Two places with the same name: add the city. Changing the slug of a published page breaks links people already shared.
estufa-lisbon
Images
All
Cover in 4:3, at least 1600 px wide, with no text on it. Three to six Photos per place. Team photos are square.
Cover 1600 × 1200
Photo 400 × 400
Team
04
Code components
Four components do what Framer can’t do alone. You set them up from the right panel, like any other layer. Everything else on the site is native.
Map
Explore, City, List, Guide, Place
Shows every place card on the page as a pin, with clusters, a popup and Search as I move the map.
Display: Inline or Button
Places: All on page or One place
Popup: Card, Compact or None
Area search
Cooperative
Legend
Map pin
Inside Place card
Invisible on the page. Tells the map where the place is and what to show in its popup.
Coordinates
Label
Featured
Name
Image
Type
Area
Open status
Place card, Place page
Open · until 19:00, or the opening day when it is closed. On the place page it shows the whole week.
Hours
Time zone
Style: Pill or Plain
Clock: 24h or 12h
Week view
Open now toggle
Explore, City
Hides closed places from the list and the map. Clear all turns it off.
Clear all layer
Open now empty layer
Labels
The one rule
Keep the layer name “Place card”
The map, the pins, Open status and Open now find each place through the outermost layer called Place card. Rename it and hovering a card stops lighting up its pin, and hidden cards leave holes in the grid.
Collection List
Place card
keep
Photo
Body
Map pin
05
Filters and links
The filters on Explore are Framer’s own. Add a city, a type or a perk to the CMS and it appears in the filters by itself.
Search
Search Field
Name
City
Dropdown
City. Also read from the link, see below.
Type
Tabs
Type
Perks
Toggles
Perks. Several toggles combine: Fast Wi-Fi and Quiet keeps places with both.
Open now
Open now toggle
Hours and City › Time zone
Clear all
Reset variables
Every filter above
Link to a filtered view
Add the city slug to the Explore link to open it already filtered. Handy for menus, emails and posts.
/explore?city=
lisbon
City and type pages
Every city and type gets its own page with its places and map. Nothing to build: add the item and publish.
/cities/
lisbon
06
Selling listings
Owners pay on /get-featured. You switch their listing on in the CMS once the payment arrives.
Featured
Featured listing
Turn Featured on for the place. It gets the badge, the green outline, a dark pin and a spot at the top of every list.
Where
CMS › Places › Featured
City sponsor
City sponsor
Turn Sponsored on for the city and fill in the sponsor’s name, logo and link. The banner appears on the city page.
Where
CMS › Cities › Sponsored, Sponsor name, logo, link
Payment
Stripe Payment Links
Create one Payment Link per plan in Stripe and paste it on the plan’s button. Send buyers back to /thanks after paying.
Where
/get-featured › plan buttons
07
Colors and fonts
Change a color or text style once in Assets and every page follows. Start with Brand/Accent: it is the Perch green.
Brand/Accent
Open dots, buttons, pins
Brand/Accent Soft
Badges and soft panels
Brand/Accent Line
Featured outline
Text/Accent
Green text, Open now
Background/Inverse
Dark panels, Featured pins
Background/Page
Page background
Fonts
Perch uses Geist in every text style: Heading, Body, Label and Article. Swap the font in each style, then in the Font control of the four code components.
Code components keep their own colors
Framer styles don’t reach inside them. After changing the green, update the color controls of Map, Map pin, Open status and Open now toggle.
08
Before you publish
The demo ships with placeholders. Replace these and the site is yours.
Remove the template promo
The Get Perch badge in the layout and the green Template notes on the home page.
Link the plan buttons
Paste your Stripe Payment Links on /get-featured.
Choose where forms go
Submit a place, Contact and the newsletter: email or webhook.
Replace the demo sponsor
Bramble Works on Lisbon links to example.com.
Use your own photos and team
The demo photos come from Unsplash, the editors are made up.
Fill in the site SEO
Title, description, favicon and social image in Site settings.
Keep the map credit
The small © OpenStreetMap link on the map is required.
Connect your domain
Needs a Framer Pro plan or higher.
Credits
Map tiles
OpenFreeMap
Map data
© OpenStreetMap contributors
Map library
MapLibre GL JS, BSD license
Font
Geist, SIL Open Font License
Demo photos
Unsplash, Unsplash License
Get Perch
$119