Shopify - Como alterar a posição do alternador de idiomas?

Neste artigo, aprenderá os diferentes métodos para alterar a posição do comutador de idiomas Weglot, dependendo do seu site Shopify.

1. Utilizar a função Switcher Editor

O editor do alternador permite-lhe mover o alternador de idioma no contexto do seu sítio Web, arrastando e largando o botão numa pré-visualização do seu sítio Web.

Para o utilizar, pode seguir este artigo: Como utilizar o Switcher Editor?

⚠️ Tenha em atenção que o seu sítio Web deve estar ativo e acessível para poder utilizar o Switcher Editor

2. Adicionar o seletor de idioma a um menu

Pode criar o seu próprio alternador de línguas no menu principal, por exemplo, e depois ligá-lo às traduções Weglot.

Para o fazer, aceda a Shopify Admin > Loja virtual > Navegação. Clique no menu onde pretende adicionar o seletor de idioma:

Em seguida, clique em " Adicionar item de menu" e adicione as línguas que já adicionou à sua loja com Weglot:

No campo " Nome", adicionar a língua e, no"link", adicionar o código #Weglot-language. Por exemplo, para o botão em inglês, adicionar #Weglot-en para um botão em francês, terá de adicionar #Weglot-fr.

Note que a letra maiúscula no "W" é importante. Exemplo abaixo:

Clique em " Aplicar alterações" e depois em"Guardar menu" e está feito.

Note que também pode apresentá-lo como um menu pendente.

Para o fazer, clique em"Adicionar item de menu" e, em seguida, no campo "Nome", pode adicionar"Línguas", por exemplo, e depois adicionar # como ligação e clicar em "Adicionar":

Depois, arraste e largue os itens de língua por baixo de " Línguas" para que se tornem subitens:

Pode encontrar mais informações sobre este método na nossa documentação para programadores

3. A opção Weglot_here

Pode colar o código abaixo no seu ficheiro Theme.liquid (ou noutro ficheiro liquid) no local onde pretende que o alternador de idioma seja apresentado:

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

4. A opção comutador

Também pode integrar o comutador manualmente em qualquer elemento presente na sua loja, adicionando a opção "Switchers" ao seu código Weglot.initialize

<!--Start Weglot Script--> 
<script src=“//cdn.weglot.com/weglot.min.js”></script>
<script id=“has-script-tags”>Weglot.initialize({ api_key:“YOUR_API_KEY” });</script>
<!--End Weglot Script-->

,   
    switchers: [
    {
    button_style: {
        full_name: true,
        with_name: true,
        is_dropdown: true,
        with_flags: true,
        flag_type: "circle"
    },
    location: {
        target: ".header-nav", // You'll probably have to change it (see the step below in order to find the correct CSS selector)
        sibling: null
        }
    }
]
});
</script>

Importante: não se esqueça da vírgula a seguir à sua chave API.

A parte do código que é importante aqui é o ".header-nav", pois determina a localização do seletor de idioma. Este tem de ser substituído pelo seletor CSS do elemento principal onde pretende que o seletor de idioma seja colocado.

⚠️ Para encontrar o seletor CSS (o "alvo"):

• Clique com o botão direito do rato no elemento em que pretende colocar o alternador de idioma.
• Ir para "Inspecionar"
• Utilize a seta no canto superior esquerdo da consola.
• Clique com o botão direito do rato no elemento na consola.
• Copiar > Seletor de cópias
• Colar o campo de destino do código entre as aspas duplas

Assim, por exemplo, se quiser adicioná-lo ao seu menu:

<nav class="menu">

A sua linha-alvo será:

destino: ".menu",

Pode encontrar mais informações sobre este método na nossa documentação para programadores