> ## 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.
# Quickstart
> Build a theme, render it locally, and deploy it from GitHub.
A theme with one editable section, rendered locally and deployed to a store.
## Install the CLI
```bash theme={null}
cargo install slurp-compiler slurp-dev-server
```
This installs two binaries: `slurp` for build and validate, and `slurp-dev`
for the preview server.
```bash theme={null}
slurp --version
```
## Create the theme
```bash theme={null}
mkdir -p my-theme/site/{pages,layouts,sections,templates,css}
cd my-theme
```
`site/` is the theme root. The parent directory holds build tooling, which
is not published.
`site/theme.json` identifies the directory as a ByteSell theme.
```json site/theme.json theme={null}
{
"name": "My Theme",
"description": "A starter storefront.",
"author": "Your Name",
"category": "storefront",
"schema": 2,
"builder": "full"
}
```
`schema: 2` enables theme-level blocks and `@theme` targeting. `builder`
selects the merchant's editing surface; `full` is the default.
Pages share this shell. Script and stylesheet URLs come from `platform`
rather than literal paths.
```slurp site/layouts/base.slurp theme={null}
${ storefront.name }
```
Do not hardcode those script URLs. They are versioned by the platform, and
a literal path is frozen at the version it names. See
[Platform assets](/themes/reference/platform).
The `section { }` frontmatter becomes a form in the builder.
```slurp site/sections/Hero.slurp theme={null}
---
section {
name: "Hero"
max_per_page: 1
settings {
heading: text = "Welcome"
subtitle: text = "Digital goods, delivered instantly."
accent: color = "#6366f1"
}
}
---
${ section.settings.heading }
${ section.settings.subtitle }
```
`data-bs-edit` makes an element editable in place. Its value is the settings
key written back to.
A page places `{sections}` without naming which sections go there. The
merchant controls that, starting from the defaults in the next file.
```slurp site/pages/index.slurp theme={null}
{layout "@layouts/base"}
{sections}
{/layout}
```
An element form, ``, also exists. Prefer the
block form. The element form builds its node with no head slot, so a
`{head}` block inside it renders in the body, where those tags have no
effect.
`templates/index.json` supplies the content a store starts with when the
theme is installed. Its filename matches the page.
```json site/templates/index.json theme={null}
{
"sections": [
{
"id": "hero",
"type": "Hero",
"settings": { "heading": "My store" }
}
]
}
```
`type` matches `sections/Hero.slurp`. Omitted settings fall back to the
schema defaults.
```css site/css/theme.css theme={null}
body { font-family: Inter, system-ui, sans-serif; margin: 0; }
section { padding: 4rem 1.5rem; }
h1 { font-size: 2.5rem; margin: 0 0 .5rem; }
```
`base.slurp` links this file, so it must be present in the bundle.
Publishing rejects a theme whose linked stylesheet is missing. Most themes
generate it with Tailwind and commit the output.
## Render it
`slurp build` has no store to query, so the platform URLs are supplied
directly:
```json dev-globals.json theme={null}
{
"platform": {
"sdk": "http://localhost:5004/_bs/r/2/sdk.js",
"cart": "http://localhost:5004/_bs/r/2/cart.js",
"alpine": "http://localhost:5004/_bs/r/2/alpine.js",
"fonts_css": "http://localhost:5004/_bs/fonts.css"
},
"storefront": { "name": "Dev Store", "currency": "USD" }
}
```
```bash theme={null}
slurp build --input site --output dist --globals dev-globals.json
```
Without `--globals`, every `${ platform.* }` resolves to nothing and the page
renders `