Configurar un selector de idiomas en Magento es esencial. Esta característica es crucial para los sitios web dirigidos a una audiencia internacional, ya que la capacidad de cambiar fácilmente entre idiomas se ha convertido en una necesidad apremiante en el mercado actual.
Si bien el proceso puede parecer desalentador inicialmente, esta guía lo guiará a través de los pasos para configurar un selector de idiomas en su sitio web Magento de manera eficiente y efectiva. Si sigue estas instrucciones, podrá implementar esta valiosa función sin problemas, mejorando la capacidad de su sitio para atender a una audiencia diversa y multilingüe.
¿Por qué debería configurar un selector de idiomas para Magento ?
Aquí hay cuatro razones clave por las que debería configurar un selector de idiomas para Magento .
- Experiencia de usuario mejorada: un selector de idiomas permite a los visitantes acceder al contenido en su idioma preferido, mejorando su comprensión y compromiso con su sitio web. Por ejemplo, un cliente de habla hispana que visita una Magento puede cambiar fácilmente al español, lo que simplifica la búsqueda de productos, la lectura de descripciones y la realización de compras.
- Alcance de mercado ampliado: al ofrecer varios idiomas, puede dirigirse a una audiencia global e ingresar a nuevos mercados, lo que potencialmente aumentará su base de clientes y sus ventas. Por ejemplo, una tienda de ropa en línea en EE. UU. implementa un selector de idiomas con opciones para inglés, francés y alemán. Esto les permite comercializar sus productos de manera efectiva a clientes en Canadá y otros países europeos sin crear sitios web separados.
- Rendimiento de SEO mejorado: un selector de idiomas bien implementado puede impulsar sus de SEO multilingüe , haciendo que su sitio sea más visible en los resultados de búsqueda en diferentes idiomas y regiones. Por ejemplo, una Magento ofrece contenido tanto en inglés como en japonés. Cuando los usuarios japoneses buscan productos en su idioma, es más probable que las páginas japonesas de la tienda aparezcan en los resultados de búsqueda, lo que genera un tráfico más dirigido.
- Mayores tasas de conversión: cuando los visitantes pueden comprender los detalles del producto, las políticas y el proceso de compra en su idioma nativo, es más probable que completen transacciones y se conviertan en clientes. Por ejemplo, un cliente italiano que navega por una tienda internacional de productos de belleza en Magento encuentra la opción de cambiar al italiano. Ahora pueden comprender fácilmente los ingredientes del producto, las instrucciones de uso y las políticas de envío, lo que aumenta su confianza al comprar.
Al implementar estas funciones, hace que su Magento sea más accesible y fácil de usar para una audiencia global y diversa, lo que potencialmente aumenta el tráfico web , la participación y las ventas.
¿Cómo configurar un selector de idiomas en Magento ?
Los servicios de traducción de sitios web generalmente ofrecen esta funcionalidad, que puede adaptarse para satisfacer sus necesidades específicas.
Sin embargo, vale la pena señalar que no todos los servicios de traducción ofrecen un selector de idiomas que sea fácilmente personalizable y fácil de usar. Por lo tanto, es crucial seleccionar un servicio de traducción automática compatible con varios marcos y ofrecer una función de cambio de idioma flexible.
Un servicio que destaca por cumplir estos criterios es Linguise . Proporciona una función de cambio de idioma que es fácilmente personalizable y fácil de usar y se integra perfectamente con Magento .
Al aprovechar Linguise con Magento CMS, puede incorporar sin esfuerzo un selector de idiomas en su sitio web multilingüe. Con Linguise y su interfaz intuitiva, configurar y mantener un selector de idiomas en su Magento se vuelve mucho más sencillo. La siguiente sección describe los pasos para instalar Linguise en un sitio web Magento y configurar el selector de idiomas.
Paso 1: Regístrese para obtener una cuenta Linguise gratuita
Primero, regístrese para obtener una cuenta Linguise sin costo y aproveche un período de prueba de un mes. El proceso de registro es sencillo: simplemente proporcione su dirección de correo electrónico para crear sus credenciales de inicio de sesión.
Durante esta fase de prueba, tendrá acceso a las impresionantes funciones de Linguise . Una vez que finalice el período de prueba, serás redirigido automáticamente al panel Linguise .
Paso 2: Agregar el sitio web de dominio Magento
Después de crear exitosamente su Linguise , será redirigido al panel. Allí, deberá agregar la información del dominio de su sitio web . Busque la “Agregar dominio” y haga clic en ella. Luego se le presentará un formulario que contiene varios campos para completar:
- Detalles de la cuenta
- URL del sitio web
- Selección de plataforma (elija Magento )
- El idioma principal de su sitio
- Idiomas a los que deseas traducir
- Opción para traducir URL
- Configuración para traducción de contenido dinámico
Una vez que haya completado toda la información necesaria, haga clic en el botón "Siguiente paso".
En la siguiente etapa, deberá ingresar una clave API. Esta clave se le proporcionará y es esencial para el proceso de configuración.
Paso 3: cargue el script Linguise
El siguiente paso consiste en agregar el script de traducción Linguise a su servidor Magento :
- Obtenga el script de traducción PHP-JS de Linguise .
- Extraiga el contenido del archivo descargado.
- Transfiera los archivos extraídos al directorio principal de su instalación Magento .
Asegurarse de que:
- El script se ubica en el directorio de nivel superior de su sitio web junto con sus archivos Magento .
- La carpeta mantiene su nombre original, “ linguise ”.
Después de esto, debes incorporar tu clave API Linguise en el archivo Configuration.php que acabas de cargar. Abra este archivo para editarlo, ubique el texto del marcador de posición "REPLACE_BY_YOUR_TOKEN" y sustitúyalo con su clave API real, manteniéndola entre comillas.
Paso 4: Configurar la reescritura de URL para Magento
Acceda a su Magento y siga esta ruta a través del menú de la barra lateral: Tiendas > Configuración > Configuración > General > Web > Optimización de motores de búsqueda
Una vez allí, localice y active la opción “Usar reescritura del servidor web”.
A continuación, deberá configurar URL específicas del idioma en su archivo .htaccess. Abra el archivo .htaccess predeterminado Magento 2 y busque la línea que dice "RewriteEngine activado". Inmediatamente después de esta línea, insertará un fragmento de código específico.
Esta configuración permite Magento manejar y enrutar adecuadamente las solicitudes para versiones en diferentes idiomas de su sitio, mejorando su configuración multilingüe.
Recuerde, modificar el archivo .htaccess requiere especial atención a los detalles, ya que los cambios incorrectos pueden afectar la funcionalidad de su sitio. Si no se siente cómodo realizando estos cambios usted mismo, considere buscar ayuda de un desarrollador familiarizado con las configuraciones Magento .
RewriteEngine On
RewriteRule ^(af|sq|am|ar|hy|az|eu|be|bn|bs|bg|ca|ceb|ny|zh-cn|zh-tw|co|hr|cs|da|nl|en|eo|et|tl|fi|fr|fy|gl|ka|de|el|gu|ht|ha|haw|iw|hi|hmn|hu|is|ig|id|ga|it|ja|jw|kn|kk|km|ko|ku|ky|lo|la|lv|lt|lb|mk|mg|ms|ml|mt|mi|mr|mn|my|ne|no|ps|fa|pl|pt|pa|ro|ru|sm|gd|sr|st|sn|sd|si|sk|sl|so|es|su|sw|sv|tg|ta|te|th|tr|uk|ur|uz|vi|cy|xh|yi|yo|zu|zz-zz)(?:$|/)(.*)$ linguise/linguise.php?linguise_language=$1&original_url=$2 [L,QSA,END]
Paso 5: active y personalice el selector de idiomas
El selector de idioma es una ventana emergente de bandera que permite a los usuarios seleccionar su idioma preferido. Para cargarlo, copie el código proporcionado al final de la configuración del sitio web y colóquelo en el encabezado de su página HTML. El selector de idioma de bandera se cargará automáticamente.
Puede encontrar el código para copiar y cargar en el encabezado de su sitio web en su Linguise navegando a Su dominio > Configuración > Pestaña > Script PHP.
Este código debe insertarse en el encabezado de su página. Magento 2 le permite agregar contenido al encabezado de su página a través de los ajustes de configuración.
En el panel de administración, navegue hasta Contenido > Configuración y edite la vista predeterminada del tema de la tienda. A continuación, haga clic en la sección Encabezado HTML y pegue el script copiado en el campo de entrada Scripts y hojas de estilo. Finalmente, guarde la configuración.
El selector de idiomas se muestra inicialmente en una posición flotante en la parte inferior derecha de su sitio web. Puede personalizar su apariencia y ubicación navegando al Linguise > Configuración > Visualización de banderas de idioma.
Paso 6: configurar la pantalla principal
El selector de idiomas aparece de forma predeterminada en una posición flotante en la parte inferior derecha de su sitio web. Puede ajustar su apariencia y ubicación a través del Linguise yendo a Configuración > Visualización de banderas de idioma.
Paso 7: configurar el diseño de la bandera
Después de ajustar la configuración de la pantalla principal, puede personalizar aún más el diseño de las banderas de idioma.
- Visualización del nombre del idioma: puede optar por mostrar el nombre del idioma según el país o el idioma en sí, como "francés" o "francés".
- Tipo de bandera en inglés: esto es útil para idiomas con múltiples variaciones, como inglés estadounidense o británico, español, taiwanés, alemán y portugués.
- Estilo de bandera: seleccione la forma del icono de la bandera, ya sea redonda o rectangular.
Paso 8: establece el color y el tamaño
Después de finalizar el diseño de las banderas, puede proceder a personalizar el color y el tamaño de las banderas con las siguientes configuraciones:
- Radio del borde de la bandera: ajuste el radio del borde para el estilo de la bandera rectangular, medido en píxeles.
- Color del nombre del idioma: elija el color de texto predeterminado para el nombre del idioma.
- Color del idioma emergente: establezca el color del texto del título del idioma en el área emergente o desplegable.
- Tamaño de la bandera: ajusta el tamaño de los iconos de la bandera.
- Color al pasar el cursor sobre el nombre del idioma: defina el color del texto que aparece cuando el usuario pasa el cursor sobre el nombre del idioma.
- Color de desplazamiento del idioma emergente: especifique el color del texto que aparece cuando el usuario pasa el cursor sobre el título del idioma en el área emergente o desplegable.
Paso 9: Configura la sombra del cuadro de bandera
Por último, puede ajustar la configuración de sombra del cuadro de bandera. La primera opción le permite agregar un efecto de sombra a cada ícono de bandera que se muestra en su sitio web. La segunda opción controla el efecto de sombra cuando los usuarios pasan el mouse sobre las banderas de idioma.
Una vez que haya realizado todos los ajustes necesarios, haga clic en el Guardar para aplicar los cambios de personalización. Luego, vaya a su Magento para verificar que la configuración se haya aplicado correctamente. Esto le dará una idea de cómo se mostrará el selector de idiomas.
Después de completar la configuración, podrá ver el selector de idiomas en su sitio web multilingüe Magento .
Traduciremos automáticamente el sitio web Magento a otros idiomas, como por ejemplo el español.
4 estrategias para mejorar el selector de idiomas en Magento
Una vez que haya configurado el selector de idiomas en su Magento , debe comprender las estrategias óptimas para diseñar un selector de idiomas y optimizar su rendimiento para mejorar su sitio y la experiencia del usuario.
Implemente fácilmente indicadores de lenguaje
Es fundamental utilizar símbolos o banderas de idioma universalmente reconocidos en su selector de idiomas. Esto permite a los visitantes localizar y elegir su idioma preferido rápidamente. La implementación de símbolos familiares crea una experiencia de usuario intuitiva, lo que permite a los visitantes navegar sin esfuerzo a la versión del idioma deseado. La clave es seleccionar indicadores reconocidos mundialmente para evitar interpretaciones erróneas.
Por ejemplo, un sitio de comercio electrónico multilingüe que vende material deportivo. Su selector de idiomas podría usar una combinación de banderas de países y abreviaturas de idiomas:
- ES (para inglés)
- ES (para español)
- FR (para francés)
- DE (para alemán)
- JP (para japonés)
Este enfoque combina señales visuales (banderas) con texto (códigos de idioma), lo que facilita a los usuarios de diferentes orígenes identificar su idioma preferido. Las banderas se reconocen al instante, mientras que las abreviaturas aportan claridad adicional.
Por ejemplo, un visitante de habla hispana podría detectar rápidamente la bandera española y la abreviatura 'ES', lo que le permitiría cambiar el sitio al español con solo un clic. Este diseño fácil de usar mejora la experiencia de navegación general y potencialmente aumenta la participación y las conversiones en el sitio.
Combina nombres de idiomas y banderas
Si bien las banderas son visualmente atractivas, es beneficioso combinarlas con los nombres nativos de los idiomas. Esta estrategia ayuda a evitar confusiones, especialmente porque algunos idiomas se utilizan en varios países con banderas distintas.
El uso de los nombres de idiomas reales elimina la ambigüedad, lo que garantiza que los visitantes puedan identificar y elegir con precisión su idioma preferido sin malentendidos. Además, este enfoque promueve la inclusión y muestra respeto por la diversidad cultural.
Por ejemplo, un sitio web de noticias global que atiende a una audiencia diversa. Su selector de idiomas podría verse así.
En este caso:
- El uso de banderas proporciona pistas visuales rápidas.
- Los nombres de los idiomas están escritos en su escritura nativa (como japonés, francés, etc.), que los hablantes de ese idioma pueden reconocer instantáneamente.
Este enfoque es particularmente útil para idiomas como el español o el inglés que se hablan en varios países. Por ejemplo, un usuario de México o Argentina vería "Español" en lugar de elegir entre varias banderas de países de habla hispana. De manera similar, los usuarios del Reino Unido, EE. UU., Australia u otros países de habla inglesa pueden identificarse con “inglés” independientemente de la bandera utilizada.
Coloque estratégicamente el selector de idiomas
Es fundamental colocar el selector de idiomas en un lugar destacado y de fácil acceso en su sitio web. Las posiciones comunes y efectivas incluyen el encabezado, pie de página o menú de navegación principal. Estos espacios son intuitivos para la mayoría de los usuarios de la web y se alinean con sus expectativas cuando buscan opciones de idioma.
Mantener una ubicación consistente en todas las páginas garantiza que los visitantes puedan acceder fácilmente al selector de idiomas, independientemente de su punto de entrada o de la página actual. Esta coherencia contribuye a una experiencia de usuario fluida y predecible.
Por ejemplo, un sitio web internacional de reservas de hoteles que atiende a una audiencia global. Podrían implementar su estrategia de cambio de idioma de la siguiente manera.
- Ubicación del encabezado: el selector de idioma está ubicado en la esquina superior derecha del encabezado, al lado del ícono de la cuenta de usuario y el selector de moneda. Es visible en cada página y permite a los usuarios cambiar de idioma en cualquier momento durante su proceso de navegación o reserva.
- Diseño coherente: el selector de idiomas aparece como un ícono de globo terráqueo seguido del idioma actual (por ejemplo, “🌐 inglés”). Al hacer clic, se abre un menú desplegable con otras opciones de idioma.
- Copia de seguridad del pie de página: el pie de página incluye una lista basada en texto de todos los idiomas disponibles, lo que proporciona un punto de acceso alternativo.
Esta ubicación estratégica garantiza que, ya sea que un usuario acceda a la página de inicio, a la página de un hotel específico o a la página de confirmación de la reserva, pueda encontrar y utilizar fácilmente el selector de idiomas. Por ejemplo, un usuario francés que busca opciones de hoteles en Tokio puede cambiar rápidamente el sitio al francés para comprender mejor las descripciones de las habitaciones y los términos de la reserva, mejorando su experiencia de usuario y potencialmente aumentando la probabilidad de completar una reserva.
Mantenga la coherencia en el selector de idiomas en todas las páginas
Es vital asegurarse de que el selector de idiomas mantenga una apariencia y funcionalidad uniformes en todo su sitio web. Los usuarios deberían poder cambiar de idioma sin esfuerzo, independientemente de su página actual o del contenido que estén viendo. Esta coherencia proporciona una experiencia de usuario perfecta y refuerza la accesibilidad de las opciones de idioma, fomentando la confianza en su sitio web multilingüe.
Por ejemplo, una plataforma global de comercio electrónico que vende productos electrónicos. Así es como podrían implementar una estrategia consistente de cambio de idioma.
- Diseño uniforme: el selector de idiomas aparece como un ícono de globo terráqueo con el código de idioma actual (por ejemplo, “🌐 EN”) en la esquina superior derecha de cada página, incluidas listas de productos, páginas de productos individuales, carritos de compras y páginas de pago.
- Funcionalidad consistente: al hacer clic en el selector de idiomas siempre se abre el mismo menú desplegable con todos los idiomas disponibles, independientemente de la página.
- Preservación de contenido: cuando los usuarios cambian de idioma, permanecen en la misma página, pero el contenido se muestra en el idioma recién seleccionado. Por ejemplo, si un usuario está viendo las especificaciones de una computadora portátil en inglés y cambia a español, verá los mismos detalles de la computadora portátil, ahora en español.
- Estructura de URL: La estructura de la URL cambia constantemente al cambiar de idioma. Por ejemplo:
Estudio de caso: un cliente japonés que busca computadoras portátiles en la versión en inglés del sitio decide cambiar al japonés para comprender mejor. Hacen clic en el ícono "🌐 EN" en el encabezado, seleccionan "日本語" en el menú desplegable y la página se actualiza, mostrando los mismos detalles de la computadora portátil pero en japonés. La URL cambia de “/productos/…” a “/ja/製品/…”.
Esta experiencia consistente en todas las páginas y funciones del sitio garantiza que el usuario pueda navegar y comprar con confianza en su idioma preferido, lo que potencialmente aumenta su probabilidad de completar una compra y regresar al sitio en el futuro.
¡Configura el selector de idiomas en Magento con Linguise !
A estas alturas, deberías saber que estás configurando un selector de idiomas para un sitio web multilingüe Magento . Implementar un selector de idiomas puede ofrecer numerosos beneficios y personalizarse según nuestras directrices.
Optimizar su selector de idiomas puede mejorar significativamente la experiencia general del usuario en su Magento . El siguiente paso es crear una cuenta Linguise integrarla con su Magento y ajustar la configuración del selector de idiomas. Estas acciones mejorarán la experiencia del usuario, haciendo que su sitio de comercio electrónico multilingüe sea más accesible y fácil de usar.
Recuerde, un selector de idiomas bien implementado en su plataforma Magento puede generar una mejor participación, mayores conversiones y una mayor satisfacción del cliente en diferentes mercados lingüísticos. Es un elemento crucial en la creación de un sitio web verdaderamente multilingüe.