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.

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:

Desktop
  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Clique em ... > Editar código.
iPhone
  1. No app da Shopify, toque no botão .
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. Clique em ... > Editar código.
Android
  1. No app da Shopify, toque no botão .
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. 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:

O diretório de arquivos de tema mostrando um ponto ao lado dos arquivos que foram modificados

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 e .json individualmente para uma data e um horário anteriores às alterações.

É possível reverter arquivos de tema em qualquer pasta do diretório, exceto os arquivos na pasta de ativos. Os arquivos localizados nessa pasta , incluindo os arquivos theme.scss.liquid e theme.js, não salvam versões editadas anteriormente. Se você estiver fazendo alterações em arquivos dessa pasta, talvez seja necessário entrar em contato com o Atendimento para temas ou contratar um Parceiro da Shopify.

Etapas:

Desktop
  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Encontre o tema que você quer editar, clique no botão para abrir o menu de ações e, depois, em Editar código.
  3. No diretório de arquivos de temas, clique em um dos arquivos .liquid ou .json que você editou recentemente.
  4. Na parte superior do editor de código, clique em Atual.
  5. Use o menu suspenso para selecionar uma versão mais antiga. Ao selecionar um datestamp, o código retornará à versão salva.
  6. Opcional: clique em Pré-visualização da loja para verificar se o erro foi corrigido.
  7. Para reverter para a versão mais antiga, clique em Salvar.
iPhone
  1. No app da Shopify, toque no botão .
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em Gerenciar todos os temas.
  4. Encontre o tema que você quer editar, clique no botão para abrir o menu de ações e, depois, em Editar código.
  5. No diretório dos arquivos de temas, toque em um dos arquivos .liquid ou .json que você editou recentemente.
  6. Na parte superior do editor de código, toque em Atual.
  7. Use o menu suspenso para selecionar uma versão mais antiga. Ao selecionar um datestamp, o código retornará à versão salva.
  8. Opcional: toque em Pré-visualização da loja para verificar se o erro foi corrigido.
  9. Caso queira reverter para a versão mais antiga, toque em Salvar.
Android
  1. No app da Shopify, toque no botão .
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. Encontre o tema que você quer editar, clique no botão para abrir o menu de ações e, depois, em Editar código.
  5. No diretório dos arquivos de temas, toque em um dos arquivos .liquid ou .json que você editou recentemente.
  6. Na parte superior do editor de código, toque em Atual.
  7. Use o menu suspenso para selecionar uma versão mais antiga. Ao selecionar um datestamp, o código retornará à versão salva.
  8. Opcional: toque em Pré-visualização da loja para verificar se o erro foi corrigido.
  9. Caso queira reverter para a versão mais antiga, toque em Salvar.

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.

Exemplo de Verificação de tema detectando um erro de código

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.

Não encontrou as respostas que está procurando? Estamos sempre à disposição para ajudar você.