Seletores de Idioma para Temas Shopify: Personalização e Solução de Problemas

O seletor de idioma do Shopify é um excelente recurso visual que oferece mais controle aos seus usuários. Se ele estiver ausente, posicionado no local errado ou não aparecer após a alteração ou atualização do seu tema, você ficará feliz por ter encontrado este artigo!

Primeiro, não entre em pânico. O seletor de idioma não armazena nenhum dado de tradução, então basta tornar o dispositivo visível novamente no seu site. Continue lendo e, em menos de 10 minutos, você será capaz de identificar com precisão qual dos três suspeitos habituais — atualizações de tema, idiomas não publicados ou peculiaridades de carregamento lento — é o culpado e implementar a solução necessária.

Principais Conclusões

• Os seletores de idioma da Shopify são apenas gatilhos visuais que não afetam os dados de tradução ou o SEO de seu site.
• A maioria dos problemas de "desaparecimento do alternador" está relacionada a atualizações de temas, idiomas não publicados ou cabeçalhos com carregamento lento.
• O que parece ótimo no desktop geralmente fica oculto no celular, portanto, sempre teste em pontos de interrupção comuns.
• Se os truques visuais não forem suficientes, a abordagem daWeglot lhe dá flexibilidade real para posicionamento e estilo sem sacrificar a qualidade da tradução.

Configuração de idiomas e métodos de tradução

Primeiro, antes mesmo de um seletor de idioma aparecer, sua loja Shopify precisa oferecer mais de um idioma. Se você já configurou suas traduções, sinta-se à vontade para avançar para a próxima seção. Caso contrário, veja aqui como começar...

Vá para Configurações > Idiomas > Adicionar idioma. Escolha entre mais de 20 opções compatíveis, com tudo disponível, do espanhol ao japonês. Lembre-se de que é necessário clicar em Publicar ao lado de cada idioma para que as traduções sejam disponibilizadas aos clientes. Se essa etapa não for cumprida, seu novo switcher não terá nada para trocar.

O aplicativo Translate & Adapt incorporado da Shopify é uma opção para uma loja multilíngue. Ele traduz automaticamente seu conteúdo principal para dois idiomas gratuitamente, diretamente da seção Configurações > Aplicativos, depois de adicionar seus idiomas.

Para controle em massa, exporte os dados de idioma do seu site como um CSV em Settings > Languages > Export. Edite as traduções em massa e depois reimporte - o segredo é nunca tocar no código Liquid dentro dos colchetes {{ }} ou {% %}. Esse é o mecanismo de tema do Shopify, não o texto simples.

Se você preferir o controle manual total, a Shopify permite que as lojas gerenciem até 20 idiomas. Procure em Configurações > Idiomas > Ações > Solicitar traduções para solicitar serviços de tradução profissional diretamente de seu painel da Shopify.

Depois que seus idiomas forem publicados e as traduções forem aplicadas, você estará pronto para lidar com o switcher.

Localizando e configurando o alternador integrado do seu tema

O seletor de idioma do tema do Shopify fica escondido à vista de todos, mas só se você souber onde procurar!

Para os temas Dawn, Craft e Refresh, o alternador está escondido na Online Store > Temas > Personalizar > Rodapé.

Ative o botão de alternância do seletor de idiomas e ele aparecerá na parte inferior do site. Esses temas bloqueiam o seletor no rodapé, portanto, colocá-lo no cabeçalho requer código extra - não há alternância integrada para colocação no topo da página.(Dica: mostraremos como fazer isso na seção Como adicionar um seletor de idioma ao meu cabeçalho do Shopify? abaixo).

O Sense e o Studio mantêm as coisas igualmente simples. Seu personalizador de temas oferece o alternador apenas nas configurações do rodapé. Procure por "Language selector" ou "Localization" - é aí que a alternância acontece. Novamente, o posicionamento do cabeçalho não é possível, a menos que você tenha confiança para adicionar trechos de código personalizados.

Temas premium como Prestige, Impulse e Motion geralmente incluem o posicionamento do cabeçalho em Configurações do tema > Cabeçalho ou nas seções "Idioma e moeda". Vale a pena examinar os painéis do cabeçalho e do rodapé em busca de recursos de edição - alguns temas oferecem mais opções criativas do que outros.

Se você ainda estiver usando um tema antigo, eles são anteriores às atualizações da Loja Online 2.0 da Shopify. Adicionar ou mover o seletor significa acessar o código, geralmente dentro do footer.liquid. O seletor de idioma geralmente é codificado, portanto, a personalização do posicionamento significa editar diretamente o HTML e a marcação Liquid.

Os ajustes visuais dependem de seu tema. A maioria dos alternadores mostra bandeiras, nomes de idiomas ou ambos. As fontes e cores seguem o estilo de seu site, a menos que sejam substituídas manualmente.

Os compradores móveis têm uma experiência ligeiramente diferente. A maioria dos temas oculta o seletor de idioma abaixo de 768px para manter o carrinho e a navegação claros, às vezes deixando-o visível através de rodapés ou menus expansíveis.

Quando Weglot se torna sua melhor opção

Quando as opções integradas da Shopify começam a parecer apertadas, Weglot oferece toda a liberdade de que você precisa!

"Se estiver buscando mais de dois idiomas adicionais, quiser estilizar seu alternador para combinar com sua marca, deseja alternar automaticamente a localização geográfica ou precisa de acionadores de idiomas no cabeçalho e no rodapé, Weglot lhe dá a liberdade de fazer isso e muito mais."

- Eugène Ernoult, CMO da Weglot

A configuração é rápida. Instale o aplicativo, escolha seus idiomas e o seletor Weglotaparecerá instantaneamente. Se você quiser torná-lo ultra acessível, basta usar o truque do menuWeglot. Coloque Weglot em qualquer link de navegação para criar um seletor de idioma clicável onde quiser, em menos tempo do que leva para dizer“et voilà”.

A personalização visual é fácil quando você tem Weglot na sua equipe. Nosso painel permite que você visualize as alterações em seu switcher em tempo real, ignorando qualquer complexidade. Ajuste o posicionamento, o estilo ou os ícones, e o que você vê é o que os clientes recebem.

Além disso, Weglot é carregado com um script assíncrono com menos de 100 KB, portanto, não prejudicará seu Core Web Vitals. Certifique-se de executar seu site no PageSpeed Insights para ver por si mesmo.

{{ai-banner}}

Como faço para adicionar um seletor de idioma ao meu cabeçalho da Shopify?

Vá para Theme Customizer > Header > Add block > Custom Liquid.

Se você quiser o alternador nativo da Shopify em seu cabeçalho, copie o código do formulário de localização do arquivo footer.liquid do seu tema. Esse formulário normalmente começa com uma tag de localização e altera o parâmetro de localidade em sua URL quando os clientes escolhem um novo idioma.

Envolva esse código em um contêiner com nomes de classe exclusivos para estilização. Para garantir que o seletor fique acima de menus fixos ou pop-ups, adicione CSS como z-index: 10000. Essa pequena etapa o mantém visível e sem problemas.

Para os usuáriosWeglot , a configuração é ainda mais fácil. Use este código:

<div id="weglot_here"></div>

em seu bloco Custom Liquid. Weglot detecta instantaneamente esse contêiner e coloca-o em seu switcher de forma organizada.

Após a configuração, sempre teste seu fluxo de checkout. Às vezes, os temas usam arquivos de cabeçalho ou layouts separados durante o checkout, portanto, seu alternador pode não aparecer a menos que esses arquivos recebam a mesma atualização.

Problemas comuns e correções rápidas

Os seletores de idioma às vezes desaparecem após uma atualização de tema, instalação de aplicativo ou ajuste de layout. Não se preocupe - geralmente são apenas problemas visuais, e não uma falha grave. Vamos solucionar os quatro bloqueios mais comuns.

1. Por que tenho dois seletores de idioma?

Ver dois seletores geralmente significa que tanto o seletor nativo da Shopify quanto a versão do seu aplicativo (como o Weglot) estão ativos ao mesmo tempo. Para arrumar as coisas, vá até a seção Rodapé do Personalizador de temas e desative o seletor de idioma nativo.

Se o seu tema usar um cabeçalho de carregamento lento, o seletor da Weglotpoderá aparecer ou desaparecer à medida que os elementos forem carregados. Para temas em que elementos como cabeçalhos são carregados dinamicamente, Weglot recomenda inicializar manualmente o alternador quando o cabeçalho estiver presente. Isso pode ser feito adicionando seu script Weglot e, em seguida, chamando:

javascript
Weglot.initialize({
	api_key: 'YOUR_API_KEY',  
    // other options
});

Isso é feito quando o cabeçalho estiver totalmente carregado (por exemplo, por meio de um evento DOM ready ou após um pequeno atraso). Isso garante que o alternador apareça sempre no local correto.

Para obter mais orientações sobre a colocação e inicialização personalizadas do seletor, consulte a documentação oficial do seletor de idiomas Weglot .

{{banner-imagem-citação}}

2. Por que meu seletor de idioma desapareceu após uma atualização do tema?

Às vezes, os switchers desaparecem durante a atualização de um tema, mas as traduções raramente são culpadas.

Primeiro, verifique se seus idiomas adicionais ainda estão publicados em Settings > Languages ( Configurações > Idiomas). Se não estiverem marcados como publicados, eles não aparecerão em lugar algum.

Em seguida, abra Online Store > Temas > Personalizar > Rodapé e verifique se a opção Ativar seletor de idioma está ativada. Alguns temas, como o Dawn, redefinem essa configuração para OFF após as atualizações.

Em terceiro lugar, adicione /fr/ ou /es/ ao URL de sua loja. Páginas traduzidas significam que seus dados de idioma estão seguros e que você está apenas solucionando um problema de exibição.

Por fim, sempre visualize seu site em vários dispositivos - um alternador ausente no celular geralmente é um conflito de exibição de CSS, não uma falha de tradução.

3. Por que o seletor de idioma não aparece no celular?

Se o seu seletor de idioma não estiver aparecendo no celular, provavelmente isso é intencional. A maioria dos temas do Shopify usa CSS para ocultar widgets extras abaixo de 768 px, a fim de liberar espaço para os ícones do carrinho e do menu. As Diretrizes de Interface Humana da Apple exigem alvos de toque de 44 x 44 pixels para manter os elementos selecionáveis em telas pequenas.

Para corrigir isso, adicione uma consulta de mídia em seu CSS que fixe o alternador no canto inferior direito para dispositivos móveis, com um valor alto de índice z para mantê-lo no topo. Se você tiver pouco espaço no cabeçalho, coloque o alternador dentro do menu de hambúrguer para dispositivos móveis.

4. O alternador funciona após a atualização, mas não no primeiro carregamento da página?

O alternador do Weglotàs vezes aparece somente após uma atualização manual quando os temas usam cabeçalhos com carregamento lento. No Dawn 15+ e em temas semelhantes, o cabeçalho é desenhado pelo JavaScript após o carregamento da página principal. Weglot injeta seu seletor o mais rápido possível, portanto, se o cabeçalho não estiver pronto, o seletor vai parar em seu local de fallback - geralmente no canto inferior direito - ou pisca após um segundo.

Para resolver isso, defina o sinalizador WGNOTINITIALIZED antes que o script Weglot seja carregado (em theme.liquid). Em seguida, chame Weglot.initialize()manualmente, depois que o cabeçalho for renderizado (usando setTimeout ou um evento DOM ready).

Como alternativa, você pode definir uma posição de fallback no painel do Weglot , como primeiro o cabeçalho e depois o rodapé. Dessa forma, seu alternador sempre aparecerá em algum lugar, mesmo que o cabeçalho demore a chegar!

Sua Checklist completa para implementação

Primeiramente, antes de iniciar qualquer alteração, duplique seu tema usando Online Store > Themes > Actions > Duplicate. Isso lhe dá uma área de segurança para testes e correções.

Em seguida, verifique novamente se todos os idiomas de destino aparecem como Publicados em Configurações > Idiomas. Certifique-se de que o seletor de idioma esteja visível – alguns temas exigem botões de alternância no cabeçalho, outros no rodapé, portanto, verifique ambos os locais.

Experimente o acesso direto ao URL adicionando /es/ ou /fr/ ao endereço de sua loja. Se essas páginas carregarem, suas traduções estão prontas e somente o posicionamento do alternador precisa de atenção. Visualize sua loja em tamanhos inovadores (375 px, 768 px e 1920 px) usando dispositivos reais para detectar qualquer peculiaridade responsiva.

Abra o Chrome DevTools para medir o tempo de carregamento do script. Um switcher lento significa problemas para os compradores. Sempre execute uma compra de teste em todos os idiomas, pois os modelos de checkout adoram surpreender você. Por fim, documente todas as suas configurações antes de atualizar o tema. Dessa forma, você se recuperará rapidamente de qualquer redefinição inesperada.

Se você está pronto para uma troca instantânea e sem frustrações, com a Weglot, as mudanças de idioma estão a um clique de distância. Experimente nosso teste gratuito de 14 dias e veja como a venda multilíngue pode ser fácil.