La función nativa Localize de Webflow puede traducir casi todo en tu sitio, excepto los productos de tu tienda. Aquí te mostramos cómo Weglot llena ese vacío y hace que una tienda Webflow sea multilingüe.
Vender en nuevos países suele empezar con un plan de traducción, y en Webflow ese plan choca contra un muro en cuanto aparecen los productos. La localización nativa gestiona páginas estáticas, elementos del CMS, metadatos e imágenes, pero una tienda de Webflow Ecommerce es otra historia.
La propia documentación de Webflow es directa al respecto: Localize no es compatible con las funciones del plan Ecommerce, por lo que los productos, las categorías y las páginas no se pueden localizar cuando Localize y Ecommerce están activados a la vez. Esa es la razón por la que una tienda Webflow multilingüe necesita una capa que la localización nativa no proporciona.
Weglot llena ese vacío con una capa de traducción que lee todo lo que aparece en la página, incluidos los textos de los productos y del proceso de pago. Esta guía cubre cuándo recurrir a ella, cómo integrarla en una tienda Webflow y dónde se esconden los detalles de SEO. Las etiquetas del panel de control de Weglot cambian con el tiempo, así que toma las pantallas de aquí como un mapa y confirma los pasos exactos en la documentación de Weglot.
Por qué Webflow Localize no puede localizar una tienda de Ecommerce
Webflow Localize es un sistema de localización nativo potente, pero marca una línea clara en el Ecommerce. Saber exactamente dónde se sitúa esa línea te indica qué partes de una tienda global aún necesitan una capa de terceros y cuáles ya gestiona Webflow por ti.
La propia función Localize de Webflow es muy completa.
Aquí tienes lo que ya cubre en un sitio normal:
- URLs localizadas: cada idioma tiene su propio subdirectorio y slugs específicos.
- Metadatos localizados: los títulos de página y las meta descripciones se traducen según el idioma.
- Mapa del sitio localizado: los motores de búsqueda ven todos los idiomas recopilados en un solo mapa del sitio.
- Páginas estáticas y elementos del CMS: el texto en el lienzo y el contenido de las colecciones se traducen según el idioma.
- Imágenes y texto alternativo: puedes cambiar los elementos visuales y reescribir el texto alternativo para cada mercado.
Para un sitio de contenido o marketing, esa lista suele ser suficiente. La excepción es la tienda: los productos, las categorías y las páginas de Ecommerce quedan fuera de lo que Localize puede traducir, por lo que una tienda Webflow que llega a nuevos mercados tiene que buscar en otra parte para eso.
Weglot encaja en ese vacío como una capa de JavaScript, y su lugar en una estructura de Webflow se ve así:
Debido a que esa biblioteca funciona sobre el resultado renderizado en lugar del modelo de datos del CMS, llega a las descripciones de productos, al carrito y al texto de pago que Localize deja en el idioma original. Esa única diferencia es lo que hace que sea ideal para una tienda y no solo para un blog.
Qué necesitas para traducir una tienda Webflow con Weglot
Dos cuentas y una decisión sobre el dominio cubren todo lo que esta configuración necesita. Nada de esto toca el modelo de datos de tu tienda ni te pide exportar contenido, porque Weglot lee el sitio publicado tal como lo hace el navegador de un visitante.
Ten esto listo antes de empezar:
- Un plan de sitio Webflow de pago: la inyección de código personalizado está desactivada en el plan Starter gratuito, y el fragmento de Weglot lo necesita.
- Una cuenta de Weglot: el nivel gratuito traduce un sitio pequeño a un idioma, mientras que los catálogos más grandes requieren un plan de pago.
- Un dominio personalizado: las URL específicas por idioma y su valor SEO solo funcionan en un dominio real, no en una dirección de prueba .webflow.io.
- Tus idiomas objetivo: decide a qué mercados vas a traducir, ya que tanto el recuento de palabras como el precio dependen de esa lista.
Una vez que tengas las cuentas y el dominio listos, el resto es solo copiar y pegar en dos lugares: la configuración de tu sitio Webflow y el panel de control de Weglot.
5 pasos para añadir la traducción de Weglot a una tienda Webflow
El proceso va de Weglot a Webflow y viceversa. Creas un proyecto, insertas un script en Webflow, decides cómo se verán las URL traducidas y colocas el selector de idioma donde los visitantes esperan encontrarlo. Sigue este orden para que tus decisiones de SEO no te den problemas más adelante.
1. Crea un proyecto de Weglot para tu sitio
Empieza en el panel de control de Weglot y crea un proyecto nuevo, seleccionando Webflow como tecnología para que Weglot aplique las reglas de detección de contenido adecuadas. Te pedirá el sitio que vas a traducir: introduce tu dominio personalizado en lugar de una dirección de prueba .webflow.io, ya que el dominio de prueba no trasladará las traducciones a la versión final. Si el dominio personalizado aún no está activo, elige la opción de conectar mi sitio web en vivo y usa el modo solo JavaScript mientras haces pruebas. El proyecto será el lugar donde vivan todas las traducciones, reglas de glosario y recuentos de palabras, así que considéralo la fuente de verdad para la parte multilingüe de tu tienda.
2. Configura tus idiomas de origen y destino
Dentro del proyecto, establece el idioma original para que coincida con el idioma en el que creaste la tienda Webflow y, a continuación, añade cada idioma en el que quieras vender. Weglot mide el recuento de palabras basándose en esta lista, por lo que añadir un idioma más tarde aumentará el total de palabras traducidas por el que se factura tu plan. En cuanto configures los idiomas, se ejecutará automáticamente una primera pasada de traducción automática, lo que te dará algo que revisar en lugar de empezar de cero. Puedes perfeccionar cualquier cadena manualmente, bloquear nombres de marca y términos de producto con un glosario, y excluir el contenido que no quieras tocar, todo desde el panel de control. Confirma que la lista de idiomas es correcta antes de publicar, ya que determinará tanto el selector como las URL que configurarás a continuación.
3. Añade el fragmento de Weglot a tu sitio Webflow
Weglot se compone de dos etiquetas de script: una carga la biblioteca y la otra la inicializa con la clave API de tu proyecto. En el panel de control de Webflow, abre la configuración del sitio y busca la pestaña de código personalizado (Custom Code).
Añade ambas etiquetas al campo Head Code, sustituyendo la clave por la tuya:
<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
Weglot.initialize({
api_key: 'YOUR_API_KEY'
});
</script>
Reemplaza YOUR_API_KEY con la clave que aparece en tu panel de Weglot, guarda los cambios y publica el sitio. El fragmento solo se ejecuta en el sitio publicado y no dentro del lienzo del Diseñador, por lo que las traducciones y el selector predeterminado aparecerán una vez que el sitio esté en vivo. Si no cambia nada después de publicar, lo primero que debes comprobar es si la clave es incorrecta o falta.
4. Elige una estructura de URL para que los motores de búsqueda indexen cada idioma
La forma en que se direccionan las páginas traducidas determina si los motores de búsqueda tratan cada idioma como su propia página indexable. Weglot ofrece tres estructuras para un sitio Webflow, y la elección depende de si tienes un dominio personalizado y de cómo quieras consolidar las señales de SEO.
Estas son las tres opciones y dónde encaja cada una:
Tanto el subdominio como el subdirectorio generan URL indexables y específicas para cada idioma, mientras que el modo de solo JavaScript no lo hace, así que resérvalo para pruebas. En las opciones indexables, Weglot inserta etiquetas hreflang, la señal que utiliza Google para conectar una página con sus versiones en otros idiomas. Estas etiquetas deben ser bidireccionales, ya que Google ignora hreflang a menos que cada versión de idioma apunte a las demás, algo que Weglot gestiona automáticamente para las páginas que genera.
5. Coloca el selector de idioma en tu diseño de Webflow
Por defecto, Weglot coloca un selector de idioma en la esquina inferior derecha del sitio publicado, que rara vez es donde lo quieres. Para moverlo a tu barra de navegación o pie de página, añade un elemento HTML Embed en Webflow en el lugar exacto y dale a Weglot un objetivo donde renderizarse.
Pega este div vacío en el elemento Embed:
<div id="weglot_here"></div>
Weglot detecta ese div en el sitio publicado y renderiza el selector dentro de él en lugar de en la esquina predeterminada. Si prefieres gestionar los cambios de idioma desde enlaces de menú existentes, Weglot también lee enlaces escritos con el formato #Weglot-, donde #Weglot-fr cambia al francés (la W mayúscula es obligatoria). En cualquier caso, el selector solo aparece una vez que el sitio está publicado, así que compruébalo en la URL real y no en el lienzo de diseño.
¿Por qué fallan las traducciones de Weglot en un sitio de Webflow? Consejos para solucionar problemas
La mayoría de los problemas de Weglot en Webflow se deben a tres factores: dónde se ejecuta el script, si el sitio tiene un dominio real y cuántas palabras permite el plan. Cada uno se manifiesta con un síntoma distinto, por lo que el síntoma suele señalar directamente a la causa.
El selector de idioma nunca aparece
Causa: el script de Weglot solo se ejecuta en el sitio publicado, por lo que no se muestra nada durante la vista previa en el Webflow Designer, y un selector colocado en un bloque de código HTML tampoco se renderizará en el lienzo.
Solución: publica el sitio y abre la URL en vivo. Si el selector predeterminado sigue sin cargar, verifica que ambas etiquetas de script estén en el código del encabezado (Head Code) de todo el sitio y que la clave API coincida exactamente con la de tu panel de control de Weglot.
Los productos y el texto de pago permanecen en el idioma original
Causa: esta es una limitación nativa de Localize y no un error de Weglot. Si Webflow Localize está habilitado junto con la tienda, deja los productos, las categorías y las páginas de comercio electrónico sin traducir.
Solución: deja que Weglot se encargue de la traducción de la tienda. Confirma que el texto del producto y del carrito esté presente en la salida de la página que escanea Weglot, luego añade manualmente cualquier cadena que falte desde el panel de control de Weglot.
Los motores de búsqueda solo indexan el idioma original
Causa: el sitio está ejecutando el modo de solo JavaScript de Weglot, el cual no crea URLs separadas, por lo que no hay nada específico de cada idioma para que un rastreador lo indexe.
Solución: cambia a una estructura de subdominio o subdirectorio en tu dominio personalizado. Ambos generan URLs indexables y permiten que Weglot emita las etiquetas hreflang que leen los motores de búsqueda, algo que el modo de solo JavaScript no puede hacer.
Las traducciones se detienen a mitad del sitio
Causa: la cuenta ha alcanzado su límite de palabras traducidas y Weglot pausa la traducción de contenido nuevo hasta que se amplíe el plan o se eliminen traducciones antiguas.
Solución: compara el recuento de palabras en el panel de control con tu plan, luego elimina idiomas no utilizados o actualiza tu suscripción. El recuento de palabras aumenta con el número de idiomas de destino, por lo que un catálogo grande en varios idiomas crece más rápido de lo que esperas.
Lo que puedes construir con Weglot y Webflow
Con la tienda, el CMS y las páginas de marketing traduciéndose desde un mismo script, un sitio de Webflow puede atender a todos los mercados desde una única versión en lugar de tener que reconstruirlo por separado para cada idioma.
Eso abre algunas opciones que antes eran complicadas:
- Catálogos de productos multilingües: los nuevos elementos de la colección se traducen a medida que se publican, por lo que una tienda en crecimiento se mantiene localizada sin necesidad de etiquetado manual.
- Páginas localizadas listas para SEO: las URLs específicas por idioma, las etiquetas hreflang y los metadatos traducidos permiten que cada mercado posicione por su cuenta.
- Implementaciones ideales para agencias: la misma configuración de script y panel de control se repite en los sitios de los clientes sin tener que reconstruir la estructura de las páginas.
- Términos de marca coherentes: las reglas del glosario mantienen los nombres de los productos y la terminología técnica estables en todos los idiomas.
Los pasos de instalación actuales de Weglot, el fragmento exacto y los detalles de su API se encuentran en la página de integración de Webflow, que es el lugar donde empezar una construcción real. Para el lado programático, como sincronizar elementos de colección traducidos o activar traducciones a partir de cambios en el CMS, la documentación para desarrolladores de Webflow cubre la API de datos y los webhooks que lo hacen posible.
Preguntas frecuentes
¿Weglot reemplaza a Webflow Localize?
No necesariamente. Para un sitio de contenido o marketing, Webflow Localize suele ser suficiente. La ventaja de Weglot está en la tienda: como Localize no puede traducir productos, categorías o páginas de Ecommerce, Weglot se encarga de lo que Localize deja en el idioma original.
¿Puede Weglot traducir el texto del carrito y el proceso de pago de Webflow?
Sí. Weglot traduce el texto que se muestra en el navegador, por lo que llega a las descripciones de productos, al contenido del carrito y al texto de pago. Esa es la diferencia clave con Localize, que no toca las funciones de los planes de Ecommerce.
¿Necesito un plan de pago de Webflow para usar Weglot?
Sí. Weglot se instala mediante código personalizado en el Head Code de tu sitio, y esa opción no está disponible en el plan gratuito Starter. Cualquier plan de sitio de pago lo permite. Por parte de Weglot, existe un nivel gratuito para sitios pequeños en un solo idioma.
¿Afectará Weglot a mi SEO?
No, si usas una estructura de URL indexable. Con un subdominio o subdirectorio y un dominio personalizado, Weglot crea URLs específicas por idioma y etiquetas hreflang, permitiendo que cada idioma posicione por su cuenta. El modo solo JavaScript no cambia URLs ni aporta beneficios SEO, por eso es mejor para pruebas.
