Booking widget
Add your online booking
Use the scheduling tool you already have. The Book page has an embed slot for it, and the request form below it stays as a backup.
01
Copy your booking link or code
In your shop software (Tekmetric, Shopmonkey or similar) or Calendly, find the online-booking page and copy its link or embed code.
02
Open the Book page
In Framer, open Book Service, select “Booking Embed Slot” and turn on the hidden “Booking Embed” layer inside it.
03
Paste it in
Choose URL for a link or HTML for embed code, paste it, then set the layer height so the whole widget fits (720px is a good start).
04
Remove the placeholder
Delete the “Placeholder” group, preview at desktop, tablet and phone sizes, and make one test booking.
Shop software widgets
Tekmetric, Shopmonkey and similar tools usually offer an online-booking link or embed code. Search your software’s help center for “online booking” or “appointment widget.”
Calendly or any link
Use the URL option for a Calendly page or any booking link. If your tool only gives you a link, you can also point the Book service buttons straight to it.
A calendar for each shop
Every shop in CMS › Locations has a Booking URL field. The “Book at this shop” button on each location page uses it, so each shop can have its own calendar.
Keep the request form
The request form under the slot is your backup. Connect it in Form settings (email or webhook), then edit the shop and service options to match yours.
No official integrations
This template doesn’t include or claim an official integration with any vendor. Widgets, availability and booking data come from your scheduling software.
Design system
Change colors and fonts once
Every color and text style is a shared style. Edit it in the Assets panel (Colors or Text Styles) and the change shows up on every page.
Key colors
Brand/Primary · #1F2326
Text, primary buttons, dark bands
Accent · #FFC21A
Book buttons, hazard stripe, highlights. Never as text on light backgrounds
Surface/Base · #F5F4EF
Page background
Surface/Raised · #FFFFFF
Cards, forms, alternate sections
Surface/Sunken · #ECE9E1
Quiet sections and notes
Text/Secondary · #585E62
Body copy and captions
Border · #D9D5CA
Card and input outlines
State/Critical · #C2321F
“Needs attention” items only
Fonts
Archivo ExtraBold
Headings: Display, H1–H4 and prices (with tabular figures)
Public Sans Regular
Body and interface: Paragraphs, buttons, navigation and forms
Geist Mono
Work-order labels: Eyebrows, badges, RO numbers and codes
To swap a font, open Assets › Text Styles, pick a style and change its font. Each style already has desktop, tablet and phone sizes.
Spacing and corners
Sections use 96 / 88 / 72 / 64px vertical padding (desktop, laptop, tablet, phone) inside a 1280px container. Cards have 14–16px corners; buttons and inputs 8–10px. Keep these when you add sections.
CMS
Edit your content in the CMS
Seven collections hold everything that repeats. Edit an item once and every page that lists it updates: Home, listings and detail pages.
Services
Feeds the service picker, Services page, Price Guide and each service page. Keep From price and Price note together, and switch on Featured to show a service on Home.
Makes
Plain-text make names; Origin drives the filter. Keep the generic logo slot unless you have permission to use a manufacturer’s logo.
Locations
Address, phone and its tel: link, hours, map link and a Booking URL for each shop. If you change hours, update the footer too.
Specials
Coupons with discount, code, expiry and fine print. Featured offers show on Home, and the first one prints in yellow.
Reviews
Use real reviews you have permission to publish. Link each one to a Service and a Location so it appears on those pages.
Posts
Car-care articles. Use H2/H3 headings and “✓” lines instead of bullet lists, which render in a fallback font. Set Author to a team member.
Team
Photo, role, years in the trade and credentials. List only credentials that are real and current.
Two-way links
Framer doesn’t sync reverse references. When you link a review to a service, also add it to that service’s Reviews field. The same goes for Makes and Services, Team and Locations, and Posts and Team.
Photos
Swap in your photos
Every image is a labeled placeholder. Replace it in the CMS or by selecting the frame, keep the ratio so crops stay clean, and write alt text that describes the photo.
Hero photo
4:5
1200 × 1500
Home hero
Service photo
4:3
1200 × 900
CMS › Services, service pages and cards
Shop exterior
3:2
1800 × 1200
CMS › Locations, location cards and pages
Team portrait
4:5
960 × 1200
CMS › Team, About and location pages
Article cover
16:9
1600 × 900
CMS › Posts, blog cards and articles
Fleet photo
3:2
1800 × 1200
Home fleet teaser and Fleet page
Shop interior
3:2
1800 × 1200
About page story
Inspection photo
1:1
800 × 800
Inspection Report card
Make logo slot
2:1
480 × 240
CMS › Makes (only logos you have permission to use)
Social share image
1.91:1
1200 × 630
Site settings › social image
Image tips
Export JPGs or WebP at the sizes above (Framer serves smaller versions automatically). Avoid photos with readable plates, faces you don’t have releases for, or manufacturer badges.
Before launch
Forms, hours and the fine print
Placeholders are labeled on every page. These are the ones to replace before your site goes live.
Connect your forms
Three forms are ready: booking request (/book), fleet quote (/fleet) and contact (/contact). Select each form, open Form settings and add an email, webhook or Google Sheets destination. Then send a test.
Hours and “Open now”
Hours live in CMS › Locations (full and short versions) and in the footer. An “Open now” badge isn’t included: add a small code component or an hours widget if you want one.
Financing (optional)
If you offer repair financing, link your provider from a button, or paste its embed code into an Embed layer on the Price Guide or Book page. No financing provider is included or endorsed.
Warranty and credentials
Replace the sample 24-month/24,000-mile warranty, the “ASE-certified (sample)” mentions and the 4.8 rating with your real written terms and numbers. Use certification logos only with permission.
Makes and trademarks
Make names describe the vehicles you service. Don’t add manufacturer logos or brand colors without permission, and keep the “not affiliated with any manufacturer” note.
Legal and consent
Privacy and Terms are samples. Replace them with your own, and update the consent wording on all three forms and the coupon fine print.
Last checks
Before you publish
A short pre-flight list. Work through it once, then you can unpublish or delete this guide.
01
Set every paginated CMS list to “Load more”: Services, Vehicles, Locations, Blog, Reviews, Specials and the related lists on detail pages.
02
Replace every “(sample)” label, phone number, address, email and price with your own.
03
Check each page’s SEO title and description in Page Settings. CMS pages fill theirs from the item’s fields.
04
Preview at 1440, 1200, 810 and 390px: the menu, accordions, filters, forms and the phone Call · Book bar.
05
Pages use the “Main” layout template, so their canvas height is fixed in the editor. The live page still grows with its content.
06
Unpublish or delete this Template Guide. It’s already hidden from search engines.