COMEÇAR

Personalizar um tema pago do Shopify com código: duplicar, editar ou usar o Shopify CLI?

Vais alterar o código de um tema pago, com ajuda de IA ou não. Convém duplicar primeiro? Perdes as atualizações? Vê as três formas de trabalhar, o que a documentação diz sobre atualizações de temas com código editado e o erro a evitar quando a IA sugere fazer um tema de raiz.

Pedro Alfaiate·· 5 min de leitura
Capa Mexer no código do tema, com duas pastas de cartão iguais, uma delas marcada a verde.

Compraste um tema, e o editor de temas não chega para o que queres fazer. A próxima etapa é mexer no código, cada vez mais com uma ferramenta de IA a escrever as alterações. Antes de abrir o primeiro ficheiro, há uma decisão a tomar: onde é que essas alterações vão viver, e o que acontece quando sair uma nova versão do tema.

A resposta curta é “duplica o tema primeiro”. A dúvida que fica é se a cópia deixa de ser “o tema” e perde as atualizações. Vamos por partes.

Duplicar antes de mexer: sim, sempre

Duplicar o tema em Loja online > Temas cria uma cópia na biblioteca de temas. Trabalhas na cópia, publicas quando estiver pronta, e o tema original continua lá, intacto, como rede de segurança. Se a alteração correr mal, publicas o original de volta.

Isto vale para qualquer alteração de código, pequena ou grande, com ou sem IA. Uma ferramenta de IA a editar ficheiros do tema pode fazer alterações certas e, no mesmo passo, tocar num ficheiro que não devia. Ter o tema original por publicar é a forma mais barata de reverter.

E as atualizações?

A preocupação tem fundamento, mas menos do que parece. A documentação do Shopify sobre atualizar temas descreve o seguinte para temas da loja de temas do Shopify:

  • As novas versões chegam como cópias de rascunho à biblioteca de temas, com o nome precedido de “Updated copy of”, para testares antes de publicar.
  • Se fizeste alterações de código e elas não entrarem em conflito com a atualização, são incluídas na nova versão. Se houver conflito, recebes um aviso de que as alterações de código não puderam ser incluídas e tens de as passar à mão.
  • As personalizações feitas no editor, como definições, secções, blocos e modelos, são preservadas.
  • Temas carregados por ficheiro ou comprados fora da loja de temas não recebem atualizações por este processo; nesses casos o contacto é com quem fez o tema.

O que não encontrei na documentação foi uma resposta explícita a esta pergunta: se a cópia duplicada recebe a mesma oferta de atualização que o original. Na prática, mantém o original na biblioteca, sem apagar. Se a atualização aparecer no original, tens sempre um caminho: passar as tuas alterações para a versão atualizada. Se apagares o original, ficas dependente de voltar a instalar o tema, e convém confirmar na loja de temas em que condições isso é possível para um tema já comprado.

A consequência prática: quantas menos alterações de código fizeres, mais fácil é atualizar. Cada ficheiro que tocas é um conflito potencial na próxima versão. Antes de editar código, esgota o editor de temas e os blocos de Liquid personalizado, que sobrevivem a atualizações sem trabalho.

Três formas de trabalhar no código

Editor de código do painel. Em Loja online > Temas, no menu do tema, Editar código. Serve para alterações pontuais: um ficheiro, uma secção, um trecho de CSS. É onde a maioria das pessoas cola o que a IA lhes escreveu. Vantagens: não precisa de instalar nada. Desvantagens: não há histórico de versões nem forma fácil de comparar o que mudou.

Shopify CLI. Uma ferramenta de linha de comandos que copia o código do tema para uma pasta no teu computador, deixa-te editar com o editor de código que preferires, pré-visualizar as alterações num tema de desenvolvimento e enviá-las para a loja. A documentação do Shopify CLI para temas descreve os comandos para puxar e enviar temas e para executar um tema de desenvolvimento com pré-visualização. É o caminho para alterações estruturais: a pasta local pode ficar num repositório, com histórico de tudo o que mudou, e as ferramentas de IA que trabalham sobre ficheiros locais conseguem ler o tema inteiro. É mais trabalho de instalação, e faz sentido quando as alterações são frequentes ou grandes.

Conector da IA à loja. Um conector dá à IA acesso ao painel, produtos, coleções e conteúdos, não ao código do tema com o mesmo à-vontade. A distinção é esta: com o CLI trabalhas a estrutura; com o conector trabalhas o backoffice. Se o que queres é mudar o design, o conector não é a ferramenta.

O erro a evitar: deixar a IA fazer um tema de raiz

Quando pedes a uma ferramenta de IA para alterar o tema, é comum ela sugerir criar um tema novo em vez de trabalhar em cima do tema pago. Ignora a sugestão.

Um tema pago traz anos de trabalho em acessibilidade, velocidade, compatibilidade com apps e casos de uso que não vês até precisares deles. Uma IA consegue produzir um tema que parece funcionar numa tarde; não consegue reproduzir esse histórico. Quando pedires alterações, diz explicitamente: “altera este tema, não cries um novo, e mexe no menor número de ficheiros possível”. E confirma, antes de aplicar, quais os ficheiros que a IA quer tocar.

Antes de publicar a cópia alterada

  • Abre a pré-visualização da cópia no computador e no telemóvel e percorre as páginas principais: início, coleção, produto, carrinho.
  • Confirma que as apps que injetam código no tema continuam a funcionar.
  • Anota o que alteraste, ficheiro a ficheiro, num documento. É o que vais precisar quando chegar a próxima versão do tema.
  • Publica a cópia e mantém o original na biblioteca.

Se ainda estás a decidir o que precisa mesmo de código, a página de produto e as coleções resolvem-se, em muitos temas, só com o editor.

Este artigo foi preparado a partir dos conteúdos da Academia Shopifyers, com o comportamento das atualizações confirmado na documentação oficial.

Uma dica de Shopify por semana, no teu email.

Sem pressa e sem spam. Podes sair quando quiseres.

Continua a explorar.

Todos os artigos