O que você pode personalizar
Controle cada página
Edite o HTML e Twig de qualquer template ou seção — da home ao carrinho — sem limitações.
Adicione interatividade
Crie componentes Vue para carrinho, seleção de SKU, sliders e qualquer comportamento dinâmico.
Defina a identidade visual
Personalize cores, tipografia e espaçamentos com SASS e variáveis CSS que afetam o tema inteiro.
Arquitetura do Editor
O editor é construído sobre três tecnologias que atuam em camadas distintas e complementares:Twig
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.
Vue.js
Dá vida à sua loja. Componentes que rodam no navegador: carrinho, SKU, sliders — tudo que responde em tempo real ao cliente.
SASS / CSS
Estilo sem fronteiras. Variáveis CSS globais que controlam o visual de forma centralizada — mude o tema inteiro com poucas linhas.
Por onde começar
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.
Explore a estrutura de arquivos
Entenda para que serve cada diretório (
templates, sections, components, assets…). Veja em Pastas e Arquivos.Faça sua primeira edição
Edite um arquivo, pré-visualize e publique seguindo o guia Primeiras Edições.
Mergulhe na referência técnica
Consulte Objetos, Filtros e Variáveis JavaScript quando precisar acessar dados nos templates.