# What Is Editable In Sanity

## What Is Editable In Sanity

**Files:** `sanity.config.ts`, `sanity/`, `src/config/config.toml` · **Skill level:** Beginner

Run `npm run dev:all`, open the Studio at `http://localhost:3333`, and log in with your Sanity account. **Content** has one entry per language, then **Site settings**. [Sanity](/margo/features/sanity/) has the full guide, including `npm run setup` for your first project. Everything below exists in English, French, and Arabic, and each language has its own documents.

Without a Sanity project, the site runs from the bundled demo content, and you can try the theme with `npm run dev` before you set anything up.

### Where Each Page Is Edited
All locations are under Content, then your language. The last column lists the rows you can add under **Sections on this page**, such as **Hero Section** or **CTA Section**. Each row changes one section for this page only, and a field you leave empty keeps the section's own content.

| Address | Studio location | **Sections on this page** rows |
| ------- | --------------- | ------------------------------ |
| `/` | **Homepages > Home 1: Solo designer** | Hero, Projects, Services, Stats, About, Pricing, Logos, Testimonials, FAQ, Journal. The list also offers Quote, but this page doesn't show a quote section |
| `/home-studio/` | **Homepages > Home 2: Studio** | Hero, Logos, Projects, Quote, Services, Steps, Stats, Team Grid, Testimonials, Journal, CTA |
| `/home-photo/` | **Homepages > Home 3: Photographer** | Hero, Quote, Gallery, Projects, Pricing, Logos, Testimonials, CTA |
| `/about/` | **Main pages > About page** | Page Header, About, Stats, Services, Testimonials, Logos, CTA |
| `/contact/` | **Main pages > Contact page** | Page Header, Contact, FAQ |
| `/faq/` | **Main pages > FAQ page** | Page Header, FAQ |
| `/pricing/` | **Main pages > Pricing page** | Page Header, Pricing, FAQ |
| `/testimonials/` | **Main pages > Testimonials page** | Page Header, Testimonials, Stats, CTA |
| `/projects/` | **Main pages > Projects page** | Page Header, Projects, Logos, CTA |
| `/projects/{slug}/` | **Projects**, one document per project | **Quote** only. The page blocks are the project's **Images** field, and its template is **Options > Layout** (`default`, `gallery`, or `split`) |
| `/services/` | **Main pages > Services page** | Page Header, Services, Steps, FAQ, and **Detail**, the shared texts of every service page |
| `/services/{slug}/` | **Services**, one document per service | **Price** only. **Duration**, **Deliverables**, **Tools**, **Process**, **FAQ**, and **Related** are fields of the service |
| `/blog/` | **Main pages > Journal page** | Page Header, Blog List, Newsletter |
| `/blog/{slug}/` | **Journal posts**, one document per post | None |
| `/blog/category/...`, `/blog/tag/...`, `/blog/page/...` | Made from **Journal posts** | None |
| `/team/` | **Main pages > Team page**, and **Team members** | Page Header, Team Grid, CTA |
| `/team/{slug}/` | **Team members**, one document per member | None |
| `/archive/`, `/elements/`, `/components/`, legal pages | **Other pages**, one document per page | The same list for every page: Page Header, Projects, CTA, Content Page, Layout Gallery. Use the ones that page shows |
| 404 | **Sections > Not found section**, and **Interface labels** | None |

Each document's page fields sit with its other fields. **Meta Description** is on most pages, **Meta Title** on some, and **Draft** on most documents (not the homepages). **Header Layout**, **Footer Layout**, and **Contact Dock** are fields only on **Home 2: Studio** and **Home 3: Photographer**. The site-wide header and footer layouts are in **Site settings > Settings > Layout**. **Robots**, **Exclude From Sitemap**, **Exclude From Search**, and **Exclude From AI** are only on **Other pages**.

Body text works like a document editor. It also holds the theme's components as blocks: buttons, callouts, notices, steps, tabs, code tabs, file trees, accordions, cards, image lists, testimonials, and videos. **Keyboard key** is a text mark.

### New Entries
Use the **+** button in **Authors**, **Journal posts**, **Other pages**, **Projects**, **Services**, and **Team members**. The header menu doesn't pick up a new project or service, so add its link in **Menus**. See [Menus](/margo/customization/menus/).

A new entry with only a title won't break the site, and it builds. Its card or page shows what you filled in, and images and other fields stay empty until you add them, so fill them in before you publish.

### Sections
Each section is one document per language, under **Sections**. Open it and edit its fields. Every page that shows it uses this content, unless the page changes it under **Sections on this page**.

| Section | Where it appears |
| ------- | ---------------- |
| **About section** | `/`, `/about/` |
| **Blog list section** | `/blog/`, its pages, and category and tag pages |
| **Contact section** | `/contact/` |
| **Cookie consent** | The cookie banner on every page |
| **CTA section** | Above the footer on most pages. Not on `/`, `/contact/`, the journal lists, `/elements/`, or 404 |
| **Experience section** | The experience rows inside the About section |
| **FAQ section** | `/`, `/contact/`, `/faq/`, `/pricing/`, `/services/`, service pages |
| **Footer** | Every page: the wordmark, columns, email, and AI blocks of the three footer layouts. Its links come from **Menus** |
| **Gallery section** | `/home-photo/`, project pages |
| **Hero section** | The three homepages |
| **Journal section** | `/`, `/home-studio/` |
| **Logos section** | The three homepages, `/about/`, `/projects/`, project pages |
| **Newsletter section** | `/blog/` |
| **Next project section** | Project pages |
| **Not found section** | 404 pages |
| **Pricing section** | `/`, `/home-photo/`, `/pricing/` |
| **Projects section** | The three homepages, `/projects/`, `/archive/`, service pages |
| **Quote section** | `/home-studio/`, `/home-photo/`, project pages |
| **Related posts section** | Under each journal post |
| **Services section** | `/`, `/home-studio/`, `/about/`, `/services/` |
| **Stats section** | `/`, `/home-studio/`, `/about/`, `/testimonials/`, project pages |
| **Steps section** | `/home-studio/`, `/services/`, service pages |
| **Team grid section** | `/home-studio/`, `/team/`, team member pages |
| **Testimonials section** | The three homepages, `/about/`, `/testimonials/` |
| **Tools section** | The tool tiles in the Services section and on service pages |

To hide a section, use its **Enable** field. To change its look, use **Options > Layout**, on the section or on a page's row. `/elements/` previews every layout. The hero and the CTA also have **Options > Webgl** (`dots`, `flow`, or `none`) for an animated background.

### Site-Wide Content
| Location | What's in it |
| -------- | ------------ |
| **Menus** | **Header menu** and **Footer menu**. Each language has its own. See [Menus](/margo/customization/menus/) |
| **Interface labels** | Buttons, labels, form messages, and other interface text, in groups. **Site** holds the tagline and description of that language, and **AI > Site Summary** the summary in `llms.txt`. Each language has its own |
| **Site settings** | One for the whole site, below the languages: **Site**, **SEO**, **Settings**, **Opengraph**, **Head** for analytics tags, and **Social** |

**Settings** holds the header and footer layouts (**Layout**), **Color Mode**, **Search**, **Smooth Scroll**, **Animation**, **Cookie Consent**, **Theme Credit**, **Page Actions**, **Contact Dock**, **Contact Info**, **Navigation Button**, **Copyright**, **Subscription**, **Contact Form Action**, and **Contact Form Provider**.

**Site settings** apply when the site builds. While `npm run dev:all` runs, they apply when you publish them, and the page reloads. They don't change as you type, and click-to-edit doesn't reach them, so change them in their form. Click-to-edit also doesn't reach option values, links, classes, icon names, or images set as a CSS background.

### The Menus Document
In **Header menu**, turn on **Has a dropdown** and add **Dropdown items** for a dropdown. A dropdown item with its own items opens a flyout, as deep as you need. Turn on **Is a mega menu** for a mega menu, then add **Mega menu columns**, a **Mega menu card**, and a **Mega menu bottom bar**:

- In the card, **Project** is the file name of a project, such as `ceramic-forms`. Empty uses the first featured project.
- In the bottom bar, each of the **Quick links** can have an **Action**: `search` turns it into the site search button, and **Key hint** is shown beside it.

Some fields do nothing in Margo. They are kept so the menus have the same shape as in other themes:

- **Order** doesn't move an item. Items show in the order of the list, so drag them to reorder.
- **Icon** on mega menu links doesn't show. No menu link has an icon.
- **Description** and **Items** on the card don't show. The card shows the project's cover, title, and year.

Turn off **Show** to hide an item without deleting it. **Footer menu** is in the same document: each column has a **Column heading** and its **Column links**.

### Numbers In Arabic Text
Body text has a **Left to right** mark, next to **Strong** and **Emphasis** in the editor's toolbar. Select a number with its unit inside Arabic text, such as -3 °C, and apply the mark, so it keeps its order.

### Plans And Attributes
At the time of writing, Sanity's free plan allows 2,000 attributes, one for each distinct field path in your content. Margo's demo content, with its images, measured 1,367 in our test project, read from Sanity's own count after importing it and using Live preview. It fits, with 633 left. You can see your own number in Sanity's project settings, under Usage.

Translating into another language uses none of it, and neither does adding more posts, projects, or pages. Live preview adds a few, and so does cropping images. New fields in the schema add more. [Sanity's pricing page](https://www.sanity.io/pricing) has the current limits.

### Online Preview
Click-to-edit and draft preview work on your own computer, with `npm run dev:all`. To use them online, your editors need a second copy of the site running as a small **Node.js server**, because drafts can't be shown from static files. A static host can't do this, and Netlify and Vercel functions aren't supported. See [Sanity](/margo/features/sanity/) for the steps. Without a preview server, editors online can still edit in the Studio's forms and publish.

### What We Tested
**On this theme:** the site built from the bundled demo content, checked page by page against the Astro edition in the three languages, the demo content imported into a real Sanity project and the site built from it, editing in Live preview in English and Arabic, and the Studio schema checked with `npm run sanity:validate`.

**Not tested on this theme:**

- `npm run setup` all the way through.
- Any online host, a deployed Studio, a preview server online, or a webhook from end to end.

Try these on your own project before you rely on them.

### What Stays In Code
These change how the site is built, not what it says:

- The page routes and the order of sections on a page: `src/pages/[...lang]/`.
- Section and component design, colors, type scale, and fonts.
- The list of languages: `src/config/language.json`.
- Favicons, the language settings, the collection folder names, and the layout switcher in `config.toml`.
- The list of sections and layouts shown on `/elements/`. Its labels and notes are editable.
- The AI crawler lists. The on and off switches are in **Site settings**.
- Which sections and fields exist. To add one, see `SKILLS.md`.

### Do It With AI
```text
I use the Sanity edition of Margo. Tell me where to edit [TEXT OR SETTING] in the Studio: the
language entry, the document, and the field. If it comes from a section document, say which pages
will change, and how to change it on one page only. Don't change any files, and don't print
anything from .env.
```