Índice
Requisitos de acesso Shopify
A tradução automática de IA na nuvem para ser usada com Shopify requer algum acesso para concluir a configuração:
- Acesso de administrador Shopify
- Acesso de modificação de DNS de domínio
A configuração Shopify é composta por 3 etapas simples:
- Registre seu domínio para autorizar a tradução
- Modifique o DNS do domínio de acordo com os idiomas de tradução
- Adicione o link do alternador de bandeira de idioma ao seu tema Shopify
Como tornar seu site Shopify multilíngue em vídeo
Registre seu domínio Shopify
Para isso, basta copiar o seu nome de domínio com https:// incluído e selecionar Shopify como plataforma.
Depois disso, selecione o idioma de origem e de destino.
Observação importante de SEO: o número de idiomas que você configura tem um grande impacto no SEO. Ao configurar seus idiomas de tradução, se você tiver uma grande quantidade de páginas indexadas (>500), o mecanismo de pesquisa poderá demorar muito para processá-las. Isso pode afetar seu SEO em seu idioma original. É por isso que recomendamos adicionar inicialmente no máximo 5 idiomas, depois, quando estiver indexado, você pode adicionar idiomas em um lote de 3 por mês.
Modifique o DNS do domínio de acordo com os idiomas
Adicionar DNS de domínio automaticamente usando Entri
Depois de registrar seu site com sucesso no painel Linguise , você terá duas opções para prosseguir com a instalação.
Você provavelmente deverá ver este conteúdo. Se preferir adicionar automaticamente os registros DNS, você pode clicar em “ Conectar seu DNS automaticamente. ”Este recurso, chamado Entri, adicionará automaticamente seus registros DNS, permitindo que você prossiga com a instalação facilmente. A outra opção é copiar manualmente o DNS no seu provedor de domínio.
Após clicar no botão, a Entri analisará a URL do seu site cadastrado e verificará o seu registro DNS público. Com base nisso, determinará o provedor e o DNS necessários.
Em seguida, você pode clicar em “ Autorizar com [seu provedor de domínio] ” (neste exemplo, é Cloudflare). Você verá então o painel mudando para a página de login do seu provedor de domínio, onde você poderá fazer login e continuar.
Depois de fazer login no seu provedor de domínio, a Entri fará o resto, adicionando automaticamente os registros DNS adequados. Um DNS por idioma + um DNS TXT para a chave de validação.
Você deverá ver que o DNS foi adicionado ao seu domínio. Por exemplo:
Depois de autorizá-lo, o Entri irá notificá-lo de que todas as configurações de DNS foram configuradas com sucesso.
Você poderá usar o recurso de tradução assim que todas as entradas DNS forem propagadas em seu domínio (geralmente leva 20/30 minutos).
Se preferir Instalação Manual , você também pode fazer isso manualmente seguindo as etapas que forneceremos a seguir.
Copiar registros DNS
Depois de validar o seu domínio, você será redirecionado para uma tela onde os DNS a serem adicionados ao seu domínio estão prontos para serem copiados. Dependendo da sua empresa de hospedagem, a configuração do domínio pode parecer um pouco diferente, mas os nomes dos campos são bastante padronizados. Esses registros são necessários para carregar as páginas multilíngues do seu site como fr.domain.com, es.domain.com…
Aqui estão os principais elementos.
Depois disso, você precisa se conectar ao seu gerenciador de domínio e acessar a área de configuração do DNS. Depois, seguindo as instruções, você pode copiar:
- Um registro TXT para verificação de domínio
- Um ou vários registros CNAME para os idiomas
Aqui está um exemplo para cada tipo de registro (TXT e CNAME):
Depois de adicionar todos os seus registros, sua configuração deverá ficar assim.
Configuração DNS específica no domínio Shopify
No Shopify , você pode gerenciar sua configuração de DNS na plataforma Shopify .
Especificamente, você pode acessar e modificar as configurações de DNS por meio das Shopify navegando até ‘ Domínios ’. Nesta seção, você pode adicionar e editar suas configurações de DNS conforme necessário.
Depois disso, você pode selecionar seu site principal e, no canto superior direito, encontrará a opção ' Configurações de domínio '.
Ao clicar nesta opção, você terá acesso a ' Editar configurações de DNS ', onde poderá prosseguir para adicionar um novo registro DNS. Você pode adicionar os registros CNAME e TXT.
Por fim, seus registros CNAME e TXT devem aparecer conforme imagem a seguir:
É importante observar que Shopify possui regras próprias para adicionar a configuração DNS. Certifique-se de seguir as etapas anteriores.
- Ao configurar um registro CNAME , certifique-se de que o nome seja o idioma da tradução
- Ao configurar um registro TXT, certifique-se de que o nome linguise _linguise
Shopify lerá esse registro DNS que você adicionou e será propagado de acordo.
Verifique a validação de DNS
Após adicionar todos os seus registros ao DNS do seu domínio, você pode verificar a propagação do DNS clicando no botão Verificar configuração do DNS.
A validação de DNS geralmente leva entre 30 minutos e 1 hora. Depois disso, você deverá ver pontos verdes à direita da lista de DNS no painel Linguise . Você está quase pronto para traduzir seu site Shopify , apenas falta o link para o alternador de idioma com bandeiras de país.
Adicione o seletor de idioma ao Shopify
O alternador de idioma é o pop-up da bandeira para selecionar o idioma desejado. Para carregá-lo, você precisará copiar o código fornecido no início das páginas do Shopify . O alternador de idioma da bandeira será carregado automaticamente em seu site público.
O link para copiar é fornecido no final do registro do domínio ou nas configurações do domínio. Copie o link para a área de transferência.
Em seguida, no Shopify , abra Loja online > Temas
Clique nos três pontos do seu tema atual e edite o código.
Por fim, abra o arquivo theme.liquid e cole o código do script após o último
Agora, no front-end Shopify , você deve ter o alternador de idioma Linguise disponível.
Design do alternador de idioma Shopify
O alternador de idioma pode ser personalizado no Linguise > Configurações > Exibição de sinalizadores de idioma. Cada modificação aqui será refletida no site.
No lado direito da tela, você tem a visualização do seletor de idioma. Aqui estão os elementos que você pode configurar:
- 3 layouts: lado a lado, suspenso ou pop-up
- A posição do seletor de idioma
- O conteúdo do seletor de idioma
- Nomes de idiomas em inglês ou idioma nativo
- Formas e tamanhos das bandeiras
- Cores e sombra da caixa
Carregue o alternador de idioma no conteúdo Shopify
Para exibir o seletor de idioma em um local específico, no Shopify , você deve definir a posição como “No local”.
Depois de definir a posição no Linguise , você pode adicionar o código de acesso abaixo para incluí-la. Clique no código abaixo para colocá-lo na área de transferência.
Depois de adicionado, no frontend você terá a bandeira e os nomes dos idiomas exibidos na área HTML onde você adicionou o código.
Configuração de domínio Shopify para Google ReCAPTCHA
O Google ReCAPTCHA é um serviço gratuito que serve para evitar spam, por exemplo, em formulários de contato. Para disponibilizá-lo no Shopify , você precisará registrar seus subdomínios multilíngues no admin Shopify .
Abra as configurações da loja e as configurações do domínio.
Em seguida, clique em Conectar domínio existente
Adicione um subdomínio de idioma existente, por exemplo, se você tiver seu site em francês, será fr.seusite.com
Em seguida, clique em Conectar domínio existente
Adicione um subdomínio de idioma existente, por exemplo, se você tiver seu site em francês, será fr.seusite.com
Finalmente, adicione [lang].yourwebsite.com, para cada idioma de tradução você teve que exibir o reCAPTCHA no frontend.
Editor de tradução frontend no Shopify
O editor frontend facilita aos tradutores a modificação de qualquer conteúdo HTML no Shopify em qualquer idioma. Você pode editar uma página clicando em um elemento da página e substituindo o texto, link ou imagem.
Se você estiver usando um dos temas gratuitos fornecidos pelo Shopify , pode ser necessário editar o CSS do tema para ter acesso a todo o HTML, é porque eles usaram algum pseudoelemento fora do padrão.
Primeiro, edite o código do tema e abra o arquivo base.css ou qualquer outro arquivo CSS carregado em sua loja Shopify .
Aqui está o código para adicionar ao seu arquivo CSS:
/* CUSTOM CSS FOR LIVE EDITOR LINGUISE
--------------------------------------------------------------------*/
/* Remove the problem of frontend editor on product and blog listing */
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
content: none !important;
}
.card__heading a:after, .card--card:after, .card--standard .card__inner:after {
content: none !important;
}
/* Add back the button border */
button.button {
border: 2px solid #0E1B4D;
border-radius: 20px;
}
/* END CUSTOM CSS
--------------------------------------------------------------------*/