From remix link to a website that sells your homes

Larchwood is a website for a residential development: buildings, levels, homes, plans, prices, availability, payments and visits. This guide takes you from your remix link to a live site for your own project. You do not need to write code.

Framer in 5 minutes

Get your copy

1. Log in to Framer, or create a free account.
2. Open your remix link from the order confirmation page or email.
3. Choose a workspace if Framer asks. The whole template is copied into your account.
4. Rename the project to your development's name (project menu, top left).

Your first afternoon

1. Your price list in Google Sheets, then paste its link in the settings script. 30 to 60 minutes. Buildings, levels, homes, prices and availability appear everywhere at once.
2. Colours and fonts, 10 minutes.
3. Floor plans and home plans: export them as pictures from your architect's drawings, 20 minutes.
4. Visit requests: one free key, 5 minutes.
5. Name, menu and footer, then page texts and photos, page by page.
6. Your banks in the mortgage calculator.
7. SEO, legal pages, the checklist, and publish.

The settings script

Four things are set once for the whole site, in one place: your colours, your fonts, your price list and your form key.

1. Open Settings > Code.
2. Click Larchwood settings (edit me).
3. Change the values you need. Keep the quotes and the semicolons.
4. Click Save, then Publish.

<style>
:root {
--lw-dark: #1F2E27;      /* dark sections, buttons */
--lw-page: #ECEEEA;      /* page background */
...
--lw-serif: "Larch Serif", Georgia, serif;
--lw-sans: "Larch Sans", system-ui, sans-serif;
}
</style>
<script>
window.LARCHWOOD = {
priceListCsv: "",        /* your price list link */
web3formsKey: ""         /* your form key */
}
</script>

Colours and fonts

Every section reads its colours and fonts from the settings script, so one change restyles the whole site.

Using your own fonts

1. Add the font to the project: select any text on the canvas, open the font list and pick it (Google and Fontshare fonts are built in), or upload your own under Assets > Fonts.
2. Write its exact name in the settings script, with a fallback: --lw-serif: "Playfair Display", Georgia, serif;
3. Publish and check the live site.

Name, header and footer

Header and Footer are on every page. Change them on each page where you need to, or change one and copy it (Cmd+C, Cmd+V) over the others.

• Header: logo text, menu links, availability text, main button and the photo behind the phone menu. Turn on Always solid on pages without a photo at the top.
• Footer: name, sales office address, hours, phone, email, links, documents (PDF brochure, price list) and legal links. Documents without a file or link are hidden automatically.
• Links are plain text: /contact for a page of your site, or a full https:// address.

Pages and sections

Every section is independent. To remove one, select it and press Delete. To add one, copy it from another page and paste it where you want it. To reorder, drag it in the Layers panel.

Photos

Select a section and replace each photo in its properties. Use renders or photos of your own project, landscape, at least 2400 px wide for full-screen sections.

• Light Hero: two photos of the same view, for example morning and evening. They swap with a curtain effect.
• Pull Back: a close photo (a balcony) and a wide one (the whole project). The page zooms from one to the other.
• Build Diary: one photo per site visit, ideally always from the same spot.

The price list

All homes come from one Google Sheet. Update a price or mark a home as sold in the sheet, and the site follows within a few minutes. No CMS, no re-publishing.

Columns

First row = column names, in any order. One row per home.

Connect it

1. In Google Sheets: File > Share > Publish to web.
2. Choose your sheet and Comma-separated values (.csv), then Publish.
3. Copy the link and paste it in the settings script as priceListCsv: "https://docs.google.com/…".
4. Save, Publish, and open the live site.

Live counts in texts

In the Header availability text and in Statement sections you can write these words in curly brackets. They are replaced with live numbers from the price list.

Example: {available} homes still available.

Apartment Finder

Two ways to find a home. On the building: masterplan photo, then a building, then a level, then a home. By what you need: filters for rooms, facing, level, budget and size. Favourites, compare (up to 3), share links and a VAT switch are built in.

Properties

• Masterplan photo and Building photo: any render of the whole project and of one building.
• Buildings (optional): rename a building or give it its own photo. Buildings themselves come from the price list.
• Level plans and Home plans: see plans.
• Level names: "Ground floor", "Floor {n}", and an optional name for the top level.
• Currency, VAT %, whether your prices include VAT, and the VAT switch.
• Home page link (/home?unit={code}) and Enquiry link (/contact?unit={code}).

Links can open the finder in a given state: /residences?building=B, ?building=B&floor=3, ?unit=B-3.06, ?mode=needs&rooms=3.

Floor plans and home plans

Plans are pictures, so they fit any building shape. Export them from your architect's drawings as PNG or JPG, on a white background.

Level plans

In the Apartment Finder, Level plans > add an item: Building, Level number, Plan picture. Leave Building or Level empty to use one picture for many:

The most specific match wins. A level without any plan shows only the list of homes.

Home plans

Home plans > add an item: Match and Plan picture. Match can be the plan column value (e.g. T6), the type (e.g. Penthouse) or the number of rooms (e.g. 2). A home looks for its plan code first, then its type, then its rooms. Or put a link in the price list's image column.

A page for every home

The page /home shows any home from the price list: /home?unit=B-3.06. There is nothing to create per home. It has the plan, price with and without VAT, price per m², facts, buttons to book a visit and calculate payments, a printable sheet, and similar homes still available.

In the editor it shows the home in Preview home, because the editor has no ?unit= in the link.

Home types

A sideways strip of layouts (Studio, Two rooms, …). Each card has a photo, a name, a size range and a Match: a number of rooms, or penthouse. The "from" price and the number of homes left are read live from the price list.

Mortgage calculator

On /payment-plans. Opened with ?unit=CODE it starts from that home's price.

Banks

Programs (e.g. first-home schemes): name, minimum down payment, how much lower the rate is, maximum years, and a note. Developer stages: percent and when; they should add up to 100%.

The APR includes interest, fees and insurance: it is the yearly rate at which the money received (loan minus fees at signing) equals everything paid back. Equal or declining instalments can be switched on.

Payment stages

The developer's plan as big percentage steps (e.g. 10% on signing, 30% on handover). If the steps do not add up to 100%, a red note appears in the editor only.

Parking and storage

Parking Picker (page /parking): one card per kind (parking space, EV space, storage room…), with photo, price, how many in total and how many are left. "Ask for one" opens the contact page with that item filled in. Update the "Left" numbers when you sell.

Construction progress

• Progress Status: one bar per building or phase, with the stage and percent done. The big number is the average. Set "Updated" and "Handover".
• Build Diary: one entry per site visit with date, stage, one line and a photo. Visitors drag through time.

Location and map

Places (on /location and /contact): write your address exactly as in Google Maps; the map needs no key. Groups (Everyday, Schools, Getting around…) each list places, one per line, as Name | time. "Directions" opens Google Maps to your address.

Visit requests by email

Visit forms send requests to your inbox through Web3Forms, free for up to 250 requests a month at the time of writing.

1. Go to web3forms.com, enter the email that should receive requests, and copy the Access Key they send you.
2. Paste it in the settings script: web3formsKey: "your-key". Save and Publish.
3. Send a test request from the live site and check your inbox (and spam).

When a visitor comes from a home (?unit=B-3.06), the form fills in that home by itself. Without a key the form shows a demo message and sends nothing.

Framer's AI agent

Larchwood includes instructions for Framer's built-in agent (Settings > Skills > default). When you ask the agent to add a section or change a page, it knows how the template works: sections, the price list, plans, live counts and the style rules. Write your requests in plain words, for example "Add a FAQ section about parking to the Location page".

SEO and Google

1. Settings > General: site title, description, favicon and social image.
2. Settings > Pages: a title and description for each page.
3. After publishing on your domain, add it to Google Search Console and submit /sitemap.xml.

Legal pages

/privacy, /cookies and /terms contain sample text only. Replace it with the text from your lawyer (Legal Text section: title, date, sections). If you add analytics or tracking, you may need a cookie banner; Framer offers one in Settings.

Publish on your own domain

1. Choose a Framer site plan for the project (needed for a custom domain and to remove the Framer badge).
2. Settings > Domains > add your domain and follow the DNS steps for your registrar.
3. Publish. The site is live on your domain once DNS updates (minutes to a few hours).

Launch checklist

• Price list connected; prices, statuses and VAT checked on the live site.
• Level plans and home plans for every layout.
• Colours and fonts set; text easy to read.
• Visit form tested: the request reached your inbox.
• Your banks in the mortgage calculator, with the small print.
• Header, footer, address, phone and email are yours.
• Every photo is of your project, with Alt text.
• Demo texts replaced on every page (search for "Larchwood", "lake", "forest").
• Legal pages replaced.
• Site and page titles, descriptions and social image.
• Checked on a phone.

Troubleshooting

The site still shows the demo homes

Check that the price list link is between the quotes in the settings script, that the sheet is published as CSV (not as a web page), and that you published the site. Remember the editor canvas always shows demo homes.

A home is missing

Every row needs a code. Check that the column names in the first row are spelled as in the table above.

A plan does not show

Check the Match value: it must equal the plan code, the type or the number of rooms exactly (capital letters do not matter).

The form says "Demo"

The Web3Forms key is missing from the settings script, or the site was not published after adding it.

My colours did not change

Colours from the settings script show on the published site and in Preview, not on the editor canvas. Check that each line ends with a semicolon.

Support, licence and updates

Support

Email fiddweb@gmail.com. We answer within 48 hours on working days. Tell us which page and which device, and add a screenshot if you can. We help with everything in the template. For Framer itself (account, billing, domains) Framer's own support is faster.

Licence

One purchase covers one website, for yourself or for one client. You may change the template freely. You may not resell, share or redistribute the template or the remix link, alone or as part of another template.

Updates

Updates are free. When we improve Larchwood, we email you. A remix is a copy, so your project does not change by itself: to use an update, open the remix link again and copy the parts you want into your project.