⚠️ Este recurso está em fase de testes e pode não estar disponível para sua loja no momento!
Lojas virtuais em crescimento costumam precisar de um nível maior de personalização. Em muitos casos, o Editor de temas não atende a todas as necessidades de design, layout ou funcionalidades específicas.
Para esses cenários, a Yampi oferece o Editor de Código, uma ferramenta avançada que permite editar diretamente os arquivos do tema da loja, cujo objetivo principal é dar autonomia para o usuário personalizar e criar funcionalidades na loja através do Editor de código.
Com ele, lojistas, agências e desenvolvedores podem personalizar o layout da loja, criar componentes e desenvolver funcionalidades sob medida.
Ao utilizar o editor, a loja passa a ter um código único, mas mantém o dinamismo, permitindo que o editor de temas visual continue funcionando em conjunto.
Neste artigo, você aprenderá:
Orientações Iniciais
Para utilizar o Editor de Código da Yampi, recomendamos que você:
Tenha um tema instalado na Yampi
Possua conhecimentos básicos de HTML, CSS e JavaScript
Caso não possua os conhecimentos básicos citados acima, procure um programador ou agência. Você também pode utilizar a Lista de Especialistas da Yampi.
Saiba qual personalização deseja realizar
O que é o Editor de Código da Yampi?
O Editor de Código é uma ferramenta avançada que permite personalizar e desenvolver novas funcionalidades na sua loja virtual.
Com ele, você pode:
Ajustar layouts da loja
Adicionar elementos personalizados
Modificar estilos e componentes
Integrar funcionalidades avançadas
Essa ferramenta é especialmente útil para lojas que precisam de personalizações mais profundas, que não são possíveis apenas pelo editor visual de temas.
Como acessar o Editor de Código?
Para acessar o Editor de Código na sua loja:
Passo 1 - Acesse o painel administrativo da Yampi.
Passo 2 - No menu lateral, clique em Loja virtual.
Passo 3 - Acesse a página Temas.
Passo 4 - Se a loja possuir um tema instalado, aparecerá o botão Editar código.
Passo 5 - Clique em Editar código.
Após clicar, você será redirecionado para o Editor de Código, onde todo o código do tema instalado ficará disponível para visualização e edição.
O que é possível fazer no Editor de Código?
O Editor de Código permite criar personalizações avançadas na loja.
Entre as principais possibilidades estão:
Criar componentes personalizados
Adicione novas funcionalidades e scripts específicos para sua loja.
Personalizar o visual da loja
Edite elementos do layout para refletir a identidade visual da sua marca.
Integrar com APIs
Utilize tecnologias como Vue.js e Twig para criar funcionalidades dinâmicas.
Criar layouts personalizados
Desenvolva páginas totalmente customizadas utilizando HTML, CSS e JavaScript.
Se quiser se aprofundar na parte técnica, 🔗consulte a documentação completa para desenvolvedores.
Como editar os arquivos do tema?
No Editor de Código, os arquivos do tema ficam organizados em pastas na barra lateral.
Veja a estrutura disponível:
Pasta | Descrição |
| Armazena imagens (.png, .jpg, até 2MB) e arquivos de estilo (.css e .scss). |
| Contém componentes Vue reutilizáveis. |
| Inclui arquivos .twig para elementos individuais, como botões e ícones. |
| Armazena logs de erros gerados pelo Editor de Código. |
| Contém arquivos de seções editáveis, como banners e destaques. |
| Contém o arquivo principal de cada página da loja. |
🚨Algumas regras importantes:
Não é possível criar, editar ou excluir pastas.
Apenas arquivos dentro dessas pastas podem ser modificados.
Ao salvar um arquivo, o sistema armazena a versão atual e também as três últimas versões salvas, permitindo recuperar versões anteriores caso necessário.
Ao criar um novo arquivo, você deve definir:
O nome do arquivo
O tipo de arquivo (.vue, .twig, .css ou .scss)
Para entender melhor como funcionam esses arquivos, veja a documentação técnica: https://docs.yampi.com.br/editor-codigo/template-engine/twig/twig
Como ver uma prévia da loja?
Durante a edição, você pode visualizar como a loja ficará com as alterações realizadas. Para isso:
Clique no botão Ver loja.
Uma nova aba será aberta com uma prévia de como a loja ficará ao publicar as alterações.
Essa visualização mostra como o site ficará considerando o código atualmente inserido no editor.
Como publicar as alterações na loja?
Quando terminar suas alterações, é possível publicar o código diretamente. Para publicar:
Clique em Publicar.
Confirme a ação.
Após a publicação, todas as alterações realizadas serão aplicadas ao domínio configurado na loja.
⚠️ As alterações podem levar alguns segundos para aparecer devido ao cache.
Dúvidas frequentes 🤔
▶️ Clique na setinha para abrir o conteúdo de Dúvidas frequentes
Qualquer loja pode acessar o Editor de Código?
Qualquer loja pode acessar o Editor de Código?
Por enquanto, não. O Editor de Código ainda está em fase de testes, o que significa que não foi liberado ainda para todas as lojas.
Quando estiver liberado para a base toda, o único critério será ter um tema instalado em sua Loja Virtual da Yampi.
Preciso saber programar para usar o Editor de Código?
Preciso saber programar para usar o Editor de Código?
O ideal é que as alterações sejam realizadas por desenvolvedores profissionais, garantindo que nenhuma modificação comprometa outros componentes da loja. Ainda assim, ter conhecimentos básicos de HTML, CSS e JavaScript já ajuda a entender a estrutura do código e realizar ajustes simples com mais segurança.
Posso desfazer alterações no código?
Posso desfazer alterações no código?
Sim. O sistema mantém a versão atual e também as três últimas versões salvas de cada arquivo.
Não tenho conhecimento em programação e não conheço alguém que possa fazer isso. O suporte da Yampi pode me ajudar na configuração?
Não tenho conhecimento em programação e não conheço alguém que possa fazer isso. O suporte da Yampi pode me ajudar na configuração?
O time de suporte da Yampi não realiza alterações ou configurações diretamente no código da loja.
Se você precisar de ajuda com personalizações no tema, recomendamos contar com um desenvolvedor ou profissional especializado. Você também pode encontrar profissionais parceiros da Yampi que oferecem esse tipo de serviço na nossa página de parceiros: https://www.yampi.com.br/especialistas/lista.
O suporte da Yampi pode me ajudar se o código afetar alguma outra parte da loja?
O suporte da Yampi pode me ajudar se o código afetar alguma outra parte da loja?
Alterações realizadas no Editor de Código são consideradas personalizações externas ao padrão da plataforma. Por esse motivo, o time de suporte da Yampi não consegue atuar diretamente na correção ou análise desse tipo de modificação.
Caso alguma alteração afete o funcionamento da loja, recomendamos entrar em contato com o desenvolvedor responsável pela edição ou com outro profissional especializado para avaliar e corrigir o código.
Você pode utilizar a lista de Especialistas da Yampi, e contatar um profissional para te auxiliar: https://www.yampi.com.br/especialistas/lista.
Em caso de dúvidas, clique no balãozinho de atendimento em seu painel ou nos encaminhe pelo e-mail [email protected]. 😉