Selector de idiomas de Shopify: cómo añadirlo y personalizarlo

El selector de idioma de Shopify es una función nativa muy útil para tiendas multilingües. Este dispositivo permite a los clientes ver tu sitio web en su idioma preferido, lo que facilita a tu marca acceder a nuevos mercados internacionales. También puedes personalizar la función mediante código, para que se adapte mejor a la estética de tu marca.

Sin embargo, la función integrada tiene sus inconvenientes, como las limitadas opciones de personalización en comparación con las soluciones de terceros.

Al integrar una aplicación de traducción específica para Shopify, los propietarios de tiendas pueden beneficiarse de funciones adicionales que mejoran la funcionalidad, aumentan la participación de los usuarios y se encargan de la parte de traducción propiamente dicha. Por ejemplo, nuestra propia aplicación de traducción para Shopify, Weglot, ofrece opciones únicas de diseño y ubicación para su selector de idioma, lo que la hace adaptable a cualquier diseño de tienda. Además, hace mucho más que simplemente permitir a los usuarios cambiar de idioma. Pero hablaremos de eso más adelante.

En este artículo, te mostraremos cómo sacar el máximo partido al selector de idioma nativo de Shopify antes de explorar Weglot Shopify, detallando las mejores prácticas para traducir tu tienda y proporcionar una experiencia de usuario óptima.

Puntos clave

• El selector de idioma integrado de Shopify admite varios idiomas, pero ofrece pocas opciones de personalización en comparación con las aplicaciones de terceros.
• Weglot traducción automática de sitios web y amplias opciones de personalización para su selector de idioma. También permite la edición totalmente manual y mejora el SEO multilingüe mediante la creación de URL específicas para cada idioma y la implementación de etiquetas hreflang.

Selector de idioma de Shopify: descripción general y configuración

En primer lugar, echemos un vistazo al selector de idioma integrado en Shopify. Como hemos mencionado, esta función permite a los propietarios de tiendas ofrecer soporte en varios idiomas, lo que naturalmente mejora la experiencia del usuario (UX) para los clientes internacionales.

Se admiten tanto la selección manual del idioma como el redireccionamiento automático en función de las preferencias del navegador de los visitantes. Puedes activar el redireccionamiento automático en función de las preferencias del navegador de los visitantes en Tienda online > Preferencias > Redireccionamiento automático > Idioma, siempre que hayas publicado los idiomas correspondientes y los hayas puesto a disposición en tus mercados objetivo.

Si el conmutador integrado te sirve para lo que necesitas, aquí te explicamos cómo configurarlo.

Configuración de idiomas y métodos de traducción

Antes incluso de que aparezca el selector de idioma, tu tienda de Shopify tiene que ofrecer realmente más de un idioma. Si ya has configurado tus traducciones, puedes pasar directamente a la siguiente sección. Si no es así, aquí te explicamos cómo empezar…

Ve a Ajustes > Idiomas > Añadir idioma. Elige entre más de 20 opciones compatibles, desde el español hasta el japonés. Recuerda que tienes que hacer clic en «Publicar» junto a cada idioma para que las traducciones estén disponibles para los clientes. Si te saltas este paso, tu nuevo selector no tendrá nada que cambiar.

La aplicación integrada «Translate & Adapt» de Shopify es una opción para crear una tienda multilingüe. Traduce automáticamente tu contenido principal a 2 idiomas de forma gratuita (8 si tu tienda tiene su sede en el Reino Unido, Suiza o uno de los 10 países de la UE), directamente desde la sección «Configuración > Aplicaciones» una vez que hayas añadido tus idiomas.

Para gestionar las traducciones de forma masiva, exporta los datos de idiomas de tu tienda como un archivo CSV desde Ajustes > Idiomas > Exportar. Edita las traducciones en bloque y luego vuelve a importarlas; la clave es no tocar nunca el código Liquid que hay dentro de esas llaves {{ }} o {% %}. Ese es el motor de temas de Shopify, no texto sin formato.

Si prefieres tener un control totalmente manual, Shopify te permite gestionar hasta 20 idiomas (30 en Shopify Plus). Ve a Ajustes > Idiomas > Acciones > Solicitar traducciones para contratar servicios de traducción profesionales directamente desde tu panel de control de Shopify.

Una vez que hayas publicado los idiomas y se hayan aplicado las traducciones, ya estás listo para ponerte con el selector de idiomas.

Cómo encontrar y configurar el selector integrado de tu tema

El selector de idioma integrado de Shopify suele encontrarse en el editor de tu tema, en la sección «Cabecera » o «Pie de página ». Su ubicación exacta y las opciones de personalización dependen de tu tema y de la versión.

Prueba a seguir estos pasos:

1. En el panel de administración de Shopify, ve a Tienda online > Temas > Editar tema.
2. Abre la sección «Encabezado» o «Pie de página», según dónde quieras que aparezca el selector.
3. Busca una opción como «Habilitar selector de idioma», «Mostrar selector de idioma» o «Localización».
4. Activa el selector y haz clic en «Guardar».

Cuando tu tienda tenga varios idiomas publicados disponibles en el mercado del cliente, el selector debería mostrar las opciones de idioma disponibles.

Las plantillas gratuitas de Shopify, como Dawn, Craft, Refresh, Sense y Studio, admiten selectores de idioma tanto en el encabezado como en el pie de página en las versiones actuales. Las plantillas gratuitas de Online Store 2.0 a partir de la versión 9.0.0, así como las de la familia Horizon, admiten la colocación en el encabezado sin necesidad de código adicional.

En el caso de los temas premium, las opciones de ubicación varían. Por ejemplo, Impulse permite seleccionar el idioma en la barra de herramientas del encabezado y en el pie de página, mientras que otros temas pueden ofrecer ajustes o ubicaciones diferentes. Echa un vistazo a la documentación del desarrollador de tu tema si no encuentras la opción.

Los temas más antiguos pueden ofrecer menos opciones de personalización. Si tu tema no admite la ubicación que prefieres, puede que tengas que editar sus plantillas Liquid, cambiar a un tema más nuevo o usar una aplicación de traducción que tenga sus propios controles de ubicación.

El aspecto del selector también depende de tu tema. Los selectores integrados suelen mostrar los nombres de los idiomas y se adaptan a las fuentes, los colores y el estilo de tu tienda. Algunos temas ofrecen opciones de diseño adicionales, aunque para una personalización más amplia puede que tengas que usar CSS.

Además, comprueba el diseño para móvil con la vista previa de temas de Shopify. Dependiendo de tu tema, el selector puede aparecer en el pie de página, en el encabezado o en el menú de navegación para móvil. Asegúrate de que los clientes puedan encontrarlo y utilizarlo fácilmente en pantallas más pequeñas, y mantén el selector de país/región cerca si muestras ambos.

¿Cómo añado un selector de idioma al encabezado de mi tienda de Shopify?

Puedes añadir un selector de idioma al encabezado de tu tienda de Shopify a través de la configuración integrada de tu tema o utilizar el «Switcher Editor» de Weglot para colocar un selector personalizable sin tener que editar el código de tu tema.

Para añadir el selector de idioma nativo de Shopify, tal y como se ha explicado antes, ve a Panel de control de Shopify > Tienda online > Temas > Editar tema, abre la sección «Cabecera», busca la opción «Habilitar selector de idioma» o una configuración similar, activa el selector y, a continuación, haz clic en «Guardar».

Si utilizas Weglot, abre Weglot : Panel de control > Configuración > Selector de idioma > Editor del selector. Arrastra el selector hasta la ubicación que prefieras en el encabezado y haz clic en Guardar. Elige una zona que aparezca siempre en las mismas páginas de tu tienda, para que el selector se mantenga en su sitio mientras los clientes navegan.

Para un posicionamiento más preciso, Weglot también admite este marcador de posición HTML:

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

Puedes añadirlo a una sección o bloque de «Custom Liquid» en la zona de cabecera de tu tema, si es compatible, o insertarlo en el archivo correspondiente del tema. Weglot mostrará entonces el selector donde aparece el marcador de posición. La ubicación exacta depende del diseño de tu tema.

Una vez configurado, comprueba siempre el selector tanto en el ordenador como en el móvil, incluidas las páginas de productos y colecciones. Además, comprueba el proceso de pago, ya que Shopify gestiona el pago por separado del encabezado de tu tienda, por lo que añadir un selector ahí no significa que se añada automáticamente uno al proceso de pago. Si utilizas la integración de Shopify Markets deWeglot, Shopify gestiona el idioma del proceso de pago según la selección previa del cliente, y el selector de Weglot no aparece durante el proceso de pago.

Cómo añadir el «Switcher» con Liquid Code

Si tu tema de Shopify no te ofrece las opciones de diseño o ubicación del selector de idioma que necesitas, puedes crear un selector personalizado usando Liquid. Para ello tendrás que editar el código de tu tema, así que haz una copia de seguridad antes de seguir adelante.

Para configurar y personalizar el selector de idioma de Shopify, debes seguir estos pasos:

1. Desde tu página de administración de Shopify, ve a Configuración > Idiomas y añade los idiomas que quieras ofrecer. Asegúrate de que estén disponibles en tus mercados objetivo y de que hayas añadido las traducciones necesarias.
2. Ve a Tienda online > Temas y haz clic en «Editar código » en el menú de los tres puntos de tu tema.
3. Busca el archivo header.liquid en el directorio «Sections ». El archivo concreto y el punto adecuado para insertarlo dependen de tu tema, así que comprueba su estructura antes de hacer cambios.
4. Busca un lugar adecuado en el archivo header.liquid (normalmente cerca del menú de navegación) y pega el siguiente snippet de código Liquid:

{% if localization.available_languages.size > 1 %}
  <div class="page-width custom-language-topbar">
    {% form 'localization', id: 'header-language-form' %}
      <div class="shopify-language-switcher">
        <label for="header-language-selector">Language</label>

        <select
          id="header-language-selector"
          name="language_code"
        >
          {% for language in localization.available_languages %}
            <option
              value="{{ language.iso_code }}"
              {% if language.iso_code == localization.language.iso_code %}selected{% endif %}
            >
              {{ language.endonym_name | escape }}
            </option>
          {% endfor %}
        </select>

        <button type="submit">Apply</button>
      </div>
    {% endform %}
  </div>
{% endif %}

La ubicación de tu código Liquid determina dónde aparece el selector de idioma en la página de tu tienda. Por ejemplo, si lo colocas dentro del área de navegación de tu cabecera, puede que aparezca junto al menú, mientras que si lo pones en un contenedor independiente encima de la navegación, se creará una barra dedicada a la selección de idioma.

Este código usa el formulario de localización de Shopify para recuperar los idiomas disponibles para los clientes. Muestra cada idioma con su nombre original, como «Français» para el francés, y marca el idioma actual como seleccionado. Los clientes eligen un idioma del menú desplegable y hacen clic en «Aplicar» para cambiar.

Si tu tema ya muestra un selector de idioma en el mismo sitio, desactiva el que ya hay a través del editor del tema para evitar duplicados.

5. Puedes usar CSS para controlar la alineación, los colores, el espaciado y los bordes del selector. En el editor de temas, abre «Configuración del tema» > «CSS personalizado» y añade el siguiente ejemplo:

.custom-language-topbar {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  padding-bottom: 8px;
}

.custom-language-topbar .shopify-language-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.shopify-language-switcher select {
  font: inherit;
  font-size: 16px;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px;
}

.shopify-language-switcher select:hover {
  border-color: #555;
}

.shopify-language-switcher select:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

6. Una vez que hayas hecho los cambios, haz clic en «Guardar» para aplicarlos. El selector de idioma debería aparecer ahora en tu tienda según tus preferencias. Echa un vistazo a la vista previa de tu tienda en ordenador y en móvil.

Mejora las tiendas Shopify con el selector de idioma Weglot

Weglot es una herramienta de traducción de sitios web basada en IA que añade un selector de idioma a tu tienda de Shopify sin que tengas que modificar tu tema. Aunque el selector de idioma nativo de Shopify funciona bien, las apps de traducción específicas para Shopify, como Weglot ofrecen más opciones de personalización, además de funciones de traducción adicionales para aquellos que quieran adaptar de verdad la experiencia de la tienda a sus clientes internacionales.

A diferencia del selector de idioma de Shopify, Weglot traduce Weglot el 100 % del contenido del sitio web desde más de 110 idiomas, incluyendo las páginas de pago, las notificaciones por correo electrónico y los metadatos SEO, optimizándolo para los motores de búsqueda.

Con Weglot, toda tu tienda Shopify se beneficia de la traducción automática, acelerando los proyectos de expansión. En comparación con la contratación de traductores individuales para cada idioma, la automatización de Weglotreduce significativamente el tiempo de comercialización de nuevas versiones lingüísticas.

Sin embargo, las capacidades de Weglotno se limitan a la traducción automática. Con Weglot, obtienes un control de edición completo sobre el contenido traducido de tu sitio. También puedes contratar traductores profesionales directamente a través de la plataforma.

También puedes generar al instante traducciones fieles a tu imagen de marca con el modelo de traducción basado en IA de Weglot. Este modelo aprende de tus instrucciones, tu glosario y tu historial de traducciones manuales para ofrecerte de inmediato traducciones que tienen en cuenta el contexto y que suenan como si las hubieras escrito tú.

Weglot también se integra con las funciones existentes de Shopify y con populares aplicaciones de terceros, incluida la personalización para temas como Dawn y Prestige. Esto elimina la molestia de gestionar múltiples tiendas o traducciones manuales, ya que puedes añadir, publicar, despublicar o eliminar idiomas según necesites.

Weglot se encarga de mucho más que la traducción, ya que ofrece ventajas de SEO multilingüe en el núcleo de la aplicación. La plataforma crea automáticamente subdominios o subdirectorios para cada versión lingüística e implementa etiquetas hreflang, optimizando tu sitio web para los motores de búsqueda locales. Además, nuestro Visual Editor permite personalizar fácilmente las traducciones, lo que permite ajustarlas para que se adapten al tono de tu marca.

Lo mejor de todo es que configurar Weglot personalizar tu selector de idioma es cuestión de unos segundos. Veamos cómo hacerlo.

Configurar Weglot en tu tienda Shopify

Configurar Weglot en tu tienda Shopify es realmente sencillo. Aquí tienes una guía para empezar:

1. Empieza por visitar la Shopify App Store:

• En la barra de búsqueda, escribe Weglot y localiza la aplicación Weglot .
• Haz clic en Instalar y sigue las instrucciones para añadirlo a tu tienda.

2. Después de instalar la aplicación, tendrás que crear una cuenta:

• Abre la aplicación Weglot desde tu panel de Shopify.
• Introduce tu dirección de correo electrónico y elige una contraseña.

3. Configura tu idioma:

• A continuación, selecciona tu idioma original (el idioma de tu tienda Shopify).
• Después, elige las lenguas de destino a las que quieres traducir tu contenido.

Tras seleccionar tus idiomas, Weglot escaneará automáticamente todo el contenido de tu tienda, incluidos los metadatos y el contenido de aplicaciones de terceros. La detección automática significa que no tendrás que recopilar manualmente contenido para traducir, ¡ya que Weglot lo hace todo por ti!

A continuación, tu sitio web se traduce al instante mediante una tecnología de traducción con IA de vanguardia y se muestra en subdirectorios o subdominios por idiomas, según la estructura que hayas elegido en el panel de control de Weglot .

Personalización del selector de idiomas Weglot: opciones de diseño y ubicación

El selector de idiomas Weglotofrece amplias opciones de personalización, lo que te permite adaptarlo a la imagen de marca de tu tienda para obtener un resultado final muy profesional. A continuación te explicamos cómo personalizarlo:

1. Accede al editor visual del selector de idiomas: ve al Weglot y navega hasta Configuración > Selector de idiomas.
2. Cambia la apariencia: Elige entre varios formatos, como menús desplegables, botones o banderas, para mostrar las opciones de idioma. Por ejemplo:
   • Utiliza banderas para un reconocimiento rápido.
   • Opta por botones para una visualización más destacada.

3. Ajusta la posición: Puedes colocar el conmutador en zonas clave como la cabecera, el pie de página o la barra lateral, según lo que mejor se adapte a tu diseño.
4. Modificar colores y estilos: Personaliza los colores y estilos en los ajustes de Weglot para alinearlos con la marca de tu tienda.

Es importante destacar que el selector de idioma se puede reposicionar fácilmente sin necesidad de modificar el tema, lo que garantiza que siga siendo accesible y fácil de usar en las diferentes páginas de tu tienda. Para obtener información sobre la colocación avanzada, consulta nuestra sección más abajo sobre cómo superar los retos habituales en la localización de tiendas Shopify.

Personalización avanzada: Consejos de codificación para desarrolladores

Para los desarrolladores que quieran mejorar sus tiendas Shopify con Weglot, la personalización puede ser clave para crear una experiencia multilingüe a medida. La flexibilidad de Weglotofrece a los desarrolladores la posibilidad de crear experiencias multilingües personalizadas sin dejar de ser fáciles de usar para los usuarios no técnicos.

Aquí tienes algunos consejos de codificación que debes tener en cuenta:

Uso de CSS para ajustar la apariencia del selector de idioma

Los desarrolladores pueden modificar estilos como el color de fondo, el tamaño de la fuente y el relleno para que coincidan con la marca de la tienda. Por ejemplo:

select {    
background-color: #f0f0f0;    
 border: 2px solid #007bff;    
 border-radius: 5px;    
 padding: 10px;
}

Implementar JavaScript para funciones personalizadas

Los desarrolladores pueden utilizar JavaScript para desencadenar acciones específicas cuando se selecciona un idioma, como actualizar otros elementos de la página o realizar un seguimiento de los cambios de idioma para los análisis. Por ejemplo, puedes implementar un receptor de eventos:

document.addEventListener('DOMContentLoaded', function() {
var languageSelector = document.querySelector('select[name="language_code"]');    
 if (languageSelector) {        
  languageSelector.addEventListener('change', function(event) {            
    // Custom functionality here            
     // For example, track language change event            
     console.log('Language changed to: ' + event.target.value);
   });    
 }
});

Implementación de Weglot para transiciones de página fluidas entre idiomas

Una de las funciones clave de Weglotes la creación automática de URL específicas para cada idioma, como ejemplo.com/fr para las versiones francesas de tu sitio. Una estructura de URL sólida garantiza que los motores de búsqueda puedan indexar cada versión lingüística, mejorando tus esfuerzos de SEO multilingüe.

Weglot ayuda a los clientes a cambiar fácilmente de idioma durante su experiencia de compra, ya sea navegando por los productos o pasando por caja. Cuando un cliente pasa de una página de producto en inglés a su equivalente en español, por ejemplo, experimenta una transición fluida sin perder su lugar en el proceso de compra. Estas funciones pueden influir en parámetros clave como el tiempo en el sitio y las tasas de conversión, mejorando la satisfacción del cliente y, en última instancia, impulsando el crecimiento global.

Por poner un ejemplo, Everyone.org -que utilizó Weglot para crear un sitio web multilingüe en 12 idiomas- experimentó un aumento del 40% en el número total de visitantes, con una tasa de conversión de los usuarios francófonos de casi el doble de la tasa de conversión media del sitio.

Optimizar el SEO multilingüe y mantener la coherencia de la página

El SEO multilingüe garantiza que tus productos puedan ser descubiertos por los usuarios que realizan búsquedas en diferentes idiomas, impulsando el tráfico online. Un aspecto fundamental del SEO multilingüe es tener una estructura de URL adecuada, y el uso de subdirectorios ayuda a los motores de búsqueda a identificar y clasificar las páginas en distintos idiomas.

Las etiquetas Hreflang desempeñan un papel importante en este proceso, ya que informan a los motores de búsqueda sobre el idioma y la orientación regional de tus páginas. Esto ayuda a dirigir a los usuarios a la versión más relevante de tu sitio.

Los metadatos traducidos, incluidas las etiquetas de título y las descripciones, contribuyen aún más a mejorar la visibilidad en las búsquedas. Weglot automatiza gran parte del trabajo técnico de SEO, creando automáticamente URL específicas para cada idioma e implementando etiquetas hreflang sin necesidad de intervención manual.

Además, Visual Editor el glosario de idiomas Weglotpermiten a los propietarios de tiendas mantener la coherencia en las traducciones.

Para ir un paso más allá con el SEO multilingüe, los propietarios de tiendas Shopify pueden hacer lo siguiente:

• Realiza una investigación localizada de palabras clave para cada mercado objetivo.
• Asegúrate de que todo el contenido, incluidos los metadatos, se traduce con precisión.
• Revisa periódicamente las traducciones para reflejar los cambios en las tendencias lingüísticas.

¡Recuerda que un SEO multilingüe eficaz puede abrirte nuevas oportunidades de mercado! Tras implementar Weglot para la optimización multilingüe, Ron Dorff, una tienda de Shopify, experimentó un increíble aumento del 400 % en las visitas a su página web.

Superar los retos comunes en la localización de tiendas Shopify

La localización de tiendas Shopify conlleva algunos retos únicos, pero Weglot ofrece soluciones eficaces para facilitarte el proceso.

Para cambiar la posición del selector Weglot en un sitio Shopify, puedes utilizar uno de los cuatro métodos siguientes:

1. Función del editor de conmutadores

Utiliza el Editor del selector para arrastrar y soltar el selector de idioma directamente en una vista previa en vivo de tu sitio web. Este método requiere que tu sitio esté activo.

2. Añadir a un menú

Crea un selector de idioma personalizado en tu menú principal vinculándolo a Weglot . Ve a Shopify Admin > Tienda online > Navegación y añade elementos de menú para cada idioma utilizando el formatoWeglot(por ejemplo,Weglot para inglés). También puedes crear un menú desplegable para los idiomas.

3. Opción Weglot

Inserta el siguiente snippet de código snippet tu archivo Theme.liquid en la ubicación deseada:

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

Este código colocará el selector de idioma donde pongas el código, solucionando las limitaciones de ubicación habituales que se comentan en los foros de la comunidad.

4. Opción Conmutador

Integra manualmente el conmutador modificando tu código de inicialización de Weglot en weglot.liquid. Incluye la opción Conmutadores y especifica el selector CSS de destino donde quieres que aparezca el conmutador:

Weglot.initialize({  
api_key: "YOUR_API_KEY",  
 switchers: [{     
  location: { target: ".header-nav" }   
 }]
});

Asegúrate de sustituir .header-nav por el selector CSS del elemento que desees.

También obtendrás las siguientes ventajas de localización al utilizar Weglot:

• Traducción de contenido dinámico: Weglot traduce eficazmente el contenido generado por JavaScript y los elementos cargados por AJAX, garantizando que todo el contenido dinámico sea capturado y traducido.
• SEO multilingüe para Shopify: Weglot automatiza la implementación de etiquetas hreflang y crea sitemaps específicos para cada idioma. Esto complementa las funciones de SEO integradas en Shopify, permitiendo que los motores de búsqueda ofrezcan a los usuarios la versión en el idioma correcto.

• Traducción de elementos específicos de Shopify: Weglot se encarga de las traducciones de toda tu tienda, incluidas las páginas de pago, las notificaciones por correo electrónico y los metacampos, superando así las limitaciones descritas en la documentación de Shopify.

• Optimizar los flujos de trabajo de traducción: Las funciones de memoria de traducción y glosario de Weglotte ayudan a mantener la coherencia en un gran catálogo de productos. Esto garantiza que los términos se traducen uniformemente, asegurando que el mensaje de tu marca es coherente en los distintos idiomas.

Comparación entre Weglot el selector de idioma nativo de Shopify

Shopify proporciona a los usuarios las herramientas básicas necesarias para traducir sus tiendas a varios idiomas, pero existen limitaciones.

En cambio, Weglot ofrece una solución de traducción completa y se enfrenta a las limitaciones de Shopify. Como resultado, la plataforma es una opción más adecuada para los usuarios que desean un enfoque no intervencionista en la gestión de contenidos multilingües.

Supera las barreras lingüísticas: Implementa Weglot en tu tienda Shopify

Como hemos visto, Weglot ventajas únicas para las tiendas Shopify, lo que lo convierte en la solución ideal para superar las barreras lingüísticas en línea. Con el selector de idioma Weglot, obtienes personalizaciones adicionales para mejorar la experiencia del usuario, mientras que el Visual Editor realizar traducciones en contexto, lo que te permite perfeccionar el contenido donde sea necesario. Incluso puedes solicitar traducciones profesionales directamente desde el panel de control para obtener una mayor precisión.

Weglot se integra con las aplicaciones más populares de Shopify, incluidas las herramientas de búsqueda inteligente y las galerías de imágenes, garantizando que tu tienda siga siendo totalmente funcional en varios idiomas. Además, nuestra plataforma crea subdominios o subdirectorios específicos para cada idioma, impulsando significativamente tus esfuerzos de SEO.

Lo mejor de todo es que Weglot es compatible con todos los sistemas de gestión de contenidos, lo que significa que si te alejas de Shopify, no tienes por qué perder las ventajas de Weglot.

¡Empieza hoy mismo tu prueba gratuita de 14 días con Weglot y disfruta de una web multilingüe en cuestión de minutos!

Problemas habituales y soluciones rápidas

A veces, los selectores de idioma desaparecen tras actualizar un tema, instalar una aplicación o modificar el diseño. Estos problemas suelen deberse a la configuración del tema o a la ubicación del selector. Vamos a resolver los cuatro problemas más comunes.

1. ¿Por qué tengo dos botones para cambiar de idioma?

Si ves dos selectores, suele significar que tanto el selector nativo de Shopify como la versión de tu app (como Weglot) están activos al mismo tiempo. También es posible que tengas configurados varios selectores de Weglot .

Empieza abriendo el panel de administración de Shopify > Tienda online > Temas > Editar tema. Busca en el encabezado y el pie de página el selector de idioma nativo de Shopify; desactívalo si utilizas Weglot y guarda los cambios. La configuración exacta depende de tu tema. Además, mantén activado el selector de país/región si los clientes lo necesitan para elegir su mercado.

Si ambos selectores pertenecen a Weglot, abre Weglot Dashboard > Ajustes > Selector de idioma > Editor de selectores. Comprueba qué selectores están configurados y si están configurados para aparecer en los mismos tamaños de pantalla. Weglot admite selectores independientes para ordenador y móvil, así que asegúrate de que no aparezcan juntos sin querer.

Si has añadido enlaces de idiomas a la navegación de tu tienda de Shopify, comprueba si aparecen junto al selector habitual de Weglot. Elimina cualquier elemento redundante del menú si no necesitas ambos.

Si necesitas más ayuda sobre cómo colocar e inicializar el selector de idioma personalizado, echa un vistazo a la documentación oficial de Shopify sobre el selector de idioma en Weglot .

2. ¿Por qué ha desaparecido mi selector de idioma tras actualizar el tema?

Si el selector de idioma desaparece tras actualizar tu tema de Shopify, eso no significa necesariamente que se hayan perdido tus traducciones. El problema puede estar en la configuración del selector o en su ubicación dentro del tema actualizado.

Prueba una de las URL traducidas de tu tienda, como yourstore.com/fr/, si tu configuración utiliza subdirectorios por idioma. Si la página muestra contenido traducido pero no aparece el selector de idioma, es posible que el problema esté en la visualización del selector y no en las traducciones en sí.

Si usas el selector integrado de Shopify, comprueba bien que tus idiomas adicionales sigan estando publicados en Ajustes > Idiomas. Si no están marcados como «Publicados», no aparecerán en ningún sitio.

Si utilizas Weglot:

1. Comprueba que la opción « Weglot » esté activada: ve a Tienda online > Temas > Editar tema > Incrustaciones de aplicaciones, busca « Weglot » y actívala si está desactivada. Haz clic en «Guardar» y comprueba tu tienda.
2. Restablece la posición del selector: si sigue sin aparecer, abre Weglot Dashboard > Ajustes > Selector de idioma > Editor del selector. En «Posición», selecciona «Restablecer a la posición predeterminada». Así, el selector volverá a la esquina inferior derecha.

3. Elige una nueva posición si es necesario: si vuelve a aparecer el selector, es posible que su ubicación anterior ya no funcione con tu tema actualizado. Usa el editor del selector para arrastrarlo a una nueva posición dentro de un elemento que aparezca de forma constante en toda tu tienda y, a continuación, haz clic en «Guardar».

Si has añadido manualmente el selector de Weglot al código de tu tema, comprueba si la actualización ha conservado tu ubicación personalizada. Por ejemplo, si antes usabas <div id="weglot_here"></div>, comprueba que siga estando en la ubicación prevista. Si lo has eliminado, restáuralo desde la versión anterior del tema después de comprobar que su ubicación sea compatible con el diseño actualizado.

Además, comprueba tu tienda tanto en el ordenador como en el móvil. Si el selector funciona en el ordenador pero no en el móvil, puede que el problema esté en la configuración de visibilidad según el tamaño de pantalla o en el diseño para móvil de tu tema. Eso es lo que vamos a ver a continuación.

3. ¿Por qué no aparece el selector de idioma en el móvil?

Si el selector de idioma de Shopify aparece en el ordenador pero desaparece en el móvil, puede que esté oculto por el diseño móvil de tu tema o que esté configurado para mostrarse solo en pantallas más grandes.

Si utilizas el selector integrado de Shopify, abre Tienda online > Temas > Editar tema y selecciona la vista previa para móvil. Comprueba si el selector de idioma aparece en el pie de página, en el encabezado o en el menú móvil, según tu tema. Si no aparece, comprueba que la configuración correspondiente del selector de idioma esté activada. Es posible que algunos temas requieran una personalización adicional para mostrarlo en la ubicación que prefieras en la versión móvil.

Si utilizas Weglot:

1. Abre el panel de control deWeglot > Configuración > Selector de idioma > Editor del selector.
2. Selecciona tu conmutador actual en el menú desplegable de la esquina superior izquierda. En «Comportamiento» > «Mostrar en tamaños de pantalla específicos», comprueba que esté configurado para aparecer en dispositivos móviles.
3. Si quieres un diseño diferente para móvil, selecciona la vista móvil en la esquina inferior izquierda del editor, haz clic en el botón «+» para crear un selector independiente y arrástralo hasta donde prefieras.
4. Haz clic en «Guardar» y, a continuación, comprueba que los controladores para ordenador y móvil se muestren en los tamaños de pantalla previstos.

Si el encabezado de tu móvil no tiene suficiente espacio, también puedes añadir enlaces de idiomas al menú de navegación de tu móvil. Ve a Panel de administración de Shopify > Contenido > Menús, selecciona el menú que usa tu navegación móvil y añade una opción de menú para cada idioma usando el formato de enlace de Weglot, como por ejemplo: #Weglot-en para inglés o #Weglot-fr para francés. También puedes agrupar estos enlaces en un menú desplegable de «Idiomas» si tu tema lo permite.

Si el selector sigue sin aparecer, comprueba si algún CSS personalizado lo oculta en pantallas más pequeñas o si está dentro de un elemento de navegación exclusivo para ordenadores de sobremesa. Moverlo a una ubicación visible y fija podría resolver el problema.

4. ¿El selector funciona después de actualizar la página, pero no cuando se carga por primera vez?

Si el selector de idioma de Weglot solo aparece después de actualizar la página, es posible que el problema tenga que ver con la forma en que tu tema de Shopify carga el contenido o con la ubicación del selector.

Prueba estas soluciones:

1. Vuelve a ajustar la posición del selector igual que hicimos en el segundo problema de arriba. Si ahora el selector aparece siempre igual, puede que el problema esté en su ubicación anterior. Weglot recomienda colocarlo dentro de un elemento que esté presente en todas las páginas de tu tienda.
2. Comprueba las transiciones entre páginas de tu tema. Algunos temas de Shopify usan animaciones o navegación AJAX para pasar de una página a otra sin recargarlas por completo, lo que puede interferir con Weglot. Si tu tema ofrece estas opciones, ve a Tienda online > Temas > Editar tema > Configuración del tema y busca las secciones «Rendimiento» o «Animaciones». Weglot recomienda seleccionar «Sport» en lugar de «Ludicrous» y desactivar la opción «Animación entre páginas», siempre que estas opciones estén disponibles.
3. Comprueba cualquier código personalizado del selector. Si has personalizado manualmente la ubicación de Weglot, asegúrate de que la ubicación elegida exista cuando se cargue el selector. Si aparece un elemento de cabecera o de navegación más adelante, puede que haya que hacer algún trabajo adicional de integración.

Por último, prueba tu tienda en una ventana privada del navegador, empezando por la página de inicio y navegando por las distintas páginas de productos y colecciones. Si el problema persiste, ponte en contacto con el servicio de asistencia de Weglot indicando la URL de tu tienda, el nombre del tema y los pasos necesarios para reproducir el error.