Skip to main content
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>.
Veja como criar e usar componentes Vue em Tecnologias → Vue.js.

​
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.
Saiba como interpretar os logs em Erros.

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