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

# Layout

> O arquivo layout/theme.jsx é obrigatório. O canvas do editor não monta esse componente.

Pasta: **`layout/`**

O validador exige o arquivo `layout/theme.jsx`. O `corvex build` não importa esse arquivo no `theme.js`. No canvas do editor, o componente não monta.

O scaffold exporta uma função com este formato. O validador não confere o nome do export.

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
// layout/theme.jsx
export function ThemeLayout({ children }) {
  return (
    <div className="my-theme-root">
      {children}
    </div>
  );
}
```

A classe `.my-theme-root` entra no canvas porque o nome contém `theme-root` e o CSS da loja a declara. Se a classe raiz não tiver `theme-root`, `theme-scope`, `store-root`, `shop-root` nem `layout-root`, declare-a em `editorPreviewRootClasses`. Sem isso, o canvas não recebe o visual do layout.

***

## O que vai no layout

| Item | Exemplo |
| - | - |
| Classe raiz | A mesma de `editorPreviewRootClasses` |
| Cabeçalho e rodapé | Seções em `layoutGroups`, não código fixo neste arquivo |

***

## O que não colocar no layout

* Lógica de uma página (produto, coleção)
* Seções que o lojista reordena. Isso fica no template e nos layout groups

***

## Veja também

* [Arquitetura do tema](https://docs-loja.usecorvex.com.br/themes/structure.md)
* [Templates](https://docs-loja.usecorvex.com.br/themes/templates.md)
* [Contrato do tema](https://docs-loja.usecorvex.com.br/reference/contracts/theme.md)


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