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.

Editar o código do tema pode torná-lo inelegível para atualizações automáticas. Só faça isso se não for possível alterar o que precisa com uma configuração do Liquid ou de HTML ou com um app da Shopify.

Antes de você personalizar seu tema

Antes de personalizar seu tema, recomendamos executar as seguintes tarefas:

  • 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 envio de imagens.

Editar seu código de tema

Você pode editar o código de programação de seu tema.

Etapas:

  1. Clique em Ações > 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.

Você pode expandir o editor de código para preencher a tela clicando no ícone de expansão:

O ícone de expansão

Você pode retornar a página ao normal clicando no ícone de colapso:

O ícone de colapso

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 de uma só vez. Os arquivos modificados mostram um ponto ao lado do nome:

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

Isso pode ajudá-lo a acompanhar onde você fez alterações.

Reverter para uma versão anterior 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.

  1. No cabeçalho Modelos, clique em um dos arquivos .liquid editados por você recentemente.

    abrir arquivo Liquid

  2. Clique em Versões mais antigas ao lado do nome do arquivo .liquid.

    versões anteriores

  3. Clique no menu suspenso para selecionar uma versão mais antiga. Ao clicar em um datestamp, o código retornará à versão salva.

    exemplo de reversão

  4. Opcional: clique em Pré-visualização e veja se o erro foi corrigido.

Modo escuro

Enquanto o editor de código está expandido para tela cheia, é possível alternar o esquema de cores entre Claro e Escuro clicando nos botões na parte inferior da página.

Para saber mais sobre os benefícios de usar o editor escuro, consulte The Power of the Dark Side: Dark User Interfaces ("O poder do lado sombrio: interfaces de usuário no modo escuro", em inglês) no blog do Programa de Parcerias da Shopify.

Tutoriais de personalização de código de 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. Saiba mais sobre 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 do seu tema para obter suporte.

Para ver que outros recursos estão disponíveis para ajudá-lo com personalizações de temas, consulte Recursos adicionais de suporte a temas.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça