Editar o código do tema
É possível editar o código de um tema para fazer alterações detalhadas em sua loja virtual. A maioria dos arquivos que compõem um tema contêm Liquid, a linguagem para modelos da Shopify, mas também é possível encontrar HTML, CSS, JSON e JavaScript. Edite o código somente se você souber HTML e CSS e tiver um entendimento básico de Liquid.
Nesta página
Antes de você personalizar seu tema
Para se preparar para personalizar seu tema, conclua as seguintes tarefas recomendadas:
- Duplique seu tema para criar uma cópia de backup. Isso facilita o descarte de suas alterações para você iniciar novamente, se for necessário.
- Confira se você entende o nível de atendimento disponível.
- Conheça os requisitos e as práticas recomendadas para o upload de imagens.
Editar o código do tema
Você pode editar o código de programação de seu tema.
Etapas:
- No admin da Shopify, acesse Loja virtual > Temas.
- Clique em ... > Editar código.
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em gerenciar temas.
- Clique em ... > Editar código.
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em gerenciar temas.
- Clique em ... > Editar código.
O editor de código mostra um diretório de arquivos de tema à esquerda e um espaço para ver e editar os arquivos à direita.
Quando você clica em um arquivo no diretório à esquerda, ele é aberto no editor de código. É possível abrir e editar vários arquivos ao mesmo tempo. Os arquivos modificados mostram um ponto ao lado do nome:
Isso pode ajudá-lo a acompanhar onde você fez alterações.
Voltar para uma versão mais antiga do arquivo do tema
Se você alterou arquivos do tema e precisa voltar a uma versão anterior deles, é possível reverter arquivos .liquid individualmente para uma data e um horário anteriores às alterações.
Etapas:
- No admin da Shopify, acesse Loja virtual > Temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No cabeçalho Modelos, clique em um dos arquivos .liquid que você editou recentemente.
- Clique em Atual no arquivo
.liquid. - Clique no menu suspenso para selecionar uma versão mais antiga. Ao clicar em um datestamp, o código retornará à versão salva.
- Opcional: clique em Pré-visualização da loja para verificar se o erro foi corrigido.
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em gerenciar temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No cabeçalho Modelos, clique em um dos arquivos .liquid que você editou recentemente.
- Clique em Atual no arquivo
.liquid. - Clique no menu suspenso para selecionar uma versão mais antiga. Ao clicar em um datestamp, o código retornará à versão salva.
- Opcional: clique em Pré-visualização da loja para verificar se o erro foi corrigido.
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em gerenciar temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No cabeçalho Modelos, clique em um dos arquivos .liquid que você editou recentemente.
- Clique em Atual no arquivo
.liquid. - Clique no menu suspenso para selecionar uma versão mais antiga. Ao clicar em um datestamp, o código retornará à versão salva.
- Opcional: clique em Pré-visualização da loja para verificar se o erro foi corrigido.
Verificação de tema
O editor de código inclui a Verificação de tema, um recurso que ajuda a evitar erros fornecendo feedback imediato à medida que o código está sendo escrito, em vez de descobrir erros no seu tema ativo.
No editor de código, a Verificação de tema pode identificar os seguintes erros no código editado:
- Scripts de bloqueio do analisador, o que pode deixar mais lenta uma vitrine
- Inconsistências entre arquivos de tradução, como chaves de tradução ausentes ou traduções que não combinam em um arquivo de localização
- Modelos ausentes
Os erros são indicados por uma linha vermelha abaixo do código. Para ver o erro, passe o mouse sobre a linha realçada.
Tutoriais de personalização do código do tema
Para fazer mudanças na loja virtual, siga as orientações para personalização de código do tema oferecidas nos tutoriais, organizados por tipo de página ou recurso que alteram.
Os tutoriais de personalização de tema são divididos de acordo com as versões de arquitetura usadas. Saiba como identificá-las.
Obtenha ajuda com personalizações
Se você precisar de ajuda para fazer alterações em seu tema, entre em contato com o desenvolvedor dele.
Veja os outros recursos disponíveis para ajudar com personalizações de temas em Recursos adicionais de suporte a temas.