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

En este artículo, verá 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 del editor de conmutadores
2. Añada el conmutador de idiomas a un menú
3. La opción Weglot aquí
4. La opción del conmutador


1. Utilice el 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 de su sitio web
Para utilizarlo, puede seguir este artículo: ¿Cómo se utiliza el Switcher Editor?

⚠️ Tenga en cuenta que su sitio web debe estar en línea y ser accesible para poder utilizar el Switcher Editor

Tiene la posibilidad de crear su propio conmutador de idiomas en su menú principal, por ejemplo, y luego vincularlo a las traducciones de Weglot

Para ello, vaya a Shopify Admin > Tienda Online > Navegación. Haga clic en el menú en el que desea añadir su conmutador de idiomas:

A continuación, haga clic en " Añadir elemento de menú" y añada los idiomas que ya ha añadido a su tienda con Weglot:

En el campo " Nombre", añada el idioma, y en el"enlace" añada el código #Weglot-language. Por ejemplo, para el botón en inglés, añada #Weglot-en para un botón en francés, tendrá que añadir #Weglot-fr.

Tenga en cuenta que la letra mayúscula de la "W" es importante. Ejemplo de abajo:

Haga clic en " Aplicar los cambios" y luego en"Guardar el menú" 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 "Nombre", puede añadir"Idiomas", por ejemplo, y luego añadir # como enlace y hacer clic en "Añadir":

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 pegar el código que aparece a continuación en su archivo Theme.liquid (o en otro archivo liquid) en el lugar en el que desee que aparezca el conmutador de idiomas:

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

4. La opción del conmutador

También puede integrar el conmutador manualmente a cualquier elemento presente en su Tienda añadiendo la opción "Conmutadores" a su código Weglot.initialize

Para ello, vaya a su Shopify admin > 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-->
	
Añada el siguiente fragmento de código después de " YOUR_API_KEY" (sólo tiene que eliminar el código antiguo que aparece después de su clave 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: 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. Esto necesita ser reemplazado con el selector CSS del elemento padre donde usted quiere que se coloque 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 desea 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 en el elemento de la consola.
  • Copiar > Copy selector
  • 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 target será:

target: ".menú",
	

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

¿Responde esto a su pregunta? Gracias por sus comentarios Ha habido un problema al enviar su comentario. Vuelva a intentarlo más tarde.

¿Aún necesita ayuda? Contacta con nosotros Contacto con nosotros