> ## Documentation Index
> Fetch the complete documentation index at: https://realsite.ca/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Build your first section

> From blank file to an owner-editable section — the whole loop, start to finish.

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.

<Frame caption="The code editor: every template in the theme, yours to edit.">
  <img src="https://mintcdn.com/real-site/s4exEG1TejF3mwoD/images/admin-code-editor.png?fit=max&auto=format&n=s4exEG1TejF3mwoD&q=85&s=4e290c7f3d27084c64b5c5cc45329b1d" alt="The REALsite code editor showing a theme's files" width="1440" height="1000" data-path="images/admin-code-editor.png" />
</Frame>

Create `sections/neighbourhood-spotlight.liquid`:

```liquid theme={null}
<section class="section">
  <div class="shell">
    <div class="section-head">
      <p class="section-label">{{ section.settings.label }}</p>
      <div class="section-rule"></div>
    </div>

    <h2>{{ section.settings.heading }}</h2>
    <p>{{ section.settings.pitch }}</p>

    {% if section.settings.area_slug != blank %}
      <a class="button" href="/areas/{{ section.settings.area_slug }}">
        Explore the neighbourhood
      </a>
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "Neighbourhood spotlight",
  "settings": [
    { "id": "label", "type": "text", "label": "Small label",
      "default": "The neighbourhood" },
    { "id": "heading", "type": "text", "label": "Heading",
      "default": "Why everyone asks about Wolseley" },
    { "id": "pitch", "type": "textarea", "label": "Your pitch",
      "note": "What you'd tell a buyer over coffee." },
    { "id": "area_slug", "type": "text", "label": "Area guide slug",
      "placeholder": "wolseley",
      "note": "Optional — links the button to /areas/<slug>." }
  ]
}
{% endschema %}
```

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:

<Frame caption="The schema becomes the settings panel — each setting id is a field.">
  <img src="https://mintcdn.com/real-site/s4exEG1TejF3mwoD/images/admin-design-section-settings.png?fit=max&auto=format&n=s4exEG1TejF3mwoD&q=85&s=f3099af67c42c2082008ab46ad1940de" alt="The Design editor with a section selected and its settings panel open" width="1440" height="1000" data-path="images/admin-design-section-settings.png" />
</Frame>

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](/docs/developers/sections#blocks-a-real-example).

## 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.