> ## 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.

# 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.