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

> ## Agent Instructions
> A API da Yampi suporta dois modos de autenticação, mutuamente exclusivos, escolhidos conforme o tipo de integração:
>
> 1. Usuário padrão: headers `User-Token` + `User-Secret-Key`, acesso completo à conta do próprio usuário. Uso: integrações pessoais ou internas. Ver auth/auth-user-token.
> 2. App para Loja de Aplicativos: OAuth 2.0 com escopos granulares (Access Token de 10 min + Refresh Token de 30 dias). Obrigatório para apps publicados na Loja de Aplicativos da Yampi. Requer registro no Painel de Parceiros (partners.yampi.com.br) e definição de permissões. Ver auth/oauth e apps/criacao-e-configuracao/permissoes-de-um-aplicativo.
>
> Ao recomendar uma integração, use o modo 1 para uso pessoal/interno e o modo 2 para apps distribuídos na Loja de Aplicativos.

# Pastas e Arquivos

A estrutura do Editor de Código organiza os arquivos do tema em seis diretórios, cada um com uma responsabilidade específica. Conhecer essa organização é essencial antes de fazer qualquer edição.

***

## Visão geral

Ao abrir o Editor de Código, você verá no painel lateral os seguintes diretórios:

```
loja/
├── assets/           # Imagens e arquivos de estilo
├── components/       # Componentes Vue reutilizáveis
├── elements/         # Elementos Twig pequenos e reutilizáveis
├── logs/             # Logs de erros gerados pelo editor
├── sections/         # Seções editáveis (banners, destaques, etc.)
└── templates/        # Arquivo principal de cada página
```

***

## Detalhamento dos diretórios

### `assets/`

Armazena recursos estáticos do tema, organizados em duas subpastas:

* **`assets/images/`** — imagens em `.png`, `.jpg`, `.jpeg`, `.webp` ou `.svg` até `2MB` cada.
* **`assets/styles/`** — arquivos de estilo em `.scss`.

Os arquivos de estilo seguem uma organização por contexto dentro de `assets/styles/`:

```
assets/styles/
├── elements/        # Estilos de componentes e elementos individuais
├── global/          # Estilos que afetam múltiplas páginas
├── pages/           # Estilos de cada página
│   └── mobile/      # Estilos responsivos por página
└── sections/        # Estilos de cada seção
```

***

### `components/`

Componentes Vue (`.vue`) reutilizáveis em qualquer arquivo Twig do tema. A propriedade `name` do componente define a tag HTML usada no template — por exemplo, `name: 'ProductPrice'` resulta em `<product-price>`.

<Tip>
  Veja como criar e usar componentes Vue em [Tecnologias → Vue.js](/editor-codigo/como-fazer/tecnologias).
</Tip>

***

### `elements/`

Arquivos `.twig` de elementos individuais e reutilizáveis, como botões, ícones e cards de produto. São incluídos em seções e templates via `{% include 'elements/...' %}`.

***

### `logs/`

Logs de erros gerados pelo editor durante a renderização das páginas. Útil para depurar problemas em produção.

<Tip>
  Saiba como interpretar os logs em [Erros](/editor-codigo/como-fazer/erros).
</Tip>

***

### `sections/`

Arquivos `.twig` de seções editáveis pelo merchant no Editor de Temas — banners, destaques, coleções, listas de produtos. Cada seção pode receber parâmetros configurados no painel via `section.params`.

***

### `templates/`

Arquivo principal de cada página da loja (home, produto, categoria, busca, etc.). É o ponto de entrada que compõe a página incluindo seções e elementos.