Shopify Language Switcher: melhore a experiência do usuário

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 tem suas desvantagens, incluindo a ausência de comutação automática de geolocalização e personalizações limitadas em comparação com 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 suporta vários idiomas, mas não possui geolocalização automática e 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: uma visão geral

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.

Lembre-se de que o seletor de idioma do Shopify não detecta e exibe automaticamente o idioma com base nas preferências do usuário sem personalização adicional ou aplicativos. A funcionalidade nativa oferece suporte principalmente à seleção manual do idioma pelo usuário.

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

1. Em sua página de administração da Shopify, navegue até Configurações > Idiomas e adicione os idiomas aos quais você deseja oferecer suporte.
2. Vá para Online Store > Temas, selecione seu tema e clique em Editar código. Localize o arquivo header.liquid no diretório Sections.
3. 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:

<form action="{{ routes.root_url }}" method="get">  
 <select name="locale" onchange="this.form.submit()">    
  {% for locale in localization.available_locales %}      
   <option value="{{ locale | escape }}" {% if locale == localization.current_locale %}selected{% endif %}>        
    {{ locale.name }}      
   </option>    
  {% endfor %}  
 </select>
</form>

4. Agora seu alternador está no lugar. Para combinar com o design da sua loja, você pode adicionar regras CSS personalizadas na folha de estilo do tema. Se necessário, o uso de seletores específicos como select [name="locale"] pode evitar o estilo não intencional de outros elementos selecionados de uma página.

Veja um exemplo para alterar a cor do plano de fundo:

select {    
background-color: #fff;    
 border: 1px solid #ccc;    
 padding: 5px;
}

E aqui está como estilizar a fonte e a cor do texto do alternador:

select {    
font-family: 'Arial', sans-serif; /* Change font type */    
 font-size: 16px; /* Set font size */    
 color: #333; /* Text color */
}

select option {    
background-color: #f9f9f9; /* Background color for options */    
 color: #555; /* Text color for options */
}

Você também pode adicionar efeitos de foco e alterar o tamanho das bordas:

select {    
border-radius: 5px; /* Rounded corners */    
 border: 2px solid #007bff; /* Blue border */}

select:hover {    
border-color: #0056b3; /* Darker blue on hover */    
background-color: #e9ecef; /* Light gray background on hover */
}

5. Após fazer suas edições, clique em Salvar para aplicá-las. O seletor de idioma deve aparecer agora em sua loja de acordo com suas preferências.

Melhorando as lojas Shopify com o seletor de idiomas Weglot

Embora o seletor de idioma nativo do Shopify seja funcional, aplicativos de tradução dedicados ao Shopify, como o Weglot oferecem mais personalizações, além de recursos adicionais de tradução do Shopify para aqueles que desejam realmente localizar a experiência da 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 de acordo com a marca com o modelo de linguagem de IA da Weglot. Ele aprende com suas instruções, glossário e histórico de tradução manual para fornecer imediatamente traduções contextualizadas que soam como 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 usando a melhor tradução automática e exibido em subdiretórios ou subdomínios de idiomas, dependendo da estrutura que você escolheu no Weglot Dashboard.

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 sinalizadores, para exibir as opções de idioma. Por exemplo: algum texto
   • 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="locale"]');    
 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, o SEO multilíngue eficaz pode levar a maiores oportunidades de mercado! Depois de implementar Weglot para otimização multilíngue, a Ron Dorff, uma loja da Shopify, descobriu uma demanda significativa do mercado alemão, que até então não havia sido explorada. Ao traduzir seu conteúdo e otimizar para SEO, eles viram um incrível aumento de 400% nas vendas internacionais.

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 da Shopify: Weglot lida com traduções para toda a sua loja, incluindo páginas de checkout, notificações por e-mail e metacampos, superando as limitações descritas na documentação da Shopify. Por exemplo, embora o idioma do checkout seja normalmente fixo, Weglot permite que o checkout reflita o idioma selecionado pelo usuário.

• 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 seu teste gratuito de 10 dias com a Weglot hoje mesmo e desfrute de um site multilíngue em minutos!