Solução de problemas do tema da loja virtual

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

• Se o cabeçalho é exibido maior e a imagem do logo menor do que o esperado, isso pode ocorrer por causa de espaços em branco no arquivo de imagem do logo. Os espaços em branco no arquivo podem fazer o logo parecer menor, e o cabeçalho, maior. Edite o arquivo de imagem para garantir que a imagem esteja cortada rente ao logo, sem espaços em branco.
• Se a imagem da apresentação de slides estiver sendo cortada, saiba que isso é intencional para garantir que as imagens sejam exibidas da mesma forma em dispositivos móveis e no desktop. Como o conteúdo é exibido em um tamanho muito menor na tela de um dispositivo móvel, muitos detalhes podem ser perdidos com a redução do conteúdo. Por isso, o conteúdo é cortado para garantir que os detalhes não se percam. Uma imagem em modo retrato (mais alta que larga) também pode ocupar um espaço considerável no desktop. É por isso que as imagens da apresentação de slides têm uma altura máxima. É possível adicionar um ponto focal às imagens da apresentação de slides para garantir que o ponto focal seja sempre o centro da imagem na apresentação.

  Opção de altura adaptável: muitos temas da Shopify incluem uma configuração de altura adaptável para apresentações de slides que ajusta a altura da apresentação para corresponder à do primeiro slide de imagem, o que reduz o corte em diferentes tamanhos de tela. Esse recurso está disponível em todos os temas compatíveis desenvolvidos pela Shoify.

• Se uma imagem GIF não estiver sendo exibida corretamente e tiver sido adicionada à vitrine virtual com o editor de rich text, como na descrição do produto ou em um post do blog, o problema pode ser o tamanho da imagem. Para corrigir, clique no GIF no editor de rich text e, depois, em Editar imagem. No menu suspenso Tamanho da imagem, selecione Original. Depois, redimensione o GIF: clique e arraste os cantos da imagem para dentro para diminuí-la ou para fora para aumentá-la.
• Se as cores das imagens na vitrine virtual estiverem muito diferentes das originais, pode ser que elas não estejam no padrão de cores sRBG (vermelho, verde e azul). Para corrigir essa alteração, salve o arquivo em um app de edição de fotos como sRBG. Termos comuns para essa ação são “Otimizar para a web”, “Ajustar imagem para a web” ou “Salvar para a web”. Saiba mais sobre perfis de cores.
• Se as imagens dos produtos nas páginas de coleção não estiverem alinhadas, talvez seja preciso ajustar a proporção nos arquivos de imagem do produto para que todas tenham a mesma relação entre altura e largura e, depois, fazer novamente o upload da imagem. Você também pode usar um app de edição de imagem da Shopify App Store.

Analise os itens a seguir para encontrar seu problema específico e as etapas para solucioná-lo:

• Produtos ausentes: se os produtos não aparecem na vitrine virtual, convém analisar o Status e os Canais de vendas na seção Publicação do produto no admin da Shopify. Verifique se o status do produto é Ativo e se ele está disponível na Loja virtual.
• Coleções ausentes: se as coleções não aparecem na vitrine virtual, convém 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 e se foi adicionada aos menus.
• Coleções exibidas, mas sem produtos: se as coleções são exibidas, mas faltam produtos, convém analisar os filtros de tags 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.
• Moeda incorreta: se a moeda não está sendo exibida corretamente para produtos ou em coleções, convém analisar a Exibição da moeda na seção Padrões da loja em Configurações > Geral para verificar se não há nenhum código adicional. Saiba mais sobre como formatar a exibição da moeda para os clientes.
• Alguns produtos são exibidos de forma diferente: se alguns produtos ou coleções são exibidos de forma diferente dos outros, analise o Modelo de tema atribuído a eles no admin da Shopify.
• Não é possível editar modelos de produto ou de coleção: se os modelos-padrão de produto ou de coleção aparecem esmaecidos e não clicáveis no editor de temas, é preciso disponibilizar pelo menos um produto ou uma coleção para o canal de vendas Loja virtual. Não é possível editar esses modelos-padrão sem ter produtos ou coleções disponíveis para pré-visualizar as alterações. Saiba mais sobre como alterar a disponibilidade de uma coleção e como definir a disponibilidade de produtos nos canais de vendas.

Se o conteúdo traduzido não for exibido corretamente ou estiver ausente na vitrine virtual, pode haver traduções desatualizadas ou ausentes para ele. O conteúdo também pode estar em um modelo específico para um mercado. Sempre que adicionar conteúdo novo no idioma-padrão, lembre-se de executar a tradução automática novamente ou de adicionar novas traduções manualmente.

Os status a seguir podem se aplicar 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 as atualizações.
• Não traduzido: não há traduções para esse tipo de conteúdo.

Ao analisar o conteúdo traduzido, atualize todo conteúdo não traduzido ou desatualizado para que seja exibido corretamente.

Saiba mais sobre como traduzir e localizar a loja.

Se a vitrine virtual e o editor de temas não exibirem as mesmas informações, analise o modelo de tema que você está editando. Talvez seja necessário editar os modelos de tema para exibir as informações corretas.

As substituições de mercado permitem criar vitrines virtuais diferentes para mercados distintos e exibir conteúdo traduzido. É possível que, sem querer, você tenha trabalhado em um mercado específico ou no B2B ao fazer atualizações. Localize o conteúdo com o menu suspenso Mercado no editor de temas para confirmar que ele está nos mercados corretos.

Saiba mais sobre substituições de mercado.

Todos os temas disponíveis na Loja de temas da Shopify são responsivos, o que significa que o tema se adapta ao tamanho da tela. No editor de temas, é possível alternar a visualização do tamanho da tela durante a edição para verificar se as páginas e as imagens são exibidas corretamente. Saiba mais sobre como visualizar diferentes tamanhos de tela no editor de temas.

Muitas seções e blocos têm configurações para dispositivos móveis que podem ser personalizadas. Por exemplo, é possível definir o Número de colunas no celular na seção Produtos relacionados. Analise as configurações da seção relacionadas a dispositivos móveis em cada modelo para solucionar problemas de exibição nesses tamanhos de tela.

Alguns recursos do tema podem ser exibidos de forma diferente em dispositivos móveis e em desktops para garantir que o tema seja acessível em todos os tamanhos de tela. Por exemplo, em um desktop, a apresentação de slides pode ter uma sobreposição de texto, na qual o texto é exibido sobre a imagem, muitas vezes com uma opacidade de cor ou sombra de texto. No entanto, em telas de dispositivos móveis, o texto pode aparecer abaixo da apresentação de slides. Esse é um recurso de acessibilidade intencional para que o texto seja legível em qualquer tamanho de tela. Se o texto fosse uma sobreposição, ficaria muito pequeno no celular, dificultando a leitura.

Se a seção da coleção em destaque ou as páginas de coleção exibirem tamanhos inconsistentes ou não estiverem alinhadas ao visualizar a vitrine virtual em dispositivos móveis, isso pode ocorrer devido a proporções de imagem inconsistentes. As grades de imagem, como as 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 nas imagens da grade, elas poderão ser exibidas de forma diferente, dependendo do tamanho da tela. Imagens de produto quadradas com 2048 px por 2048 px costumam funcionar melhor 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 a proporção da imagem.

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

Analisar o código HTML

É possível analisar o código HTML no editor de rich text.

Etapas:

1. Acesse a página no admin.
2. Clique no botão Exibir HTML para analisar o código HTML.
3. Localize e remova qualquer código HTML que possa estar causando problemas de exibição.
4. Clique em Salvar.

Limpar a formatação

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

Etapas:

1. Acesse a página no admin.
2. Destaque o texto com os problemas de formatação.
3. Clique no botão 🚫.
4. Clique em Salvar.

Saiba mais sobre o editor de rich text.

Se a vitrine virtual incluir um código que redireciona os usuários para URLs não conectadas à sua loja, verifique se o redirecionamento foi desativado ao visitar o editor de temas.

Por exemplo, esse tipo de redirecionamento pode ser adicionado a uma vitrine virtual para direcionar os clientes a diferentes lojas na Shopify, dependendo do local deles. Esse tipo de código de redirecionamento pode existir no seu tema ou em um app que você instalou.

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

Se você tiver blocos recolhíveis ou outros blocos de temas exibindo o mesmo conteúdo em todas as páginas de produto, será necessário configurar origens dinâmicas com metacampos. Isso geralmente acontece quando os lojistas adicionam informações específicas do produto, como ingredientes ou instruções de cuidados, a um produto, mas elas são exibidas em todos os produtos.

Blocos recolhíveis exibem o mesmo texto em todos os produtos

Quando você adiciona conteúdo diretamente a um bloco recolhível no editor de temas, esse conteúdo aparece em todas as páginas de produto. Para exibir conteúdo específico do produto, você precisa usar origens dinâmicas com metacampos:

1. No admin da Shopify, acesse Configurações > Metacampos > Produtos.
2. Clique em Adicionar definição.
3. Insira um Nome para o metacampo e clique em Selecionar tipo de conteúdo.
4. Selecione Texto e Texto de várias linhas.
5. Clique em Salvar.
6. Acesse uma página de produto no admin e role até a seção de metacampos na parte inferior da página.
7. Adicione o conteúdo específico do produto ao metacampo que você criou.
8. No editor de temas, acesse o modelo de produto e encontre a seção Linha recolhível.
9. Na configuração Conteúdo da linha, clique no botão .
10. Selecione seu metacampo nas opções disponíveis.
11. Salve as alterações.

Agora, cada produto exibirá o próprio conteúdo quando o metacampo for preenchido, e nenhum conteúdo será exibido se o metacampo estiver vazio para esse produto.

Saiba mais sobre como exibir metacampos na loja virtual e como usar metacampos e metaobjetos com origens dinâmicas.

Se houver um erro de sintaxe no código do tema, uma mensagem de aviso de Erro de HTML encontrado ou Erro de tema será exibida no editor de temas. A mensagem de erro exibe o arquivo Liquid que contém o erro.

Uma mensagem de aviso O tema que você procura não foi encontrado poderá ser exibida quando houver um HTML corrompido. Uma página pode não carregar no editor de temas por vários motivos, como os seguintes:

• problemas de conexão de rede
• código Liquid inválido no tema

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

Etapas:

1. Clique no arquivo da seção .liquid vinculado na mensagem de erro ou analise os arquivos para ver as alterações recentes. Você será redirecionado para a página Editar HTML/Folhas de Estilo em Cascata (CSS), e o arquivo será aberto no editor de código.
2. Analise o código no arquivo e tente encontrar HTML ou Liquid inválido. O editor de código exibe possíveis erros de sintaxe em vermelho. Os problemas mais comuns são os seguintes:
   • Tags HTML de fechamento extras, por exemplo, uma </div> de fechamento sem uma <div> de abertura.
   • Tags HTML de abertura extras, por exemplo, uma <div> de abertura sem uma </div> de fechamento.
   • Tags HTML malformadas, por exemplo, <div class="my-class" sem >.
   • Código Liquid malformado
   • HTML com erro em um arquivo de snippet de tema incluído
3. Depois de encontrar o problema, corrija o código no arquivo do tema ou reverta-o selecionando uma versão anterior em Alterações recentes.
4. Clique em Salvar.
5. Clique em Editar tema para voltar ao editor de temas e confirme que a mensagem de erro desapareceu.
6. Acesse a vitrine virtual para verificar se ela é exibida como esperado.

Erro "Exceeded maximum number of unique handles"

Se uma mensagem de erro do Liquid, como "Exceeded maximum number of unique handles for all_products", for exibida na página inicial, isso geralmente significa que foram adicionadas seções de produtos em destaque em excesso à página inicial (normalmente, mais de 20 seções na maioria dos temas).

Para resolver isso:

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Encontre o tema atual e clique em Editar tema.
3. Acesse a página inicial.
4. Remova algumas seções de Produtos em destaque para não ultrapassar os limites do tema.
5. Considere usar seções de Coleção em destaque, que podem exibir vários produtos com mais eficiência e melhorar o desempenho da loja.

Os ícones de pagamento costumam ser incluídos por padrão no rodapé da maioria dos temas para mostrar aos clientes quais formas de pagamento são aceitas. Se os ícones de pagamento não estiverem aparecendo no rodapé do tema, verifique o seguinte:

1. No editor de temas, acesse a seção Rodapé e verifique se a configuração Mostrar ícones de pagamento está ativada.
2. No admin da Shopify, acesse Configurações > Pagamentos e verifique se há pelo menos uma forma de pagamento ativa. Algumas formas de pagamento podem exigir a conclusão da configuração da conta para que seus ícones sejam exibidos.
3. Se estiver usando um gateway de pagamento de terceiros, talvez os ícones de pagamento não apareçam por limitações da plataforma.

Se você verificou essas configurações e os ícones de pagamento ainda não aparecem, talvez precise buscar atendimento para o tema.