Seletor de idioma do Shopify: como adicioná-lo e personalizá-lo

O seletor de idioma do Shopify é um recurso nativo útil para lojas multilíngues. O dispositivo permite que os clientes visualizem seu site no idioma de sua preferência, possibilitando que sua marca explore novos mercados internacionais. Você também pode personalizar o recurso usando código, para que ele fique mais alinhado com a estética da sua marca.

No entanto, o recurso nativo apresenta algumas desvantagens, incluindo opções limitadas de personalização quando comparado a soluções de terceiros.

Ao integrar um aplicativo de tradução dedicado do Shopify, os proprietários de lojas podem se beneficiar de recursos adicionais que melhoram a funcionalidade, aumentam o envolvimento do usuário e cuidam da parte da tradução propriamente dita. Por exemplo, nosso próprio aplicativo de tradução do Shopify, Weglot, oferece opções exclusivas de design e posicionamento para seu seletor de idiomas, tornando-o adaptável a qualquer layout de loja. Além disso, ele faz muito mais do que apenas permitir que os usuários alternem entre idiomas. Mas falaremos mais sobre isso posteriormente.

Neste artigo, mostraremos como tirar o máximo proveito do seletor de idiomas nativo do Shopify antes de explorar Weglot Shopify, detalhando as melhores práticas para traduzir sua loja e proporcionar uma experiência ideal ao usuário.

Pontos principais

• O seletor de idioma nativo do Shopify oferece suporte a vários idiomas, mas apresenta opções limitadas de personalização em comparação com aplicativos de terceiros.
• Weglot tradução automática de sites e amplas opções de personalização para seu seletor de idiomas. Ela também permite a edição totalmente manual e aprimora o SEO multilíngue, criando URLs específicas para cada idioma e implementando tags hreflang.

Seletor de idioma do Shopify: Visão geral e configuração

Primeiro, vamos dar uma olhada no seletor de idiomas integrado do Shopify. Como mencionamos, esse recurso permite que os proprietários de lojas ofereçam suporte a vários idiomas, o que naturalmente melhora a experiência do usuário (UX) para clientes internacionais.

São suportadas tanto a seleção manual do idioma quanto o redirecionamento automático de idioma com base nas preferências do navegador dos visitantes. Você pode ativar o redirecionamento automático de idioma com base nas preferências do navegador dos visitantes em Loja Online > Preferências > Redirecionamento automático > Idioma, desde que tenha publicado os idiomas relevantes e os tenha disponibilizado em seus mercados-alvo.

Se o comutador nativo atender às suas necessidades, veja a seguir como configurá-lo.

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

Antes mesmo que o seletor de idiomas apareça, sua loja no Shopify precisa, de fato, oferecer mais de um idioma. Se você já configurou suas traduções, fique à vontade para pular para a próxima seção. Caso contrário, veja a seguir 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 integrado “Translate & Adapt” do Shopify é uma opção para uma loja multilíngue. Ele traduz automaticamente seu conteúdo principal para dois idiomas gratuitamente (oito, se sua loja estiver localizada no Reino Unido, na Suíça ou em um dos dez países da União Europeia), diretamente na seção Configurações > Aplicativos, depois que você adicionar seus idiomas.

Para fazer o gerenciamento em massa, exporte os dados de idiomas do seu site como um arquivo CSV em Configurações > Idiomas > Exportar. Edite as traduções em massa e, em seguida, reimporte-as — o importante é nunca alterar o código Liquid dentro dessas chaves {{ }} ou {% %}. Esse é o mecanismo de temas do Shopify, não texto simples.

Se você preferir o controle totalmente manual, o Shopify permite que as lojas gerenciem até 20 idiomas (30 no Shopify Plus). Acesse Configurações > Idiomas > Ações > Solicitar traduções para solicitar serviços de tradução profissional diretamente do seu painel do 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 integrado do Shopify geralmente fica no editor do seu tema, na seção “Cabeçalho ” ou “Rodapé ”. Sua localização exata e as opções de personalização dependem do seu tema e da versão.

Siga estas etapas:

1. No Painel de controle do Shopify, acesse Loja online > Temas > Editar tema.
2. Abra a seção “Cabeçalho” ou “Rodapé”, dependendo de onde você deseja que o seletor apareça.
3. Procure por uma opção como “Ativar seletor de idioma”, “Mostrar seletor de idioma” ou “Localização”.
4. Ative o seletor e clique em “Salvar”.

Quando sua loja tiver vários idiomas publicados disponíveis no mercado do cliente, o seletor deverá exibir as opções de idioma disponíveis.

Os temas gratuitos do Shopify, incluindo Dawn, Craft, Refresh, Sense e Studio, oferecem suporte a seletores de idioma tanto no cabeçalho quanto no rodapé nas versões atuais. Os temas gratuitos do Online Store 2.0 a partir da versão 9.0.0, bem como os temas da família Horizon, permitem a exibição no cabeçalho sem a necessidade de código adicional.

Para temas premium, as opções de posicionamento variam. Por exemplo, o Impulse oferece a seleção de idioma na barra de ferramentas do cabeçalho e no rodapé, enquanto outros temas podem apresentar configurações ou locais diferentes. Consulte a documentação do desenvolvedor do seu tema caso não consiga encontrar a opção.

Temas mais antigos podem oferecer menos opções de personalização. Se o seu tema não for compatível com o posicionamento de sua preferência, talvez seja necessário editar os modelos Liquid dele, mudar para um tema mais recente ou usar um aplicativo de tradução com seus próprios controles de posicionamento.

A aparência do seletor também depende do seu tema. Os seletores integrados geralmente exibem os nomes dos idiomas e seguem as fontes, cores e estilo da sua loja. Alguns temas oferecem configurações adicionais de design, enquanto uma personalização mais abrangente pode exigir o uso de CSS.

Além disso, verifique o layout para dispositivos móveis usando a visualização de temas do Shopify. Dependendo do seu tema, o seletor pode aparecer no rodapé, no cabeçalho ou no menu de navegação para dispositivos móveis. Certifique-se de que os clientes possam encontrá-lo e usá-lo facilmente em telas menores e mantenha o seletor de país/região próximo, caso esteja exibindo os dois.

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

Você pode adicionar um seletor de idioma ao cabeçalho do seu Shopify por meio das configurações integradas ao seu tema ou usar o Switcher Editor do site Weglot para posicionar um seletor personalizável sem precisar editar o código do seu tema.

Para adicionar o seletor de idioma nativo do Shopify, conforme explicado anteriormente, acesse o Painel de controle do Shopify > Loja online > Temas > Editar tema, abra a seção Cabeçalho, procure por “Ativar seletor de idioma” ou uma configuração semelhante, ative o seletor e, em seguida, clique em “Salvar”.

Se você estiver usando o Weglot, acesse Weglot Painel > Configurações > Seletor de idioma > Editor do seletor. Arraste o seletor para o local de seu preferência no cabeçalho e clique em Salvar. Escolha uma área que apareça de forma consistente em todas as páginas da sua loja, para que o seletor permaneça no mesmo lugar enquanto os clientes navegam.

Para um posicionamento mais preciso, o ` Weglot ` também suporta este marcador de posição em HTML:

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

Você pode adicioná-lo a uma seção ou bloco do Custom Liquid na área do cabeçalho do seu tema, se for compatível, ou inseri-lo no arquivo apropriado do tema. O Weglot exibirá então o seletor no local onde o marcador de posição aparece. O posicionamento exato depende do layout do seu tema.

Após a configuração, sempre teste o seletor no computador e no celular, incluindo as páginas de produtos e coleções. Além disso, teste seu fluxo de finalização de compra, pois o Shopify gerencia essa etapa separadamente do cabeçalho da sua loja; portanto, adicionar um seletor nesse local não faz com que ele seja automaticamente adicionado à finalização de compra. Se você estiver usando a integração do Shopify Markets doWeglot, o Shopify gerencia o idioma da finalização de compra com base na seleção anterior do cliente, e o próprio seletor do Weglot não aparece durante a finalização de compra.

Incorporando o Switcher com o Liquid Code

Se o seu tema do Shopify não oferecer as opções de posicionamento ou design do seletor de idioma de que você precisa, é possível criar um seletor personalizado usando o Liquid. Isso exige a edição do código do seu tema; portanto, faça um backup antes de prosseguir.

Para configurar e personalizar o seletor de idiomas do Shopify, você precisará seguir estas etapas:

1. Na página de administração do Shopify, acesse Configurações > Idiomas e adicione os idiomas que deseja oferecer. Certifique-se de que eles estejam disponíveis nos seus mercados-alvo e de que você tenha adicionado as traduções necessárias.
2. Acesse Loja online > Temas e clique em “Editar código” no menu de três pontos do seu tema.
3. Localize o arquivo header.liquid no diretório Sections. O nome exato do arquivo e o ponto de inserção adequado dependem do seu tema; portanto, verifique a estrutura dele antes de fazer alterações.
4. Encontre um local adequado no arquivo header.liquid (geralmente próximo ao menu de navegação) e cole o seguinte snippet de código Liquid:

{% if localization.available_languages.size > 1 %}
  <div class="page-width custom-language-topbar">
    {% form 'localization', id: 'header-language-form' %}
      <div class="shopify-language-switcher">
        <label for="header-language-selector">Language</label>

        <select
          id="header-language-selector"
          name="language_code"
        >
          {% for language in localization.available_languages %}
            <option
              value="{{ language.iso_code }}"
              {% if language.iso_code == localization.language.iso_code %}selected{% endif %}
            >
              {{ language.endonym_name | escape }}
            </option>
          {% endfor %}
        </select>

        <button type="submit">Apply</button>
      </div>
    {% endform %}
  </div>
{% endif %}

A localização do seu código Liquid determina onde o seletor de idioma aparece na página inicial da sua loja. Por exemplo, colocá-lo dentro da área de navegação do cabeçalho pode fazê-lo aparecer ao lado do menu, enquanto colocá-lo em um contêiner separado acima da navegação pode criar uma barra dedicada à seleção de idioma.

Este código utiliza o formulário de localização do Shopify para recuperar os idiomas disponíveis para os clientes. Ele exibe cada idioma pelo nome nativo, como “Français” para o francês, e marca o idioma atual como selecionado. Os clientes escolhem um idioma no menu suspenso e clicam em “Aplicar” para mudar.

Se o seu tema já exibir um seletor de idioma no mesmo local, desative o seletor existente por meio do editor de temas para evitar duplicatas.

5. Você pode usar CSS para controlar o alinhamento, as cores, o espaçamento e as bordas do seletor. No editor de temas, abra Configurações do tema > CSS personalizado e adicione o exemplo a seguir:

.custom-language-topbar {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  padding-bottom: 8px;
}

.custom-language-topbar .shopify-language-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.shopify-language-switcher select {
  font: inherit;
  font-size: 16px;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px;
}

.shopify-language-switcher select:hover {
  border-color: #555;
}

.shopify-language-switcher select:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

6. Depois de fazer suas edições, clique em “Salvar” para aplicá-las. O seletor de idioma deve aparecer agora na sua loja, de acordo com suas preferências. Visualize a aparência da sua loja no computador e no celular.

Melhorando as lojas Shopify com o seletor de idiomas Weglot

Weglot é uma ferramenta de tradução de sites baseada em IA que adiciona um seletor de idioma à sua loja do Shopify sem a necessidade de nenhuma alteração no seu tema. Embora o seletor de idioma nativo do Shopify funcione bem, aplicativos de tradução específicos para o Shopify, como Weglot oferecem mais opções de personalização, além de recursos adicionais de tradução do Shopify para quem deseja realmente localizar a experiência na loja para seus clientes internacionais.

Ao contrário do seletor de idiomas do Shopify, Weglot traduz Weglot 100% do conteúdo do site a partir de uma escolha de mais de 110 idiomas, incluindo páginas de checkout, notificações por e-mail e metadados de SEO, otimizando-o para os motores de busca.

Com a Weglot, toda a sua loja Shopify se beneficia da tradução automática, acelerando os projetos de expansão. Em comparação com a contratação de tradutores individuais para cada idioma, a automação da Weglotreduz significativamente o tempo de lançamento de novas versões de idiomas no mercado.

Entretanto, os recursos da Weglotnão se limitam à tradução automática. Com a Weglot, você obtém controle total de edição sobre o conteúdo traduzido em seu site. Você também pode contratar tradutores profissionais diretamente pela plataforma.

Você também pode gerar instantaneamente traduções alinhadas à identidade da marca com o modelo de tradução por IA do Weglot. Ele aprende com suas instruções, seu glossário e seu histórico de traduções manuais para fornecer imediatamente traduções que levam em conta o contexto e soam como se fossem escritas por você.

Weglot também se integra aos recursos existentes da Shopify e a aplicativos populares de terceiros, incluindo a personalização de temas como Dawn e Prestige. Isso elimina o incômodo de gerenciar várias lojas ou traduções manuais, pois você pode adicionar, publicar, cancelar a publicação ou excluir idiomas conforme necessário.

Weglot oferece mais do que apenas tradução, com benefícios de SEO multilíngue no núcleo do aplicativo. A plataforma cria automaticamente subdomínios ou subdiretórios para cada versão de idioma e implementa tags hreflang, otimizando seu site para mecanismos de pesquisa locais. Além disso, nosso Visual Editor permite a fácil personalização das traduções, possibilitando ajustes para corresponder à voz da sua marca.

O melhor de tudo é que configurar Weglot personalizar seu seletor de idiomas pode ser feito em questão de segundos! Vamos dar uma olhada.

Configuração da Weglot em sua loja Shopify

A configuração do Weglot em sua loja Shopify é muito simples. Aqui está um guia para você começar:

1. Comece visitando a App Store da Shopify:

• Na barra de pesquisa, digite Weglot e localize o aplicativo Weglot .
• Clique em Install (Instalar ) e siga as instruções para adicioná-lo à sua loja.

2. Depois de instalar o aplicativo, você precisará configurar uma conta:

• Abra o aplicativo Weglot em seu painel da Shopify.
• Digite seu endereço de e-mail e escolha uma senha.

3. Configure suas definições de idioma:

• Em seguida, selecione seu idioma original (o idioma de sua loja da Shopify).
• Em seguida, escolha os idiomas de destino para os quais você deseja traduzir seu conteúdo.

Depois de selecionar seus idiomas, Weglot verificará automaticamente todo o conteúdo da sua loja, incluindo metadados e conteúdo de aplicativos de terceiros. A detecção automática significa que você não precisará reunir manualmente o conteúdo para tradução, pois Weglot faz tudo isso para você!

Em seguida, seu site é traduzido instantaneamente por meio de uma tecnologia de ponta de tradução por IA e exibido em subdiretórios ou subdomínios de idiomas, dependendo da estrutura que você escolheu no Painel de Controle do Weglot .

Personalizando o seletor de idiomas Weglot: opções de design e posicionamento

Opções abrangentes de personalização estão disponíveis para o seletor de idiomas Weglot, permitindo que você o adapte à identidade visual da sua loja para um resultado final superprofissional. Veja como personalizá-lo:

1. Acesse o editor do seletor de idiomas visual: acesse Weglot e navegue até Configurações > Seletor de idiomas.
2. Alterar a aparência: Escolha entre vários formatos, como menus suspensos, botões ou bandeirinhas, para exibir as opções de idioma. Por exemplo:
   • Use bandeiras para reconhecimento rápido.
   • Opte por botões para uma exibição mais proeminente.

3. Ajuste a posição: Você pode colocar o alternador em áreas importantes, como cabeçalho, rodapé ou barra lateral, dependendo do que for melhor para o seu layout.
4. Modificar cores e estilos: Personalize as cores e os estilos nas configurações Weglot para alinhar com a marca de sua loja.

É importante ressaltar que o seletor de idioma pode ser reposicionado facilmente sem nenhuma modificação no tema, garantindo que ele permaneça acessível e fácil de usar em diferentes páginas da sua loja. Para posicionamentos avançados, consulte nossa seção abaixo sobre como superar desafios comuns na localização da loja Shopify.

Personalização avançada: Dicas de codificação para desenvolvedores

Para os desenvolvedores que desejam aprimorar suas lojas Shopify com o Weglot, a personalização pode ser fundamental para criar uma experiência multilíngue personalizada. A flexibilidade da Weglotdá aos desenvolvedores o poder de criar experiências multilíngues personalizadas, mantendo a facilidade de uso para usuários não técnicos.

Aqui estão algumas dicas de codificação a serem consideradas:

Usando CSS para ajustar a aparência do seletor de idiomas

Os desenvolvedores podem modificar estilos como cor de fundo, tamanho da fonte e preenchimento para corresponder à marca da loja. Por exemplo:

select {    
background-color: #f0f0f0;    
 border: 2px solid #007bff;    
 border-radius: 5px;    
 padding: 10px;
}

Implementação de JavaScript para funcionalidade personalizada

Os desenvolvedores podem usar o JavaScript para acionar ações específicas quando um idioma é selecionado, como atualizar outros elementos na página ou rastrear alterações de idioma para análise. Por exemplo, você pode implementar um ouvinte de eventos:

document.addEventListener('DOMContentLoaded', function() {
var languageSelector = document.querySelector('select[name="language_code"]');    
 if (languageSelector) {        
  languageSelector.addEventListener('change', function(event) {            
    // Custom functionality here            
     // For example, track language change event            
     console.log('Language changed to: ' + event.target.value);
   });    
 }
});

Implementação do Weglot para transições de página contínuas entre idiomas

Um dos principais recursos do Wegloté a criação automática de URLs específicos para cada idioma, como example.com/fr para as versões francesas do seu site. Uma estrutura de URL sólida garante que os mecanismos de pesquisa possam indexar cada versão de idioma, melhorando seus esforços de SEO multilíngue.

Weglot ajuda os clientes a mudar de idioma facilmente durante a experiência de compra, seja navegando pelos produtos ou fazendo o check-out. Quando um cliente muda de uma página de produto em inglês para uma equivalente em espanhol, por exemplo, ele passa por uma transição fluida sem perder seu lugar na jornada de compras. Esses recursos podem afetar as principais métricas, como o tempo no site e as taxas de conversão, melhorando a satisfação do cliente e, em última análise, impulsionando o crescimento global.

Para dar um exemplo, a Everyone.org, que usou Weglot para criar um site multilíngue em 12 idiomas, teve um aumento de 40% no total de visitantes, com os usuários de língua francesa convertendo quase o dobro da taxa média de conversão em todo o site.

Otimização de SEO multilíngue e manutenção da consistência da página

O SEO multilíngue garante que seus produtos possam ser descobertos por usuários que pesquisam em diferentes idiomas, gerando tráfego on-line. Um aspecto fundamental do SEO multilíngue é ter uma estrutura de URL adequada, e o uso de subdiretórios ajuda os mecanismos de pesquisa a identificar e classificar as páginas de diferentes idiomas.

As tags Hreflang desempenham um papel importante nesse processo, informando aos mecanismos de pesquisa sobre o idioma e a segmentação regional de suas páginas. Isso ajuda a direcionar os usuários para a versão mais relevante do seu site.

Os metadados traduzidos, incluindo tags de título e descrições, contribuem ainda mais para uma melhor visibilidade na pesquisa. Weglot automatiza grande parte do trabalho técnico de SEO, criando automaticamente URLs específicos para cada idioma e implementando tags hreflang sem a necessidade de intervenção manual.

Além disso, Visual Editor o glossário de idiomas Weglotpermitem que os proprietários de lojas mantenham a consistência da tradução.

Para ir mais longe com o SEO multilíngue, os proprietários de lojas da Shopify podem fazer o seguinte:

• Realize pesquisas de palavras-chave localizadas para cada mercado-alvo.
• Garantir que todo o conteúdo, inclusive os metadados, seja traduzido com precisão.
• Revisar regularmente as traduções para refletir as mudanças nas tendências do idioma.

Lembre-se: um SEO multilíngue eficaz pode levar a maiores oportunidades de mercado! Após implementar o Weglot para otimização multilíngue, Ron Dorff, proprietário de uma loja no Shopify, observou um incrível aumento de 400% nas visitas ao site.

Superando desafios comuns na localização de lojas da Shopify

A localização de lojas Shopify traz alguns desafios únicos, mas Weglot oferece soluções eficazes para facilitar o processo.

Para alterar a posição do seletor Weglot em um site Shopify, você pode usar um dos quatro métodos a seguir:

1. Recurso do Switcher Editor

Utilize o Editor do Switcher para arrastar e soltar o seletor de idiomas diretamente em uma visualização ao vivo do seu site. Este método requer que o seu site esteja ativo.

2. Adicionar a um menu

Crie um seletor de idioma personalizado no seu menu principal, vinculando-o às Weglot . Acesse Shopify Admin > Loja online > Navegação, adicione itens de menu para cada idioma usando o formatoWeglot(por exemplo,Weglot para inglês). Você também pode criar um menu suspenso para idiomas.

3. Opção Weglot

Insira o seguinte snippet de código snippet arquivo Theme.liquid, no local desejado:

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

Este código colocará o seletor de idioma onde você inserir o código, resolvendo as limitações comuns de posicionamento discutidas nos fóruns da comunidade.

4. Opção de switcher

Integre manualmente o alternador modificando o código de inicialização Weglot em weglot.liquid. Inclua a opção Switchers e especifique o seletor CSS de destino para onde você deseja que o alternador apareça:

Weglot.initialize({  
api_key: "YOUR_API_KEY",  
 switchers: [{     
  location: { target: ".header-nav" }   
 }]
});

Certifique-se de substituir .header-nav pelo seletor CSS do elemento desejado.

Você também obterá os seguintes benefícios de localização com o uso do Weglot:

• Tradução de conteúdo dinâmico: Weglot traduz com eficácia o conteúdo gerado por JavaScript e os elementos carregados por AJAX, garantindo que todo o conteúdo dinâmico seja capturado e traduzido.
• SEO multilíngue para Shopify: Weglot automatiza a implementação de tags hreflang e cria sitemaps específicos para cada idioma. Isso complementa os recursos de SEO integrados da Shopify, permitindo que os mecanismos de pesquisa forneçam a versão do idioma correto aos usuários.

• Tradução de elementos específicos do Shopify: o Weglot cuida das traduções de toda a sua loja, incluindo páginas de finalização de compra, notificações por e-mail e campos meta, superando as limitações descritas na documentação do Shopify.

• Otimização dos fluxos de trabalho de tradução: Os recursos de memória de tradução e glossário da Weglotajudam você a manter a consistência em um grande catálogo de produtos. Isso garante que os termos sejam traduzidos de maneira uniforme, assegurando que a mensagem de sua marca seja coerente em diferentes idiomas.

Comparação entre Weglot o seletor de idiomas nativo do Shopify

A Shopify fornece aos usuários as ferramentas básicas necessárias para traduzir suas lojas em vários idiomas, mas existem limitações.

Em contraste, Weglot oferece uma solução de tradução abrangente e atende às limitações da Shopify de frente. Como resultado, a plataforma é uma opção mais adequada para usuários que desejam uma abordagem prática para o gerenciamento de conteúdo multilíngue.

Supere as barreiras do idioma: Implemente Weglot em sua loja Shopify

Como vimos, Weglot vantagens únicas para as lojas Shopify, tornando-a a solução ideal para superar as barreiras linguísticas online. Com o seletor de idiomas Weglot, você ganha personalizações adicionais para melhorar a experiência do usuário, enquanto o Visual Editor traduções no contexto, permitindo que você refine o conteúdo sempre que necessário. Você pode até mesmo solicitar traduções profissionais diretamente do painel para obter maior precisão.

Weglot se integra aos aplicativos populares da Shopify, incluindo ferramentas de pesquisa inteligente e galerias de imagens, garantindo que sua loja permaneça totalmente funcional em vários idiomas. Além disso, nossa plataforma cria subdomínios ou subdiretórios específicos para cada idioma, aumentando significativamente seus esforços de SEO.

O melhor de tudo é que Weglot é compatível com todos os sistemas de gerenciamento de conteúdo, ou seja, se você sair do Shopify, não precisará perder os benefícios do Weglot.

Comece hoje mesmo seu teste gratuito de 14 dias com o Weglot e tenha um site multilíngue em poucos minutos!

Problemas comuns e correções rápidas

Os seletores de idioma às vezes desaparecem após uma atualização do tema, a instalação de um aplicativo ou um ajuste no layout. Esses problemas geralmente estão relacionados às configurações do tema ou ao posicionamento do seletor. Vamos resolver os quatro problemas mais comuns.

1. Por que tenho dois seletores de idioma?

Ver dois seletores geralmente significa que tanto o seletor nativo do Shopify quanto a versão do seu aplicativo (como Weglot) estão ativos ao mesmo tempo. Você também pode ter mais de um seletor Weglot configurado.

Comece abrindo o Painel de controle do Shopify > Loja online > Temas > Editar tema. Verifique se há o seletor de idioma nativo do Shopify no cabeçalho e no rodapé; desative-o caso esteja usando o Weglot e salve as alterações. A configuração exata depende do seu tema. Além disso, mantenha o seletor de país/região ativado caso os clientes precisem dele para escolher seu mercado.

Se ambos os seletores pertencerem a Weglot, acesse Weglot Painel > Configurações > Seletor de idioma > Editor de seletores. Verifique quais seletores estão configurados e se estão definidos para aparecer nos mesmos tamanhos de tela. O Weglot oferece suporte a seletores separados para desktop e dispositivos móveis; portanto, certifique-se de que eles não estejam aparecendo juntos acidentalmente.

Se você adicionou links de idiomas à navegação do Shopify, verifique se eles estão aparecendo ao lado do seletor padrão d Weglot. Remova quaisquer itens de menu redundantes caso não precise dos dois.

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 .

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

Se o seletor de idioma desaparecer após a atualização do seu tema do Shopify, isso não significa necessariamente que suas traduções tenham sido perdidas. O problema pode estar nas configurações do seletor ou na sua localização no tema atualizado.

Teste uma das URLs traduzidas da sua loja, como yourstore.com/fr/, caso sua configuração utilize subdiretórios de idioma. Se a página exibir o conteúdo traduzido, mas o seletor de idioma não estiver presente, o problema pode estar na exibição do seletor, e não nas próprias traduções.

Se você estiver usando o seletor integrado do Shopify, verifique se os idiomas adicionais ainda estão publicados em Configurações > Idiomas. Se não estiverem marcados como “Publicados”, eles não aparecerão em lugar nenhum.

Se você estiver usando o ` Weglot`:

1. Verifique se a opção “ Weglot ” está ativada: abra Loja Online > Temas > Editar tema > Integrações de aplicativos, localize “ Weglot ” e ative-a caso esteja desativada. Clique em “Salvar” e verifique a página inicial da sua loja.
2. Redefina a posição do seletor: se ele ainda não estiver aparecendo, acesse o Painel doWeglot > Configurações > Seletor de idioma > Editor do seletor. Na seção “Posição”, selecione “Redefinir para a posição padrão”. Isso fará com que o seletor volte para o canto inferior direito.

3. Escolha uma nova posição, se necessário: caso o seletor reapareça, sua localização anterior pode não funcionar mais com o seu tema atualizado. Use o Editor do Seletor para arrastá-lo para uma nova posição dentro de um elemento que apareça de forma consistente em toda a sua loja e, em seguida, clique em Salvar.

Se você adicionou manualmente o seletor do Weglot ao código do seu tema, verifique se a atualização manteve o posicionamento personalizado. Por exemplo, se você usava anteriormente <div id="weglot_here"></div>, verifique se ele ainda está no local pretendido. Caso tenha sido removido, restaure-o a partir da versão anterior do tema, após verificar se o posicionamento é compatível com o layout atualizado.

Além disso, verifique a exibição da sua loja tanto no computador quanto no celular. Se o seletor funcionar no computador, mas não no celular, isso pode ser causado pelas configurações de visibilidade relacionadas ao tamanho da tela ou pelo layout para celular do seu tema. É isso que abordaremos a seguir.

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

Se o seletor de idioma do Shopify aparecer no computador, mas desaparecer no celular, ele pode estar oculto pelo layout para celular do seu tema ou configurado para ser exibido apenas em telas maiores.

Se você estiver usando o seletor integrado do Shopify, acesse Loja online > Temas > Editar tema e selecione a visualização para celular. Verifique se o seletor de idioma aparece no rodapé, no cabeçalho ou no menu do celular, dependendo do seu tema. Se ele não estiver presente, verifique se a configuração correspondente do seletor de idioma está ativada. Alguns temas podem exigir personalizações adicionais para exibi-lo no local de sua preferência no celular.

Se você estiver usando o ` Weglot`:

1. Abra o Painel doWeglot > Configurações > Seletor de idioma > Editor do seletor.
2. Selecione seu switcher atual no menu suspenso no canto superior esquerdo. Em Comportamento > Exibir em tamanhos específicos de tela, verifique se ele está configurado para aparecer em dispositivos móveis.
3. Se você quiser um layout diferente para dispositivos móveis, selecione a visualização para celular no canto inferior esquerdo do editor, clique no botão + para criar um seletor separado e arraste-o até a posição de sua preferência.
4. Clique em “Salvar” e, em seguida, verifique se os seus visualizadores para desktop e dispositivos móveis são exibidos nos tamanhos de tela pretendidos.

Se o cabeçalho da sua versão móvel não tiver espaço suficiente, você também pode adicionar links de idiomas ao menu de navegação da versão móvel. Acesse Painel de administração do Shopify > Conteúdo > Menus, selecione o menu utilizado pela navegação do seu celular e adicione um item de menu para cada idioma usando o formato de link do site Weglot, como, por exemplo: #Weglot-en para inglês ou #Weglot-fr para o francês. Você também pode agrupar esses links em um menu suspenso “Idiomas”, caso seu tema ofereça essa funcionalidade.

Se o seletor ainda não estiver aparecendo, verifique se algum CSS personalizado o está ocultando em telas menores ou se ele está inserido dentro de um elemento de navegação exclusivo para computadores. Mover o seletor para um local visível e consistente pode resolver o problema.

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

Se o seletor de idioma do Weglot só aparecer após atualizar a página, o problema pode estar relacionado à forma como o seu tema do Shopify carrega o conteúdo ou ao local onde o seletor está posicionado.

Experimente estas soluções:

1. Redefina a posição do seletor da mesma forma que fizemos no segundo problema acima. Se o seletor agora aparecer de maneira consistente, sua localização anterior pode ser o problema. O site Weglot recomenda colocá-lo dentro de um elemento que esteja presente em todas as páginas da sua loja.
2. Verifique as transições entre páginas do seu tema. Alguns temas do Shopify utilizam animações ou navegação AJAX para alternar entre páginas sem recarregá-las totalmente, o que pode interferir no Weglot. Se o seu tema oferecer essas configurações, acesse Loja online > Temas > Editar tema > Configurações do tema e procure por “Desempenho” ou “Animações”. O siteWeglot recomenda selecionar “Sport” em vez de “Ludicrous” e desativar a opção “Animar entre páginas”, caso essas opções estejam disponíveis.
3. Verifique qualquer código personalizado do seletor. Se você tiver personalizado manualmente o posicionamento de Weglot, confirme se o local escolhido existe no momento em que o seletor é carregado. Um cabeçalho ou elemento de navegação que apareça posteriormente pode exigir trabalho adicional de integração.

Por fim, teste sua loja em uma janela privada do navegador, começando pela página inicial e navegando por diferentes páginas de produtos e coleções. Se o problema persistir, entre em contato com o Suporte do Weglot , informando a URL da sua loja, o nome do tema e as etapas necessárias para reproduzir o problema.