Skip to main content
We’ll build a Neighbourhood spotlight — a section an owner can drop on any page to feature one area in their own words, with a button to its area guide. It exercises every core concept: settings, conditionals, site data, and the editor loop.

​
1. Create the file

Open Design → Code (the </> next to the Design title). Editing a stock theme detaches your own copy first — the original stays untouched, and History can always take you back.
The REALsite code editor showing a theme's files

The code editor: every template in the theme, yours to edit.

Create sections/neighbourhood-spotlight.liquid:
Two files, one idea: the Liquid above the schema renders; the schema below declares what the owner can change. section.settings.<id> connects them.

​
2. See it in Design

Save, open Design, click + Add section — “Neighbourhood spotlight” is in the list, and selecting it opens the settings panel your schema just described:
The Design editor with a section selected and its settings panel open

The schema becomes the settings panel — each setting id is a field.

The preview on the right is the real storefront rendering your real Liquid — what the owner sees is what visitors get.

​
3. Make it feel native

Steal the theme’s own vocabulary. The wrapper classes above (section, shell, section-head, section-label, section-rule, button) are Northlight’s — using the host theme’s classes means your section inherits its typography, spacing, and colour scheme with zero CSS of your own. Add custom styles to assets/theme.css only when the vocabulary runs out.

​
4. Level up: blocks

Want the owner to add repeatable items — quotes, FAQs, stats? Declare blocks in the schema and loop section.blocks. The platform’s Testimonials section is a complete working example — see Sections & schema.

​
The loop you just learned

Code in Design → Code → schema becomes UI in Design → owner edits settings → your Liquid renders them. That’s the whole theme engine; every section on every REALsite theme is this same loop.