Editar o código do tema

Você pode editar seu código de tema para fazer alterações detalhadas em sua loja virtual. A maioria dos arquivos que compõem um tema contém Liquid, a linguagem de modelos da Shopify. Arquivos de tema também contêm HTML, CSS e JavaScript. Edite o código de um tema somente se você souber HTML e CSS e tiver um entendimento básico de Liquid.

Antes de você personalizar seu tema

Antes de personalizar seu tema, é uma boa ideia 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

Para editar seu código de tema:

  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 visualizar e editar os arquivos à direita:

A página do editor de código

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. Você pode abrir e editar vários arquivos de uma só vez. Qualquer arquivo que você modifique mostrará um ponto roxo ao lado do nome do arquivo:

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.

Se você quiser reverter qualquer alteração em um arquivo depois de clicar em Salvar , abra o arquivo e clique em Versões mais antigas. Um menu suspenso mostra a data e a hora de cada salvamento que você fez. Selecione a versão que você deseja reverter e clique em Salvar.

O menu suspenso de versões mais antigas

Enquanto o editor de código é expandido para tela cheia, você pode alternar o esquema de cores do editor entre Claro e Escuro clicando nos botões na parte inferior da página:

O editor de código mostrado com o esquema de cores escuras

Para saber mais sobre os benefícios de usar o editor escuro, consulte O poder do lado sombrio: Interfaces de usuário escuras no blog do Programa de parcerias da Shopify.

Tutoriais de personalização de código de tema

Você pode seguir os tutoriais de personalização de código de tema para orientá-lo a fazer alterações em sua loja virtual. Os tutoriais são organizados com base no tipo de página ou recurso que eles modificam.

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.

Pronto(a) para começar a vender com a Shopify?

Experimente de graça