Solução de problemas do tema da loja virtual

Há muitas circunstâncias diferentes que podem fazer com que o tema não seja exibido como previsto, fazendo com que elementos desapareçam ou não funcionem corretamente, além de outros problemas de exibição. Esses erros podem ocorrer devido a um código de terceiros ou de app em conflito com o tema ou a personalizações de códigos. Também pode haver configurações no admin da Shopify que precisam ser ajustadas. Por exemplo, talvez seja necessário analisar o conteúdo traduzido, produtos, coleções, menus ou mercados.

Caso você ainda tenha problemas após analisar as etapas deste guia, entre em contato com a equipe de atendimento do tema. Saiba mais sobre como receber atendimento para temas.

Nesta página

Localizar a origem do problema

A localização da origem do problema no tema é o primeiro passo para corrigi-lo. Para fazer isso, tente as etapas abaixo:

Acesse a página de status da Shopify para ver problemas conhecidos que possam afetar a vitrine. Caso não haja um problema semelhante listado, continue a investigar a questão.
O problema pode estar no dispositivo. Em geral, os problemas locais são resultantes das configurações do dispositivo, do navegador ou de problemas de conexão com a internet. Tente as etapas abaixo para garantir que o problema não é local e que se replica em outros dispositivos, navegadores ou conexões com a internet:
- Limpe o cache e os cookies do navegador. Se tiver feito login na Central de ajuda da Shopify com sua conta da Shopify, a limpeza dos registros de cache e cookies no navegador fará com que você se desconecte. Caso use o assistente virtual da Central de ajuda, a limpeza do cache e dos cookies redefine o histórico de chat e desconecta você da conta. Portanto, é necessário iniciar um novo chat com o assistente virtual da Central de ajuda.
- Experimente o modo de navegação anônima, outro dispositivo ou o app da Shopify.
- Tente usar dados de dispositivos móveis ou outra conexão com a Internet.
- Verifique se o navegador está atualizado.
- Verifique se o navegador não está configurado para bloquear todos os cookies, pois alguns apps podem não ser exibidos corretamente sem cookies.
- Verifique se você não está usando uma Rede privada virtual (VPN) ou se há um firewall ativado que bloqueia a Shopify.
Se você ainda tem o problema em outros dispositivos, navegadores ou conexões com a internet, ele não é local e pode ser replicado. A replicação do problema em outro tema é a próxima etapa para localizar a origem dele. Acesse a Theme Store, instale uma nova versão do tema e teste se o problema ainda está presente na versão mais recente. Instalar um tema diferente, como um tema gratuito da Shopify, também é uma prática recomendada, pois você consegue determinar se o problema ocorre nesse tema específico ou em todos os temas. Depois de testar outros temas, as próximas etapas são boas opções, conforme a maneira como o problema se apresentou:
- Se o problema estiver presente apenas no tema atual e em uma versão atualizada e não personalizada, talvez seja necessário procurar atendimento para o tema.
- Se o problema estiver presente apenas no tema atual, talvez haja algum código que cause erros. Caso você tenha atualizado o código do tema recentemente, é possível reverter para uma versão mais antiga. Se você não modificou o código no tema, revise as configurações. Por exemplo, se o botão Adicionar ao carrinho não estiver sendo exibido, analise as cores em Botões e verifique se elas são diferentes e contrastantes.
- Se o problema estiver presente em todos os temas, ele pode ser causado por configurações, apps ou outras questões do admin da Shopify.
O problema pode ser de um app. Se recentemente você instalou ou atualizou algum app que afeta a vitrine, é possível desinstalá-lo temporariamente. Caso o problema desapareça após a desinstalação, entre em contato com a equipe de atendimento do desenvolvedor do app para que ele seja exibido corretamente na vitrine. Saiba mais sobre como receber ajuda com apps. Se o problema ainda estiver presente após a desinstalação, o app não é a origem.

Imagens que não são exibidas corretamente

As imagens podem ser exibidas de forma diferente do esperado, mas isso pode acontecer porque a própria imagem não é compatível com a finalidade para a qual você a está usando no tema. Verifique se as dimensões da imagem que você está usando estão corretas. Confira a lista de problemas comuns de exibição que podem ocorrer no upload de uma imagem incompatível:

Se o cabeçalho for maior e a imagem do logo for menor do que o previsto, a causa pode ser o espaço em branco no arquivo da imagem do logo. Nesse caso, espaços em branco podem fazer com que o logo seja exibido em tamanho menor e o cabeçalho em tamanho maior. Edite esse arquivo para verificar se ele está cortado ao redor do logo e se não há espaço em branco.
Se a imagem da apresentação de slides estiver sendo cortada, isso é feito por padrão para garantir a uniformidade entre dispositivos móveis e computadores. Como o conteúdo aparece muito menor em uma tela de dispositivo móvel, há muitas informações que podem ser perdidas com a redução do conteúdo. Para evitar isso, o conteúdo é cortado. Uma imagem em retrato, mais alta do que larga, também pode ocupar um espaço significativo na área de trabalho. É por isso que as imagens da apresentação de slides têm uma altura máxima. Adicione um ponto focal para garantir que ele seja sempre o centro da imagem da apresentação. Se o ponto focal não ajudar, tente encontrar uma imagem que funcione em todos os tamanhos de tela. Saiba mais sobre as práticas recomendadas para apresentações de slides.
Se uma imagem GIF não for exibida corretamente e tiver sido adicionada à vitrine com o editor de rich text, como na descrição do produto ou em um post do blog, o problema poderá ser o tamanho da imagem. Para corrigir isso, clique no GIF no editor de rich text e, depois, em Editar imagem. No menu suspenso Tamanho da imagem, selecione Original. Em seguida, redimensione o GIF: clique e arraste os cantos da imagem para dentro para torná-la menor ou para fora para torná-la maior.
Se suas imagens têm uma alteração significativa de cor na vitrine em relação à imagem original, elas podem não estar em cores do padrão azul verde-vermelho (sRBG, na sigla em inglês). Para corrigir essa alteração, salve o arquivo como sRGB em um app de edição de fotos. Os termos comuns para isso são "Otimização para web", "Ajustar imagem para web" ou "Salvar para a web". Saiba mais sobre perfis de cores.
Se as imagens de produtos nas páginas de coleção não estão alinhados, talvez seja necessário fazer um ajuste nos arquivos para que a proporção seja a mesma na altura e na largura. Depois, faça upload da imagem de novo. Também é possível usar um app de edição de imagens da Shopify App Store.

Exibição incorreta de produtos ou coleções

Se há produtos faltando na vitrine, talvez seja necessário revisar o Status e os Canais de vendas na seção Publicação do produto no admin da Shopify. Verifique se o status é Ativo e se o produto está disponível na Loja virtual.

Se há coleções faltando na vitrine, talvez seja necessário analisar os Canais de vendas na seção Publicação da coleção no admin da Shopify. Verifique se a coleção está disponível na Loja virtual. Talvez você também queira adicioná-la aos menus.

Se as coleções estão sendo exibidas, mas há produtos faltando, talvez seja necessário analisar os filtros de tag da coleção nas configurações de Menus. Verifique se não há tags no campo Filtrar coleção com tags que possam impedir a exibição dos produtos.

Se a moeda não for exibida corretamente em produtos ou coleções, revise o item Exibição da moeda na seção Padrões da loja em Configurações > Geral para garantir que não há código adicional. Saiba mais sobre como formatar a exibição da moeda para os clientes.

Se alguns produtos ou coleções estão sendo exibidos de maneira diferente de outros, talvez seja necessário revisar o Modelo de tema atribuído no admin da Shopify.

Conteúdo traduzido não exibido corretamente

Se o conteúdo traduzido não for exibido corretamente ou estiver ausente na vitrine, talvez haja traduções desatualizadas ou ausentes. O conteúdo também pode estar em um modelo específico para um mercado. Sempre que você adicionar conteúdo no seu idioma padrão, execute a tradução automática outra vez ou inclua manualmente as novas traduções.

Os seguintes status podem ser aplicados ao conteúdo traduzido:

Traduzido: o conteúdo tem traduções disponíveis.
Desatualizado: o conteúdo no idioma-padrão foi atualizado, mas as traduções não refletem nenhuma atualização.
Não traduzido: não há traduções para esse tipo de conteúdo.

Ao revisar o conteúdo traduzido, atualize as partes não traduzidas ou desatualizadas para garantir a exibição correta.

Saiba mais sobre como como traduzir e localizar a loja.

Atualizações no editor de temas que não são exibidas na vitrine

Se a vitrine e o editor de temas não exibirem as mesmas informações, revise o modelo de tema que você está editando e, se necessário, faça atualizações para corrigir o problema. A contextualização da loja permite criar vitrines diferentes para diferentes mercados e mostrar conteúdo traduzido. Talvez você tenha trabalhado inadvertidamente em um mercado específico ou B2B ao fazer atualizações. Localize o conteúdo com o menu suspenso Contexto no editor de temas para garantir que ele esteja nos mercados corretos.

Saiba mais sobre contextualização da loja.

Diferenças no tema entre exibições em dispositivos móveis e em desktop

Todos os temas disponíveis na loja de temas da Shopify são responsivos, o que significa que eles se adaptam ao tamanho da tela. No editor de temas, você pode alternar o tamanho da tela enquanto edita o tema para garantir que as páginas e imagens sejam exibidas corretamente. Saiba mais sobre como visualizar diferentes tamanhos de tela no editor de temas.

É possível personalizar as configurações para dispositivos móveis de muitas das seções e blocos. Por exemplo, é possível definir o Número de colunas em dispositivos móveis na seção Produtos relacionados. Você pode analisar as configurações de seção relacionadas a dispositivos móveis para cada tipo de página a fim de solucionar problemas de exibição nos tamanhos de tela desejados.

Alguns recursos de temas podem ser exibidos de forma diferente em dispositivos móveis e em desktop para garantir que o tema seja acessível em todos os tamanhos de tela. Por exemplo, em um tamanho de tela para desktop, uma apresentação de slides pode ter uma sobreposição de texto, onde o texto é exibido sobre a imagem, geralmente com uma opacidade de cor ou sombra de texto. Porém, em tamanhos de tela para dispositivos móveis, o texto pode ser exibido abaixo da apresentação de slides. Esse é um recurso de acessibilidade projetado para que o texto seja legível em qualquer tamanho de tela. Se o texto fosse uma sobreposição, ele seria exibido em um tamanho muito pequeno em dispositivos móveis, dificultando a leitura.

Se a seção de coleção em destaque ou as páginas de coleção exibirem tamanhos inconsistentes, ou não estiverem alinhadas ao visualizar a vitrine no dispositivo móvel, isso pode ser causado por proporções inconsistentes. Grades de imagem, como imagens de produto exibidas em uma coleção ou coleção em destaque, são criadas para serem responsivas ao tamanho da tela. Se você tiver proporções inconsistentes para as imagens no grade, elas poderão ser exibidas de forma diferente, dependendo do tamanho da tela. Imagens de produto quadradas com dimensões de 2048 px por 2048 px geralmente ficam melhores em grades de produtos. Atualize as imagens para que tenham uma proporção consistente para otimização em todos os tamanhos de tela. Saiba mais sobre proporção de imagens.

Editor de Rich text

Às vezes, o código HTML adicionado no editor de rich text entra em conflito com o código do tema. Se o problema ocorrer em uma única página, como página de produto, página ou post do blog, a causa poder ser um código HTML extra adicionado ao copiar e colar texto de outro site.

Revisar o código HTML

Revise o código HTML no editor de rich text.

Etapas:

Navegue até a página no admin.
Clique no botão </> Exibir HTML para revisar o código HTML.
Localize o código HTML que possa causar problemas de exibição e remova-o.
Clique em Salvar.

Limpar a formatação

É possível destacar uma parte do texto e limpar a formatação em HTML.

Etapas:

Navegue até a página no admin.
Realce o texto com os problemas de formatação.
Clique no botão 🚫.
Clique em Salvar.

Saiba mais sobre o editor de rich text.

A página está redirecionando para um URL não compatível

Se a vitrine inclui código que redireciona os usuários para URLs que não estão conectados a ela, verifique se o redirecionamento foi desativado quando você acessar o editor de temas.

Por exemplo, esse tipo de redirecionamento pode ser adicionado a uma vitrine a fim de direcionar os clientes para diferentes vitrines da Shopify, de acordo com a localização dessas pessoas. Esse tipo de código de redirecionamento pode existir em seu tema ou em um app que você instalou.

Para garantir que o redirecionamento não interfira na experiência do editor, use uma referência à variável window.Shopify.designMode em JavaScript para desativar o redirecionamento quando você acessar o editor de temas. Essa variável é definida como true se a vitrine for carregada no editor e como false se não for.

Mensagens de erro de código

Caso haja um erro de sintaxe no código do tema, uma mensagem de aviso HTML error found ou Theme error aparecerá no editor de temas com a informação do arquivo Liquid que contém o erro.

Uma mensagem de aviso The theme you're looking for couldn't be found pode ser exibida quando houver código HTML quebrado. Há vários motivos para uma página não ser carregada no editor de temas, incluindo:

Problemas de conexão de rede
Código do Liquid inválido no tema

É possível localizar as alterações no código do tema e fazer a devida correção ou reverter o arquivo para a versão anterior à alteração.

Etapas

Clique no arquivo da seção .liquid que está vinculado na mensagem de erro ou analise as alterações recentes nos arquivos. Essa ação direciona você para a página Editar HTML/CSS e abre o arquivo no editor de códigos.
Procure no arquivo o código HTML ou Liquid inválido. O editor de códigos mostra os possíveis erros de sintaxe em vermelho. Os problemas mais comuns incluem:
- Tags HTML de fechamento extras, por exemplo, uma tag de fechamento </div> sem tag de abertura <div>
- Tags HTML não fechadas extras, por exemplo, uma tag de abertura <div> sem tag de fechamento </div>
- Tags HTML com erro de sintaxe, por exemplo, <div class="my-class" sem >
- Código Liquid com erro de sintaxe
- HTML quebrado em um arquivo snippet do tema incluído
Depois de encontrar o problema, corrija o código no arquivo do tema ou selecione uma versão anterior em Alterações recentes para reverter o código.
Clique em Salvar.
Clique em Personalizar para retornar ao editor de temas e confirme se a mensagem de erro desapareceu.
Navegue até a vitrine para garantir que a exibição está correta.