Edição do código do tema

É possível editar o código do tema para fazer alterações detalhadas na loja virtual com o editor de código. A maioria dos arquivos que compõem um tema contém Liquid, a linguagem de template da Shopify. Os arquivos de tema também contêm HTML, CSS, JSON e JavaScript. Edite o código de um tema apenas se você tiver conhecimentos de HTML e CSS e noções básicas de Liquid.

Só é possível editar o código do tema após a compra. Isso inclui o uso do gerador de código com IA no editor de temas. Caso esteja usando a versão de avaliação de um tema pago, será preciso comprá-lo para poder fazer alterações no código.

O editor de código exibe um diretório com os arquivos do tema e um espaço para exibir e editar os arquivos. Ao clicar em um arquivo no diretório, ele é aberto no editor de código. É possível abrir e editar vários arquivos ao mesmo tempo. Também é possível abrir e analisar vários arquivos ao mesmo tempo.

Editar o código do tema

É possível usar o editor de código para modificar os arquivos do tema.

Etapas:

Salvar alterações

Ao editar um arquivo, um ponto é exibido ao lado do nome da aba para indicar alterações não salvas. Clique no botão Salvar para salvar as alterações. Também é possível usar ⌘ + S no Mac ou Ctrl + S no Windows para salvar as alterações.

Formatar o código do tema

Para corrigir a indentação do código, abra a Paleta de comandos com ⌘ + Shift + P no Mac ou Ctrl + Shift + P no Windows, digite format e selecione Formatar documento.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Clique em > Editar código.

3. Abra o arquivo que você quer formatar.

4. Pressione ⌘ + P no Mac ou Ctrl + P no Windows.

5. Na paleta de comandos, digite format e pressione Enter no teclado.

6. Salve o arquivo.

Rastreamento de alterações de arquivo

Para reverter as alterações no arquivo do tema, use a visualização do Cronograma para consultar o histórico do arquivo e voltar para uma versão anterior. Vale lembrar que as alterações feitas em outros dispositivos não são exibidas na visualização do Cronograma.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Clique em > Editar código.

3. Abra o arquivo que você quer analisar.

4. Na visualização do Cronograma, clique em uma entrada no cronograma para comparar as diferenças.

5. Para restaurar o arquivo a um estado anterior, clique com o botão direito do mouse na entrada do cronograma e selecione Restaurar conteúdo.

6. Clique em Restaurar.

Theme Check

O editor de código inclui o Theme Check, um recurso que ajuda a evitar erros, fornecendo feedback imediato durante a programação, em vez de só descobrir os problemas no tema ativo.

No editor de código, o Theme Check pode identificar os seguintes erros no código editado:

• Scripts que bloqueiam o analisador, que podem deixar a vitrine virtual lenta
• Inconsistências entre arquivos de tradução, como chaves de tradução ausentes ou traduções que não correspondem 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 destacada.

Pesquisar e substituir no editor de código

É possível pesquisar no editor de código de uma das seguintes maneiras:

• Pesquisar o código de um arquivo específico.
• Pesquisar o código de todos os arquivos do tema.

Você também pode substituir o código em um arquivo específico ou em várias instâncias em todos os arquivos do tema. Além disso, pode pesquisar um arquivo por nome para abrir um arquivo.

Pesquisar em um arquivo

É possível pesquisar e substituir o código em um arquivo específico. Use as teclas de seta para analisar cada instância do código.

Depois de pesquisar o código, é possível substituí-lo em um arquivo.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Clique em > Editar código.

3. Abra o arquivo que você quer pesquisar.

4. Pressione ⌘ + F em um Mac ou Ctrl + F no Windows.

5. No campo Pesquisar, insira o termo de pesquisa.

6. Opcional: para substituir o código, siga as etapas abaixo:

• Na janela modal de pesquisa, clique no ícone de .
• No campo Substituir, insira o código de substituição. Clique em Preservar capitalização para que a capitalização do código de substituição corresponda à da instância existente.
• Clique no ícone Substituir para substituir uma instância de cada vez, ou clique no ícone Substituir tudo para substituir todas as instâncias de uma só vez.

Pesquisar em todos os arquivos

Clique no botão de pesquisa na barra lateral esquerda para pesquisar em todos os arquivos do tema. Os resultados exibem todas as instâncias do termo de pesquisa e em qual arquivo elas aparecem.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Clique em > Editar código.

3. Clique no ícone para abrir o painel de pesquisa.

4. No campo Pesquisar, insira o termo de pesquisa.

5. Opcional: para substituir o código, siga as etapas abaixo:

• Na janela modal de pesquisa, clique no ícone de .
• No campo Substituir, insira o código de substituição.
• Substitua uma instância de cada vez ou todas as instâncias de uma só vez.

Opções de pesquisa avançada

Para restringir os resultados da pesquisa, use uma ou mais das seguintes opções de pesquisa:

• Diferenciar maiúsculas de minúsculas retorna os termos de pesquisa que correspondem à capitalização. Por exemplo, se você inserir product, a pesquisa destacará todas as instâncias de “product” ou “Product”. Se você selecionar Diferenciar maiúsculas de minúsculas, a pesquisa destacará apenas as instâncias de product.
• Corresponder palavra inteira retorna termos de pesquisa que correspondem à palavra exata e exclui correspondências parciais. Por exemplo, se você inserir cart, a pesquisa destacará as instâncias de “cart”, mas não de “carton”.
• Usar expressão regular retorna resultados de pesquisa que correspondem a uma expressão regular (regex). Uma regex é uma string de caracteres que especifica um padrão de correspondência no texto.

No painel Pesquisar, você também pode selecionar arquivos e pastas para incluir ou excluir dos resultados da pesquisa.

Clique em para abrir o menu avançado. Você pode inserir qualquer caminho de arquivo ou pasta nos campos arquivos a serem incluídos ou arquivos a serem excluídos. Para adicionar mais de um arquivo ou pasta, separe-os com um espaço e uma vírgula. Por exemplo, para pesquisar arquivos na pasta seções, insira ./sections no campo arquivos a serem incluídos.

Você também pode pesquisar em uma pasta específica na visualização do diretório de arquivos. Clique com o botão direito do mouse em uma pasta e selecione Localizar na pasta… no menu suspenso.

Gerenciar arquivos de tema

É possível gerenciar arquivos no código do tema. Você pode excluir, adicionar e renomear arquivos, além de reverter arquivos modificados no diretório de arquivos.

Abrir um arquivo de tema

Para abrir um arquivo de tema, clique em uma pasta e, em seguida, no nome do arquivo no explorador. Você também pode pesquisar arquivos por nome ou extensão e, em seguida, abrir o arquivo.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Clique em > Editar código.

3. Pressione ⌘ + P no Mac ou Ctrl + P no Windows.

4. Insira o nome do arquivo na barra de pesquisa e selecione-o, ou escolha um arquivo na lista Abertos recentemente.

Adicionar um novo arquivo de tema

Para adicionar um arquivo, selecione uma pasta, clique no ícone Novo arquivo e insira o nome e a extensão do arquivo.

Os nomes de arquivos podem incluir caracteres de A a Z, de 0 a 9, e não podem conter espaços. Separe as palavras com hifens ou sublinhados. A extensão de um arquivo é definida por um ponto . e o tipo da extensão. Por exemplo, .liquid ou .css.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Clique em > Editar código.

3. Clique na pasta em que você quer adicionar um novo arquivo.

4. Clique com o botão direito do mouse no nome da pasta e selecione Novo arquivo… no menu suspenso.

5. Insira um novo nome para o arquivo.

6. Pressione Enter no teclado.

Fazer upload de um novo recurso

É possível fazer o upload de um novo recurso, como um ícone ou um arquivo de imagem, para a pasta assets do editor de código.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Clique em > Editar código.

3. Clique com o botão direito do mouse na pasta assets.

4. Clique em Fazer upload….

5. Selecione o arquivo do qual você quer fazer upload.

6. Clique em Abrir.

Renomear um arquivo de tema

Clique com o botão direito do mouse em um arquivo para renomeá-lo. Não edite nem remova a extensão de arquivo. Uma extensão de arquivo é definida por um ponto . e o tipo de extensão, como .liquid ou .css. Os nomes de arquivo podem incluir caracteres de A a Z e de 0 a 9, mas não espaços. Separe as palavras com hifens ou sublinhados. Se o nome do arquivo não for válido, ele não será salvo.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Clique em > Editar código.

3. Clique com o botão direito do mouse em um arquivo e selecione Renomear... no menu suspenso.

4. Insira um novo nome para o arquivo.

5. Pressione Enter no teclado.

Excluir um arquivo de tema

É possível excluir qualquer arquivo do tema. Arquivos de tema excluídos não podem ser recuperados.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Clique em > Editar código.

3. Clique com o botão direito do mouse em um arquivo e selecione Excluir permanentemente no menu suspenso.

4. Clique em Excluir.