Skip to main content

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.

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.Botão Editar Código na tela de Temas
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
Estrutura de pastas no 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).Arquivo aberto e sendo editado no editorArquivo salvo após edição
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.Link de pré-visualização no editorUma 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.Botão Publicar no editorUm modal de confirmação será exibido. Clique em Sim, publicar para aplicar as alterações na loja.Modal de confirmação de publicação
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.

​
Próximos passos

Agora que você fez sua primeira edição completa, explore os recursos mais avançados do editor:

Tecnologias

Entenda como Twig, Vue.js e SASS funcionam juntos no Tema Rocket.

Pastas e Arquivos

Conheça a estrutura de diretórios do tema e a responsabilidade de cada pasta.

Objetos disponíveis

Veja quais dados da loja estão disponíveis em cada página do template.

Variáveis CSS

Customize cores, tipografia e espaçamentos usando design tokens globais.