Shopify - ¿Cómo cambiar la posición del conmutador de idiomas?

En este artículo, aprenderá los diferentes métodos para cambiar la posición del conmutador de idiomas de Weglot en función de su sitio web de Shopify.

1. Utilice la función Switcher Editor

El switcher editor le permite mover el conmutador de idiomas en contexto en su sitio web arrastrando y soltando el botón en una vista previa en directo.

-> Siga esta guía para más detalles: ¿Cómo utilizar el Switcher Editor?

2. Añadir el conmutador de idiomas a un menú

También puede crear su propio conmutador de idiomas dentro de su menú de Shopify y vincularlo a las traducciones de Weglot.

Para ello:

1. vaya a Shopify Admin > Tienda Online > Contenido > Menús:

2. Seleccione el menú en el que desea añadir su conmutador de idiomas.
3. Haga clic en " Añadir elemento de menú" y añada los idiomas que ya ha añadido a su tienda con Weglot:

4. En el campo " Etiqueta", añada el idioma,
5. En el "enlace" añadir #Weglot-languageCode.

Ejemplo a continuación:

Haga clic en la marca para validar y luego en"Guardar " y ya está.

Tenga en cuenta que también puede mostrarlo como un menú desplegable.

Para ello, haga clic en"Añadir elemento de menú" y luego, en el campo"Etiqueta", puede añadir"Idiomas", por ejemplo, después añada # como enlace y haga clic en la marca.

A continuación, arrastre y suelte los elementos de idioma debajo de " Idiomas" para que se conviertan en subelementos:

Puede encontrar más información sobre este método en nuestra Documentación para desarrolladores

3. La opción Weglot_here

Puede colocar el conmutador en cualquier lugar añadiendo el siguiente código dentro de su archivo Theme.liquid (u otro archivo Liquid):

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

Esto insertará el cambiador de idioma exactamente donde pegue el código.

4. La opción de los conmutadores

Otra opción es añadir manualmente el conmutador a cualquier elemento incluyendo el botón switchers opción en su Weglot.initialize código.

Para ello:

1. Vaya a su admin de Shopify > Tienda Online > Temas > Acción > Editar Código > Snippets > weglot_switchers.liquid.

Debería ver el siguiente código (con su propia clave API en lugar 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. Inserte el siguiente código después de "YOUR_API_KEY" (simplemente borre cualquier código anterior después de su clave 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: no olvide la coma después de su clave API.

El trozo de código que es importante aquí es el ".header-nav", ya que determina la ubicación de su conmutador de idiomas. Es necesario sustituirlo por el selector CSS del elemento padre en el que desea colocar el conmutador de idiomas.

⚠️ Para encontrar el selector CSS (el "objetivo"):

• Haga clic con el botón derecho del ratón en el elemento en el que desee colocar el conmutador de idiomas.
• Ir a "Inspeccionar"
• Utilice la flecha situada en la parte superior izquierda de la consola.
• Haga clic con el botón derecho del ratón sobre el elemento en la consola.
• Copiar > Selector de copia
• Pegue el campo de destino del código entre las comillas dobles

Así, por ejemplo, si quiere añadirlo a su menú:

<nav class="menu">

Su línea objetivo será:

objetivo: ".menu",

Puede encontrar más información sobre este método en nuestra Documentación para desarrolladores