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

# Primeiras edições

Este guia cobre o ciclo completo de desenvolvimento no Editor de Código: acessar o editor, explorar os arquivos, fazer uma edição, pré-visualizar e publicar. Siga as etapas na ordem — cada uma prepara para a próxima.

**Tempo estimado:** 15 minutos.

***

<Steps>
  <Step title="Acessar o Editor de Código">
    No painel da sua loja, navegue até **Loja Virtual → Temas**. Localize o tema ativo e clique em **Editar Código**.

    <Warning>
      O botão **Editar Código** só aparece para o tema que está instalado na loja. Se você não ver a opção, verifique se o tema está ativo em **Loja Virtual → Temas**.
    </Warning>
  </Step>

  <Step title="Explorar a estrutura de arquivos">
    Com o editor aberto, você verá no painel lateral os diretórios do tema. Cada pasta tem uma responsabilidade específica:

    | Diretório     | O que contém                                                           |
    | ------------- | ---------------------------------------------------------------------- |
    | `templates/`  | Arquivo principal de cada página da loja (home, produto, categoria...) |
    | `sections/`   | Blocos de conteúdo editáveis como banners, destaques e coleções        |
    | `elements/`   | Arquivos `.twig` de elementos menores e reutilizáveis (botões, ícones) |
    | `components/` | Componentes Vue.js com lógica interativa (carrinho, seleção de SKU...) |
    | `assets/`     | Imagens e arquivos de estilo (`.css`, `.scss`)                         |
    | `logs/`       | Logs de erros gerados pelo editor                                      |

    <Note>
      Para a sua primeira edição, foque nos diretórios `sections/` e `templates/`. São os arquivos que controlam diretamente o que aparece em cada página da loja.
    </Note>
  </Step>

  <Step title="Fazer uma edição">
    Vamos adicionar um botão de compra diretamente no card de produto. No painel lateral, abra **`elements/`** e clique no arquivo **`box-product.twig`**.

    Localize o trecho onde o preço do produto é exibido e adicione o botão logo abaixo:

    **Antes:**

    ```twig theme={"system"}
    <div class="product-price">
        {{ product.price }}
    </div>
    ```

    **Depois:**

    ```twig theme={"system"}
    <div class="product-price">
        {{ product.price }}
    </div>

    <a class="btn btn-primary"
        {% if product %}
            href="{{ product.url_path|escape }}"
        {% else %}
            :href="data.product.url_path"
        {% endif %}>
        Comprar
    </a>
    ```

    Após editar, clique em **Salvar** (ou use `Ctrl+S` / `Cmd+S`).

    <Note>
      O bloco `{% if product %}` garante que o link funcione tanto em páginas de produto (onde `product` existe como objeto Twig) quanto em listagens, onde os dados vêm do Vue via `data.product`.
    </Note>
  </Step>

  <Step title="Pré-visualizar o resultado">
    Antes de publicar, veja como a edição ficou na loja. Clique em **Ver Prévia** no canto superior direito do editor.

    Uma aba do navegador abrirá com uma versão da sua loja refletindo as alterações salvas. A pré-visualização não afeta os clientes — é um ambiente exclusivo para revisão.

    Navegue pela loja na pré-visualização e confirme que a edição aparece corretamente. Se precisar ajustar algo, volte ao editor, edite, salve e recarregue a pré-visualização.
  </Step>

  <Step title="Publicar">
    Quando estiver satisfeito com o resultado, clique em **Publicar** no canto superior direito do editor.

    Um modal de confirmação será exibido. Clique em **Sim, publicar** para aplicar as alterações na loja.

    <Warning>
      As alterações podem levar alguns segundos para aparecer na loja por conta do cache. Aguarde antes de fazer novos testes após a publicação.
    </Warning>
  </Step>
</Steps>