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 switcher editor 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 em direto.

-> Siga este guia para obter mais pormenores: Como utilizar o Switcher Editor?

2. Adicionar o seletor de idioma a um menu

Também pode criar o seu próprio alternador de idiomas dentro do seu menu Shopify e ligá-lo às traduções Weglot.

Para o fazer:

1. vá para Shopify Admin > Loja virtual > Conteúdo > Menus:

2. Selecione o menu onde pretende adicionar o comutador de idiomas.
3. Clique em " Adicionar item de menu" e adicione as línguas que já adicionou à sua loja com Weglot:

4. No campo " Etiqueta", adicione a língua,
5. Na secção "ligação" adicionar #Weglot-languageCode.

Exemplo abaixo:

Clique no visto para validar e, em seguida, em"Guardar " e já está.

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

Para o fazer, clique em"Adicionar item de menu" e, no campo"Etiqueta", pode adicionar"Línguas", por exemplo, depois adicione # como ligação e clique no visto.

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 colocar o alternador em qualquer lugar, adicionando o seguinte código ao ficheiro Theme.liquid (ou a outro ficheiro Liquid):

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

Isto irá inserir o alternador de idioma exatamente no local onde colou o código.

4. A opção dos comutadores

Outra opção é adicionar manualmente o seletor a qualquer elemento, incluindo a opção switchers opção no seu Weglot.initialize código.

Para o fazer:

1. Aceda ao seu admin da Shopify > Loja virtual > Temas > Ação > Editar código > Snippets > weglot_switchers.liquid.

Deverá ver o seguinte código (com a sua própria chave de API em vez de YOUR_API_KEY):

<!--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-->

2. Insira o seguinte código após "YOUR_API_KEY" (basta eliminar qualquer código anterior após a sua chave de API):

,   
    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