Buyer’s guide
How this site works, and how to make it yours.
Written for the person who just bought the template. Read the status system first; it is the part that is different.
Start here
What you bought, in one paragraph.
This template is a working brokerage site, not a layout. Every list on it reads from the CMS, every colour comes from a token, and one dropdown per property rewrites its page. The demo brokerage, Aiguelonde, is fictional: the towns, the agents and the houses were invented and verified against real registries so they collide with nobody. Replace them with yours and nothing else needs to move.
Three kinds of business buy this. A luxury brokerage or boutique agency uses it as it stands. A property developer hides the Agents collection and turns the eight properties into units or phases. An architecture or interior studio renames Properties to Projects and uses the status system to show what is in design, on site and complete.
Aiguelonde is a fictional brokerage. Its towns, agents, houses and contact details were invented for this template and verified against real registries so they collide with nobody; replace every word of it with your own.
The status system
One dropdown rewrites the page.
Each property has a Status: Coming Soon, Available, Under Offer or Sold. Nothing else on the record changes when you change it, but the page does. The badge on every card recolours. On the property page the price shows or hides, the banner appears with your Status Note, the Sold stamp lands on the photograph, the floor plan appears or disappears, and the whole closing section swaps between a viewing form, a register-interest form and a rail of similar houses in the same neighbourhood.
There is no code behind this. Each element binds its visibility to the Status option through a conversion, which is why it survives any redesign you make on the canvas. Duplicate a card and the behaviour comes with it.
Blue badge. Gallery capped at three photographs. Price shows what you type, so type Price on request. Floor plan hidden. Closing section asks to be told before it lists.
Olive badge. Everything shown. Closing section is the viewing form.
Amber badge and banner carrying the Status Note. Everything else as Available. Closing section asks what they liked, for the next one.
Grey badge, stamp over the photograph, price hidden, form removed, replaced by available houses in the same neighbourhood.
The collections
Seven collections, and what each one feeds.
Properties is the heart, with thirty fields including reference, tagline, description, gallery, floor plan image and PDF, virtual tour link, open house date and note, features, neighbourhood and agent. Neighborhoods hold a hero, a gallery, a rich text of highlights and a map link. Agents hold a portrait, a bio, contact lines and languages. Journal is a plain editorial collection with a category option. Testimonials link back to the property they are about. Features are the tags with a Lucide icon name each.
Settings is one record. Brand name, tagline, phone, phone link, email, address, map, social links, the marquee string, the notice bar text and its on-off switch, the hero posters and the hero video, meta title and description, the two page intros and the closing image. Every one of those is read somewhere on the site, so nothing in Settings is decoration.
Open houses
A calendar you run by typing in one field.
Put a date in a property’s Open House Date and three things happen: the property appears on the Open Houses page, it appears in the open house section of the Home page, and a bar pins under the navigation on its own page with an Add to calendar button that builds the calendar file from the text you typed. Clear the field and all three go away. There is no plugin and no calendar service.
Saving and comparing
Hearts, a badge and a table.
Every property card carries a save mark. Saving stores the house in the visitor’s browser only; there is no account and nothing leaves the device. The navigation shows a count, and the Compare page lays up to three saved houses side by side with price per square metre, best in row markers and a group viewing request that carries all three references to your contact form. It prints cleanly.
Filtering
Status, type, bedrooms, sort. Shareable.
The Properties page filters in place, without reloading. The chosen filters are written into the address, so a visitor can send a colleague the exact view they were looking at. On a phone the filters fold into a drawer above the list.
Colours and type
Eleven tokens, twelve text styles.
Every colour on the site is one of eleven tokens. Change accent and the badges, buttons, notice bar and band recolour together. The four status colours were measured against WCAG before they were used: each clears 4.5 to 1 as a badge fill under white text and as text on the page background. Body text measures 15 to 1.
Type is Fraunces for display and Instrument Sans for everything else, through named styles with sizes set at all three breakpoints. Edit a style and every use follows. The eyebrow, headline and one sentence rhythm at the top of each section is deliberate: hold it and the site keeps its register whatever you write.
Motion
Bounded, and it stays out of the way.
Hero photographs move against their scrim by a fixed fraction of the viewport, measured at 630, 900 and 1080 pixels tall and held under forty pixels of travel so no edge ever shows. Sections rise as they enter, once. Photographs settle from a slight zoom. Everything that moves respects the visitor’s reduced motion setting.
Three ways to use it
Brokerage, developer, studio.
A brokerage changes the words and the pictures and publishes. Keep the agent rail on the property page: it is the part visitors trust.
A developer selling one scheme deletes the Agents collection, retitles Properties as Residences or Plots, uses Coming Soon for phases not yet released and Under Offer for reservations, and lets the Sold rail do the work of a sales board.
A studio renames Properties to Projects, uses Type for the kind of work, treats Available as in progress and Sold as complete, and drops the price field from the card. The gallery, the plan and the neighbourhood teaser already describe a built project.
What we charge, in the demo
The copy behind the Sell page link.
The Sell page links here because a real brokerage publishes its fees. In the demo, Aiguelonde charges the seller and the buyer pays nothing, which is how the Price Note on each record reads. Write your own terms in this section and the link keeps working.
Before you publish
The eight things to change.
Brand name, contact details, the notice text, the marquee, both hero posters and the video, the meta fields, the closing image.
Your houses. Keep the field names; the pages are bound to them.
Replace or delete. Sections that read from an empty collection render nothing.
Change accent first, then the status colours if your brand needs them, checking contrast.
Swap the fonts inside the twelve styles rather than on the canvas.
Point the three forms at your inbox in the Framer form settings and set the redirect to the thank you page.
Set this page to noindex or delete it. It is written for you, not your visitors.
Custom domain, then a Lighthouse run on the Home and Properties pages; the demo scores are in the listing.