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

# Introdução ao Editor

> Conheça o editor de código da BukioPay e aprenda a personalizar o visual da sua loja.

O editor de código permite personalizar o visual e o comportamento da sua loja. Os templates usam a engine **EJS**, então você escreve HTML com trechos de JavaScript embutidos.

## O que você pode fazer

* Editar o HTML, o CSS e o JavaScript de qualquer página da loja
* Criar componentes reutilizáveis e reaproveitá-los entre páginas
* Usar os dados da loja, dos produtos e dos pedidos direto no HTML
* Trocar textos, cores e imagens sem depender de deploy

## Como funciona

Cada template é um conjunto de arquivos organizados em pastas. Quando você edita um arquivo, sua versão passa a valer no lugar da original, e o resto do template continua igual.

<Note>
  Você nunca perde o template base. Apagar sua versão de um arquivo faz a loja voltar a usar o original.
</Note>

## Criar um template personalizado

<Steps>
  <Step title="Abra a personalização da loja">
    No painel, vá em **Configurações → Personalização**.
  </Step>

  <Step title="Crie um template a partir de um base">
    O novo template nasce como uma cópia do base, com todos os arquivos prontos para editar.
  </Step>

  <Step title="Edite e publique">
    Altere o arquivo desejado e salve. A mudança vale para a sua loja assim que você seleciona o template.
  </Step>
</Steps>

## Por onde começar

<CardGroup cols={2}>
  <Card title="Estrutura de arquivos" icon="folder-tree" href="/editor/estrutura">
    Entenda o que vai em cada pasta.
  </Card>

  <Card title="Sintaxe" icon="code" href="/editor/sintaxe">
    Como exibir dados, usar condições e repetir listas.
  </Card>

  <Card title="Variáveis" icon="brackets-curly" href="/editor/variaveis">
    Os dados disponíveis em cada página.
  </Card>

  <Card title="Páginas e rotas" icon="sitemap" href="/editor/paginas">
    Qual arquivo responde por qual endereço.
  </Card>
</CardGroup>


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