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

# Introdução

Sua loja, do seu jeito. O **Editor de Código** dá acesso completo ao código-fonte da sua loja — gerado pelo **Tema Rocket**, o tema oficial da Yampi, construído com Twig, Vue.js e SASS. Com ele, você vai além dos parâmetros visuais e edita diretamente templates, seções, componentes e estilos com controle total sobre cada detalhe da experiência de compra.

O Tema Rocket é a base de todas as lojas na Yampi. Entender sua estrutura é o primeiro passo para criar personalizações poderosas — de ajustes simples de layout até componentes Vue completamente novos.

## O que você pode personalizar

<CardGroup cols={3}>
  <Card title="Controle cada página" icon="file-code">
    Edite o HTML e Twig de qualquer template ou seção — da home ao carrinho — sem limitações.
  </Card>

  <Card title="Adicione interatividade" icon="puzzle-piece">
    Crie componentes Vue para carrinho, seleção de SKU, sliders e qualquer comportamento dinâmico.
  </Card>

  <Card title="Defina a identidade visual" icon="palette">
    Personalize cores, tipografia e espaçamentos com SASS e variáveis CSS que afetam o tema inteiro.
  </Card>
</CardGroup>

## Arquitetura do Editor

O editor é construído sobre três tecnologias que atuam em camadas distintas e complementares:

<CardGroup cols={3}>
  <Card title="Twig" icon="server">
    Renderiza páginas com dados reais. Acessa produtos, categorias e configurações da loja para montar o HTML de cada página antes de chegar ao navegador.
  </Card>

  <Card title="Vue.js" icon="bolt">
    Dá vida à sua loja. Componentes que rodam no navegador: carrinho, SKU, sliders — tudo que responde em tempo real ao cliente.
  </Card>

  <Card title="SASS / CSS" icon="palette">
    Estilo sem fronteiras. Variáveis CSS globais que controlam o visual de forma centralizada — mude o tema inteiro com poucas linhas.
  </Card>
</CardGroup>

## Por onde começar

<Steps>
  <Step title="Acesse o Editor de Código">
    No painel, navegue até **Loja Virtual → Temas** e clique em **Editar Código**. O botão aparece apenas para o tema instalado na loja.
  </Step>

  <Step title="Explore a estrutura de arquivos">
    Entenda para que serve cada diretório (`templates`, `sections`, `components`, `assets`...). Veja em [Pastas e Arquivos](/editor-codigo/estrutura/pastas-arquivos).
  </Step>

  <Step title="Faça sua primeira edição">
    Edite um arquivo, pré-visualize e publique seguindo o guia [Primeiras Edições](/editor-codigo/como-fazer/primeiras-edicoes).
  </Step>

  <Step title="Mergulhe na referência técnica">
    Consulte [Objetos](/editor-codigo/referencia/objetos), [Filtros](/editor-codigo/referencia/filtros) e [Variáveis JavaScript](/editor-codigo/referencia/variaveis-javascript) quando precisar acessar dados nos templates.
  </Step>
</Steps>