Como Mudar, Personalizar e Editar um Tema do Shopify

Perry Vance
11 min de leitura
Como Mudar, Personalizar e Editar um Tema do Shopify

Mudar, personalizar e atualizar um tema do Shopify são operações de rotina, mas todas têm uma ordem errada de execução que custa tempo real. Este guia cobre cada uma delas, mais as questões de navegação que confundem a maioria: onde ficam o editor de temas e as configurações de tema.

Todo dono de loja Shopify eventualmente precisa de uma das três coisas: um tema diferente, uma versão personalizada do tema atual, ou uma atualização para uma nova versão do tema sem perder semanas de ajustes. Todas as três são operações de rotina, e todas têm uma ordem errada de execução que custa tempo real. Este guia cobre cada uma delas, mais as questões de navegação que confundem mais pessoas do que qualquer etapa técnica: onde ficam o editor de temas e as configurações de tema.

O guia se baseia em nossas análises de 166 temas do Shopify, cada um avaliado em qualidade de design e desenvolvimento por designers e desenvolvedores profissionais com 10 ou mais anos de experiência.

Você pode mudar o tema do Shopify?

Sim, a qualquer momento, sem tocar nos seus produtos ou perder seu conteúdo. Temas e dados da loja vivem separadamente no Shopify: produtos, coleções, páginas, posts de blog, menus de navegação e registros de clientes pertencem à loja, não ao tema. Mudar temas troca a camada de apresentação enquanto tudo por baixo permanece exatamente onde estava. Sua loja também continua no ar durante todo o processo, porque o novo tema é preparado como rascunho não publicado.

O que não é transferido é a configuração do tema. Cores, fontes, organização de seções e tudo mais que você definiu no editor de temas pertence ao tema antigo e fica com ele. Você reconstruirá essa configuração no novo tema, o que é trabalho genuinamente útil e não tempo perdido: isso força uma revisão fresca em páginas que geralmente acumulam desordem. Reserve uma tarde para uma loja pequena e um ou dois dias para uma grande.

O tema antigo também permanece na sua biblioteca depois que você muda, com configurações intactas, então reverter é um clique. Se a mudança é motivada por problemas de qualidade e não por gosto, escolha o substituto com base em dados de pontuação em vez de impressões de demo: nossa biblioteca Shopify publica pontuações independentes de Design e Dev para todos os 166 temas que analisamos.

Como mudar um tema do Shopify?

Adicione o novo tema à sua biblioteca, personalize-o como rascunho e depois publique. No seu admin do Shopify, vá em Loja Virtual, depois Temas. Adicione o novo tema, da Theme Store ou upload de ZIP, e ele aparece na sua biblioteca de temas como não publicado. Clique em Personalizar nele para configurar cores, seções e menus com seus produtos reais, visualize completamente e depois clique em Publicar quando estiver pronto. A troca é instantânea e reversível.

O erro que vale evitar é publicar primeiro e configurar depois, ao vivo, na frente dos clientes. O estado de rascunho existe para que toda a configuração aconteça invisivelmente: seu tema atual continua servindo tráfego enquanto você trabalha no novo, tipo de página por tipo de página. Verifique a página inicial, uma página de coleção, uma página de produto com variantes, o carrinho e suas páginas de políticas, cada uma em largura de celular e desktop, antes de publicar.

Duas notas menores. Primeiro, faça a troca numa janela de tráfego baixo de qualquer forma, porque apps de nível de tema às vezes precisam ser reativados nos embeds de app do novo tema. Segundo, se você ainda não escolheu o substituto, nosso roundup dos 30 melhores temas modernos do Shopify classifica o campo atual com pontuações em cada entrada, e os 15 melhores temas gratuitos do Shopify cobrem o nível de orçamento zero.

Onde fica o editor de temas do Shopify?

No seu admin do Shopify, vá em Loja Virtual, depois Temas, e clique no botão Personalizar ao lado do tema que você quer editar. Esse botão abre o editor de temas: uma visualização ao vivo da sua loja à direita e o painel de seções editáveis à esquerda. Não há URL separado para memorizar: Personalizar é a única porta de entrada.

O editor é onde todas as mudanças visuais sem código acontecem: adicionar e reordenar seções, editar texto e imagens, ajustar layouts por modelo de página e visualizar mobile. A barra no topo permite alternar entre modelos de página, página inicial, páginas de produto, páginas de coleção, então você está sempre editando uma página real e não uma abstração. Mudanças salvam por sessão, e nada vai ao ar até você salvar.

As pessoas pesquisam isso porque a palavra "editor" aparece em duas funcionalidades diferentes do Shopify. O editor de temas (Personalizar) é a ferramenta visual. O editor de código, acessado no menu de opções do tema como Editar código, é um ambiente diferente para templates Liquid e assets, coberto abaixo. Se um tutorial diz "abra o editor de temas," significa Personalizar.

Onde ficam as configurações de tema no Shopify?

As configurações de tema ficam dentro do editor de temas: abra Personalizar, depois clique no ícone de engrenagem na barra lateral. Esse painel controla os valores globais que se aplicam em todas as páginas da sua loja: cores da marca, tipografia, favicon, links sociais, comportamento do carrinho e estilo do checkout. Configurações de nível de seção, por outro lado, aparecem quando você clica em qualquer seção individual na visualização.

A distinção global versus seção é o que você precisa internalizar, porque é a mesma lógica de design tokens que todo tema bem construído usa. Defina suas cores e fontes uma vez nas configurações de tema e toda seção as herda: pule isso e comece a recolorir seções individuais, e você vai perseguir inconsistências pela loja inteira depois. É o primeiro lugar que nossos revisores olham ao avaliar o quão bem a qualidade de construção de um tema se mantém sob personalização.

Se uma configuração parece estar faltando, verifique a documentação do tema antes de assumir que não existe. Desenvolvedores da Theme Store são obrigados a publicar documentação, e o layout do painel de configurações difere o suficiente entre temas que "onde fica X" geralmente é respondido lá em uma busca.

Como personalizar um tema do Shopify?

Trabalhe do global para o local: configurações de tema primeiro, seções compartilhadas segundo, páginas individuais por último. Abra o ícone de engrenagem do editor e defina cores da marca, fontes e logo antes de tocar em qualquer outra coisa, já que toda página herda esses valores. Depois configure o cabeçalho e rodapé, que se repetem pela loja. Só então trabalhe nos modelos de página, substituindo conteúdo demo com produtos e textos reais.

Essa ordem importa pela mesma razão que importa em toda plataforma que analisamos: temas bem construídos roteiam seu visual através de configurações globais, e edições feitas no nível errado deixam páginas fora do seu sistema de marca. Também é mais rápido. Uma loja que começa com configurações de tema fica 80% estilizada em uma hora: uma loja que começa editando o hero da página inicial pixel por pixel ainda está inconsistente uma semana depois.

Saiba onde está o teto sem código. O editor lida com layout, conteúdo, cores e seções: ele não adiciona funcionalidades que o tema não veio com. Funcionalidade faltando vem de apps ou código, não de buscar mais fundo nos menus. E se você se pegar lutando contra a estrutura do tema em cada página, o tema é o problema: mudar para um arquivo melhor construído frequentemente é mais barato em horas do que dobrar um fraco, que é exatamente o que as pontuações Dev na nossa biblioteca Shopify existem para prever.

Como editar código do tema do Shopify?

De Loja Virtual, depois Temas, abra o menu de opções do tema (os três pontos ao lado de Personalizar) e escolha Editar código. Isso abre o editor de código sobre os arquivos reais do tema: templates Liquid em layout, templates, sections e snippets, mais CSS e JavaScript em assets e configuração em config. Edições aqui ficam ao vivo uma vez salvas, e não há desfazer integrado depois que você sai do arquivo.

Antes de tocar em qualquer coisa, duplique o tema. No mesmo menu de opções, escolha Duplicar, e faça suas edições na cópia, ou no mínimo mantenha o duplicado como ponto de restauração. Edições de código são a ferramenta mais afiada no theming do Shopify e a causa principal de lojas quebradas que encontramos: uma tag Liquid malformada em theme.liquid derruba todas as páginas de uma vez. O duplicado não custa nada e transforma um desastre num aborrecimento.

Saiba também que edições de código complicam atualizações: elas não passam para novas versões de tema, como coberto na próxima seção, então toda edição manual é uma pequena hipoteca na manutenção futura. Se uma mudança é possível através do editor, um app ou uma configuração de seção, faça lá. Reserve código para o que genuinamente precisa dele, e documente cada edição que você faz num changelog simples: o processo de atualização vai agradecer.

Como atualizar um tema do Shopify para uma nova versão?

Quando um desenvolvedor de tema lança uma nova versão, o Shopify mostra um aviso de atualização naquele tema em Loja Virtual, depois Temas. Aceitá-lo adiciona a nova versão à sua biblioteca como uma cópia não publicada ao lado da sua atual: seu tema ao vivo não é tocado. Configurações e conteúdo gerenciados através do editor de temas passam para a nova versão automaticamente. Edições diretas de código não, porque o Shopify trata a atualização como uma instalação fresca do tema.

Essa única assimetria explica a maior parte da dor de atualização. Uma loja personalizada inteiramente através do editor atualiza em minutos: revise o novo rascunho, confirme que nada deslocou, publique. Uma loja com Liquid editado manualmente precisa de cada mudança de código reaplicada à nova versão, que é por isso que o changelog recomendado acima compensa, e por isso temas comprados fora da Theme Store oficial, que não recebem avisos de atualização, envelhecem tão mal. Nosso guia sobre licenciamento, reembolsos e uploads de temas Shopify cobre o que mais muda quando um tema chega como arquivo ZIP.

Atualizações valem ser feitas prontamente. Desenvolvedores as lançam para novos recursos do Shopify, melhorias de performance e correções de bugs, e a lacuna entre sua versão e a atual acumula: pular cinco versões torna a migração eventual cinco vezes o trabalho. Trate atualizações de tema como atualizações de dependência em software: pequeno e regular vence raro e enorme.

FAQ

Mudar meu tema do Shopify vai deletar meus produtos ou páginas?

Não. Produtos, coleções, páginas, posts de blog, navegação e dados de clientes pertencem à sua loja, não ao seu tema, e sobrevivem qualquer mudança de tema intactos. Apenas configuração do editor de temas (cores, fontes, organização de seções) fica para trás com o tema antigo.

Mudar um tema do Shopify prejudica o SEO?

Raramente. URLs e conteúdo não mudam, que é no que rankings principalmente se baseiam. Estrutura de títulos e links internos podem diferir entre temas, então revise esses após a mudança. Passe suas páginas-chave por um crawler ou no mínimo verifique títulos e cabeçalhos na semana após a troca.

Posso editar meu tema do Shopify sem saber programar?

Sim. O editor de temas cobre cores, fontes, layouts, seções e conteúdo sem código nenhum, e para a maioria das lojas essa é toda a superfície de personalização. Código entra apenas para funcionalidades que o tema não veio com, e um tema bem escolhido minimiza a frequência disso.

Quanto tempo leva personalizar um tema do Shopify?

Uma loja focada trabalhando do global para o local consegue uma vitrine apresentável num fim de semana: configurações e navegação na primeira sessão, páginas de produto e coleção na segunda, QA em largura de celular na terceira. Lojas que pulam a ordem global-primeiro levam substancialmente mais tempo para um resultado pior.

Como saber se meu tema tem uma atualização disponível?

O Shopify mostra avisos de atualização no card do tema em Loja Virtual, depois Temas, para qualquer tema instalado da Theme Store oficial. Temas enviados como arquivos ZIP de fontes externas nunca mostram avisos de atualização: manter esses atualizados é inteiramente manual, que é mais um argumento para comprar oficial.