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

# Introduction

> Storefront themes, and what the platform provides.

A ByteSell theme is the storefront a buyer sees. It is a [Slurp](/slurp)
project: pages, components and layouts as `.slurp` files, compiled to plain HTML
on the server for every request.

A theme adds two things to a Slurp project:

<CardGroup cols={2}>
  <Card title="A manifest" icon="file-lines">
    `theme.json` at the theme root. It names the theme, carries its marketplace
    listing, and selects the editing surface merchants get.
  </Card>

  <Card title="Store data" icon="store">
    Every render receives the store config, the merchant's saved section content
    and the platform runtime URLs. No fetching or configuration is required.
  </Card>
</CardGroup>

## Slurp and ByteSell

Slurp is the language. ByteSell supplies the data and serves the result.

| Slurp                                                   | ByteSell                                   |
| ------------------------------------------------------- | ------------------------------------------ |
| `.slurp` syntax, filters, `{if}` / `{each}` / `{fetch}` | Route resolution                           |
| `section { }` and `block { }` schema grammar            | `templates/*.json` default content         |
| Setting kinds and value merging                         | The `storefront` object                    |
| Escaping, render budgets, iteration caps                | Publishing, versioning, bundle limits      |
| `{blocks}` and `@theme` targeting                       | The builder and its `data-bs-*` attributes |

The left column is documented in the [Slurp docs](/slurp) and behaves
identically outside ByteSell. This section covers the right column.

## Editable settings

A section declares a typed schema in its frontmatter. Those fields become form
controls in the builder, so a merchant can edit a heading, swap an image or
reorder a list without opening a template.

```slurp theme={"languages":{"custom":["/languages/slurp.json"]}}
---
section {
  name: "Hero"
  max_per_page: 1
  settings {
    heading: text = "Everything you need"
    accent:  color = "#6366f1"
    limit:   number = 8 { min: 1, max: 24 }
  }
}
---
<h1 data-bs-edit="heading">${ section.settings.heading }</h1>
```

A merchant can set only the values the schema declares. A value that fails its
kind's validation falls back to the default and never reaches the markup.
[Sections and blocks](/themes/sections) covers what ByteSell adds to the Slurp
grammar.

## Platform-owned surfaces

The platform provides these. A theme does not implement them.

| Surface         | Provided by                                                                                                                 |
| --------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Checkout        | The hosted pay page, served under the store's own origin. The theme's Checkout button stashes the cart and navigates.       |
| Auth            | Login, registration, 2FA, OAuth and the account area, against the store's auth app.                                         |
| Browser runtime | Alpine, the icon set, the SDK and the cart store. See [Platform assets](/themes/reference/platform).                        |
| SEO head tags   | Canonical, `og:*`, `twitter:*`, robots and JSON-LD, injected at the edge. The theme emits `<title>` and `meta description`. |
| Fonts           | `${ platform.fonts_css }`, served from the store's own origin.                                                              |

<Warning>
  A theme that emits its own `og:*` or `canonical` tags produces duplicates. The
  platform injects them into every page after the template renders.
</Warning>

## Next

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/themes/quickstart">
    Build a theme and deploy it to a store.
  </Card>

  <Card title="Project structure" icon="folder-tree" href="/themes/structure">
    The theme root and the published bundle.
  </Card>

  <Card title="Pages and routing" icon="signs-post" href="/themes/pages">
    Route resolution and special pages.
  </Card>

  <Card title="Publishing" icon="upload" href="/themes/publishing">
    Versioning and publish validation.
  </Card>
</CardGroup>