Skip to main content
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.
1

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

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órioO 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
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.
3

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:
<div class="product-price">
    {{ product.price }}
</div>
Depois:
<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).
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.
4

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

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