Theme

Directors can change how the public website looks. Open Organization > Publishing and select Theme editor under 3. Design your website.

The theme editor needs a laptop or desktop screen. It shows each file beside a live preview, filled with sample listings, which you can switch between desktop and mobile widths.

Starter themes

Choose one of the eight starter themes from the Theme list: Harbour, Monochrome, Coastal, Noir, Terracotta, Concrete, Metro, or Heritage. Use the theme as it is, or as the starting point for your own design.

Theme files

A theme has three files, each on its own tab:

• Listings: the template for the website’s home page, which lists your published listings.
• Listing: the template for a single listing’s page.
• Styles: the CSS for both pages.

Template syntax

Templates use Mustache:

• {{name}} inserts a value, escaped so that it displays as text.
• {{#listings}}…{{/listings}} repeats its content for each listing. With a single value, such as {{#organization.avatar}}…{{/organization.avatar}}, it shows its content only when the value is present.
• {{^listings}}…{{/listings}} shows its content only when there are no listings, or when a value is empty.
• Dotted names, such as {{organization.name}} or {{branch.email}}, read a value inside another value.

Listings template values

• organization: name, email, phone (for tel: links), phone_for_humans (the phone number formatted for display), country, and avatar (your logo’s URL, when uploaded).
• listings: each with url, title, type, city, region, price, summary, bedrooms, bathrooms, reception_rooms, and photo. Each page shows up to 12 listings.
• paginator: current_page, next_url, and previous_url.
• year: the current year, for example in a copyright line.

Listing template values

• organization, as above.
• branch: the listing’s branch, with name, email, phone (for tel: links), phone_for_humans (the phone number formatted for display), and its address as line_1, line_2, city, region, and post_code.
• listing: title, type, price, rental, city, region, reference, bedrooms, bathrooms, reception_rooms, plot_size, covered_area, unit, description (a short summary), content (the full description with any visible custom fields), agent (name and avatar), photos_count, and photos, each with caption, floor_plan, large, small, number (its position, from 1), id (such as photo-1), and previous and next (the id of the neighbouring photos, wrapping round at either end). Use id, previous, and next as link targets to build a gallery without scripts.
• listings_url: the link back to the listings page.
• year: the current year.

Web fonts

To use a web font, add a CSS @import at the top of the Styles file, for example @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');.

Limits

Each file can be up to 100 KB. The website cannot run scripts, so build interactive features with HTML and CSS alone. AvaroAI manages each page’s head, including its title, description, and sharing and search tags, so templates hold only the page content. The Styles file cannot contain </style.

Templates cannot use triple braces such as {{{name}}} or {{& name}}, pragmas such as {{%FILTERS}}, delimiter changes such as {{=<% %>=}}, or a loop over listings or photos inside another such loop.

Each template can have up to 5,000 parts, where every tag, every piece of text between tags, and every line counts as one part. If a page’s content is larger than 2 MB once your listings fill it in, the website shows an error page instead of that page.

Publish your changes

Select Publish to apply your changes. They are live straight away, with no draft step or history, so keep a copy of any version you may want again.

Once you edit a starter’s files, the Theme list shows Custom. To return to a starter, choose it and publish it without changes.