Cómo aumentar las tasas de conversión móvil para tiendas en línea

Las personas pasan más tiempo en sus teléfonos que nunca. Los usamos para casi todo: operaciones bancarias, inversiones, consultar el clima, controlar los entrenamientos, escuchar música, navegar y, por supuesto, ir de compras.

Casi el 55% del tráfico del sitio web proviene de dispositivos móviles, y el 60% de los compradores en línea usan su teléfono para encontrar un producto primero. Si su tienda no brinda una experiencia de usuario fluida en dispositivos móviles, corre el riesgo de perder una gran parte de sus clientes potenciales.

Pero, ¿cómo puede optimizar su tienda en línea para aumentar las conversiones móviles?

Comience con un tema de WordPress receptivo

Un tema de WordPress de alta calidad es el punto de partida perfecto para una tienda en línea receptiva. Tu tema es la base de todo tu sitio, así que elige uno que ofrezca una gran experiencia en dispositivos de todos los tamaños.

Aquí hay algunos consejos para evaluar un tema:

• Pruebe la demostración del tema en tabletas y teléfonos. Dado que probablemente no tenga dispositivos en todos los tamaños de pantalla posibles, puede usar un sitio como la Herramienta de prueba de capacidad de respuesta del sitio web para simular la experiencia. Los elementos de demostración deben verse bien en todos los tamaños de pantalla: nada debe estar cortado, ser difícil de leer o de usar.
• Mientras mira la demostración del tema, cambie el tamaño de la ventana de su navegador. El contenido debe ajustarse en consecuencia y no debe cortarse nada.
• Busque funciones receptivas en la descripción del tema. Debe mencionar específicamente el "diseño receptivo" o discutir cómo se ajusta el tema para los dispositivos móviles.
• Ejecute la demostración del tema a través de la herramienta de prueba compatible con dispositivos móviles de Google.
• Revisa las reseñas. Lea las calificaciones y reseñas de los usuarios del tema. Esté atento a cualquier comentario negativo sobre el diseño receptivo.

También es importante que su tema se integre con WooCommerce. Esto evitará problemas de capacidad de respuesta junto con cualquier otro conflicto potencial.

El tema Storefront satisface todo lo anterior y es flexible y fácil de personalizar. Además, tiene una variedad de temas infantiles diseñados para industrias específicas: moda, juguetes, productos digitales, reservas y más.

Tenga en cuenta la usabilidad móvil

La usabilidad es la eficacia y eficiencia con la que los compradores pueden interactuar con su sitio web. La mala usabilidad afecta negativamente las ventas, las conversiones, la percepción de la marca y el SEO. Al revisar su experiencia móvil, la usabilidad debe ser su máxima prioridad. Considera lo siguiente:

• Piensa con el pulgar. Los usuarios móviles interactuarán con su sitio web usando solo sus pulgares. Todos los elementos en los que se puede hacer clic (enlaces, botones, elementos de menú, imágenes) deben ser lo suficientemente grandes para que un visitante del sitio pueda tocarlos fácilmente. Si son pequeños o están demasiado juntos, alguien podría hacer clic en el lugar equivocado por error.
• Evite las ventanas emergentes y otras distracciones. Dado que las pantallas móviles son tan pequeñas, es importante priorizar lo que muestra a los visitantes. Las ventanas emergentes que cubren toda la pantalla del móvil pueden interrumpir la experiencia de los usuarios e incluso tener efectos negativos en la clasificación de los motores de búsqueda; lo mismo ocurre con los anuncios y otras notificaciones. Si decide utilizar este tipo de contenido, asegúrese de que ocupe solo una parte de la pantalla y sea fácil de descartar.
• Implementar filtros de productos . Si ofrece muchos productos, es posible que un comprador en línea tenga que desplazarse durante un tiempo para encontrar lo que está buscando. Esto puede ser particularmente difícil en pantallas móviles que solo muestran un par de productos a la vez. Sus clientes pueden frustrarse y darse por vencidos antes de realizar una compra. Los filtros les ayudan a reducir las selecciones en función de lo que buscan. Pruebe una extensión como WooCommerce Product Filters para proporcionar la funcionalidad de clasificación.
• Utilice fuentes suficientemente grandes . Si el texto de su sitio web es demasiado pequeño, puede ser muy difícil para los usuarios móviles leer cualquier cosa; no deberían tener que pellizcar y hacer zoom para obtener información sobre sus productos. Según su sitio y las opciones de fuente, es posible que deba configurar diferentes tamaños de fuente para dispositivos móviles.
• Dividir texto. Si tiene páginas con mucha información, divídala en segmentos más pequeños que sean más fáciles de navegar en pantallas pequeñas. Puede hacer esto con acordeones, interruptores o viñetas. En publicaciones de blog largas, agregue enlaces a subsecciones que permitan a los usuarios saltar directamente a temas interesantes.

Simplificar la página de pago

Si bien las compras en dispositivos móviles han aumentado significativamente a lo largo de los años, las conversiones no son tan buenas. De hecho, la tasa de conversión de comercio electrónico promedio en dispositivos móviles es solo del 2,03 %, en comparación con el 3,83 % en computadoras de escritorio.

Su proceso de pago juega un papel fundamental en la realización de ventas. Hágalo lo más simple posible en dispositivos móviles para mejorar las tasas de conversión. Si sus clientes tardan demasiado en hacer una compra, se darán por vencidos y comprarán en otro lugar.

Eliminar campos innecesarios

Empiece por echar un vistazo de cerca a la información que necesita para pagar. ¿Todo es necesario? Probablemente encontrará que hay campos que puede eliminar:

• Si no vende a empresas, elimine el campo Nombre de la empresa.
• Si no puede pensar en un escenario en el que podría necesitar llamar a sus clientes, elimine el campo Teléfono.
• Si no acepta notas, elimine el campo Notas del pedido.

Cuantos menos campos, mejor, especialmente en dispositivos móviles. Lea más sobre cómo personalizar los campos de pago de WooCommerce.

Permitir salida de invitado

Las cuentas de los clientes son excelentes y aceleran el pago para los compradores que regresan al completar automáticamente su información y guardar los datos de su tarjeta de crédito. Pero ¿qué pasa con los nuevos clientes?

No todo el mundo quiere crear una cuenta en su tienda, especialmente en dispositivos móviles donde quieren pagar lo más rápido posible. De hecho, se cree que exigir cuentas de clientes contribuye al 35 % de los carritos abandonados.

Para permitir el pago de invitados con WooCommerce:

1. Vaya a WooCommerce → Configuración → Cuentas y privacidad.
2. Seleccione Permitir que los clientes realicen un pedido sin una cuenta.
3. Haga clic en el botón Guardar cambios en la parte inferior de la página.

Aprenda a determinar si el proceso de pago como invitado es adecuado para su tienda.

Aceptar inicio de sesión social

Sus clientes probablemente hayan iniciado sesión en cuentas de redes sociales en sus dispositivos móviles. Habilitar el inicio de sesión social en su sitio les permite iniciar sesión usando Facebook, Twitter, Google, Amazon y más para simplificar el pago y evitar que tengan que crear una nueva cuenta.

Habilite el inicio de sesión social de WooCommerce.

Aceptar múltiples opciones de pago

Aceptar más de una forma de pago acelera el pago. Si bien también puede permitir transacciones con tarjeta de crédito, habilitar opciones como PayPal o Amazon Pay les permite a los clientes pagar con cuentas existentes en lugar de sacar una tarjeta de crédito y escribir todos los detalles.

Ver integraciones de la pasarela de pago de WooCommerce

Haz que los campos de pago sean lo suficientemente altos

Es importante que los clientes puedan completar fácilmente los campos de pago en su sitio. Asegúrese de que los campos sean lo suficientemente altos para que puedan tocar y completar la información sin tener que acercar la imagen. Puede hacer esto con un simple CSS.

Comience usando el inspector del navegador en su página de pago. Esto le ayudará a identificar la clase de cada campo individual. Luego, use el siguiente código para cada clase específica; el campo Correo electrónico se utiliza en este ejemplo.

 /** Customize height of checkout fields **/ input[type='email'].input-text{ padding: 100px !important; }

Ajuste el relleno según su sitio específico y la configuración actual; es posible que deba jugar un poco para encontrar lo que funciona. También puede personalizar los dispositivos específicos a los que se aplica este código mediante consultas de medios.

Nota: Si no está familiarizado con el código y la resolución de posibles conflictos, es posible que desee seleccionar un WooExpert o Developer para obtener ayuda. No podemos proporcionar soporte para personalizaciones según nuestra Política de soporte.

Editar páginas de productos

Es importante que sus páginas de productos individuales también respondan. Los clientes deben poder leer los detalles del producto, hojear fotos y agregar artículos a su carrito.

Hacer que el botón Agregar al carrito sea fijo

Un botón adhesivo Agregar al carrito sigue al comprador por la página mientras lee la información del producto. Si están convencidos de comprar, no tienen que desplazarse hacia arriba para realizar una compra. De hecho, se ha demostrado que un botón fijo Agregar al carrito aumenta los pedidos en un 7,9 %. Agregue este CSS para que su botón sea fijo en los dispositivos móviles:

 /** Make the Add to Cart button sticky **/ @media only screen and (max-width: 900px) { .cart { position: fixed; bottom: 0; background: #ffffff; width: 100%; z-index: 3; } }

Es posible que deba jugar un poco con el CSS, según el tema y el diseño del sitio web. Pero si no desea editar el código, también puede usar un complemento como Sticky Add to Cart para WooCommerce.

Haz que las imágenes sean intuitivas

Cuando los compradores llegan a la página de un producto, esperan poder deslizar su galería de imágenes para ver más fotos y usar sus dedos para acercar un artículo. Estos gestos móviles son tan intuitivos que se hacen casi inconscientemente. Asegúrese de que su sitio los admita.

Agregue flechas o puntos para indicar cuando hay varias fotos. De lo contrario, es posible que los usuarios de sus dispositivos móviles ni siquiera sepan que pueden deslizar el dedo.

Prioriza la información importante

Asegúrese de que los clientes puedan ver la información crítica del producto sin tener que desplazarse mucho. Prioriza precios, variaciones (color, talla, etc.), descuentos, reseñas y otros detalles específicos de tus productos: Si vendes ropa, el material puede ser importante. O si es una tienda de electrónica, es posible que desee resaltar la garantía que viene con cada compra.

La información adicional, como las descripciones y especificaciones completas del producto (instrucciones de lavado, SKU, ingredientes, etc.) puede encontrarse más abajo en la página. De esta manera, si sus clientes quieren más información, pueden encontrarla fácilmente, pero si están contentos con solo lo básico, no se sentirán abrumados.

Simplifica tu menú móvil

Mantenga su menú principal en dispositivos móviles lo más simple posible. Una larga lista de páginas abrumará y confundirá a los visitantes del sitio. Redúzcalo a lo esencial, luego priorice el orden en que se enumeran, con las páginas más importantes primero.

The Good Batch acorta su menú móvil para incluir solo cinco páginas además de los enlaces Iniciar sesión y Carrito. Es simple y al grano.

Si necesita incluir muchas páginas, intente usar submenús con botones expandibles. Limite los elementos del menú principal y muestre los elementos del submenú cuando un usuario expanda cada uno. ¡Asegúrese de usar símbolos como flechas para indicar que un menú se expande!

Nuria ofrece cinco elementos de menú principales en el móvil con flechas al lado de cada uno, lo que indica que hay más opciones. Cuando un usuario hace clic, el menú principal se desliza para revelar un submenú con un botón "atrás" claro. Esto les permite mostrar todas las opciones necesarias sin abrumar a sus clientes.

Hay varias formas de mostrar los menús móviles, así que elija la que mejor se adapte a su audiencia. Incluyen:

• Un menú de hamburguesas . El símbolo de la hamburguesa son tres líneas apiladas verticalmente una encima de la otra. El menú está oculto hasta que un usuario hace clic en el símbolo. Esta es una excelente opción para sitios con muchas páginas, pero puede ser más difícil de encontrar para los visitantes del sitio.
• Un menú de pestañas . Esto se parece mucho a la navegación de escritorio típica y enumera los elementos del menú horizontalmente en la parte superior del sitio. Esto solo debe usarse para menús con enlaces mínimos; los usuarios no deberían tener que hacer zoom o desplazarse para ver todos los elementos.
• Un botón de acción flotante . Un botón con un icono de menú flota en la página y sigue al usuario cuando se desplaza. Al hacer clic, se expande para mostrar el menú. Esta es una buena manera de mantener accesible su menú principal, pero puede distraer o encubrir el contenido.
• Un menú desplegable . Se abre una barra de menú en la parte superior de la página cuando se hace clic para mostrar las opciones de la página. Ocupa un poco más de espacio que el menú de hamburguesas, pero los visitantes del sitio pueden verlo más fácilmente.

Por lo general, su tema incluirá estilos de menú receptivos. Si no es así, o si desea optar por una opción diferente, consulte estos complementos:

• Menú móvil de WP
• ShiftNav
• Menú receptivo

Independientemente de la opción que elija, asegúrese de que sea fácil de usar para sus clientes y se ajuste a sus necesidades. ¡Y recuerde, eso puede significar crear un menú móvil completamente separado!

Haga que las características importantes sean fáciles de encontrar

Con el espacio de pantalla limitado en los dispositivos móviles, es fácil que se pierdan elementos. Asegúrese de que los visitantes puedan encontrar la funcionalidad crítica rápidamente.

Hacer visible la barra de búsqueda

Muchos sitios web incluyen un cuadro de búsqueda en su barra lateral, pero generalmente se coloca en la parte inferior de la página en los dispositivos móviles. Es posible que la funcionalidad de búsqueda en el encabezado de su escritorio no encaje en el mismo espacio en un teléfono. Pero es una funcionalidad crítica para los compradores en línea, quienes pueden beneficiarse de la capacidad de buscar el producto que desean.

Una excelente solución es incluir la barra de búsqueda en el menú de su dispositivo móvil, donde los compradores la pueden ver fácilmente. Algunos temas ofrecen una configuración para esta funcionalidad, pero si el suyo no la ofrece, puede lograr lo mismo usando un código personalizado.

Abra su archivo header.php y agregue la siguiente función: <?php get_search_form(); ?> <?php get_search_form(); ?> . Luego, puede diseñarlo según sus necesidades usando CSS.

Y si no quiere tocar el código, un complemento como Ivory Search logra la misma funcionalidad.

Mostrar información de contacto claramente

Si incluye información de contacto en un pie de página o barra lateral, los usuarios móviles tendrán dificultades para verla porque tienen que desplazarse hasta la parte inferior de la página. Contrarresta eso con un enlace visible a tu página de contacto en el menú.

También es posible que desee incluir un número de teléfono y/o una dirección de correo electrónico en los que se pueda hacer clic en su menú principal para que los usuarios puedan ponerse en contacto fácilmente. Para hacer esto:

1. Navegue a Apariencia → Menú en su tablero de WordPress.
2. En el menú desplegable junto a "Seleccione un menú para editar", elija el menú correcto. Este sería su menú principal o su menú móvil, dependiendo de cómo haya configurado las cosas.
3. Expanda Enlaces personalizados en la columna de la izquierda.
4. En el cuadro URL , agregue el enlace apropiado. Para un número de teléfono, agregue tel:+18005553927, reemplazando los números con su número. Asegúrese de que no haya espacios u otros símbolos. Para una dirección de correo electrónico, agregue mailto:[email protected].
5. En el cuadro Texto del enlace , agregue el texto que se mostrará en su menú. Por ejemplo, podría decir "Llámenos" o "Llámenos al 800-555-3927".
6. Haga clic en el botón Agregar al menú y arrástrelo a la ubicación elegida.
7. Haga clic en el botón azul Guardar menú en la esquina inferior derecha.

Cuando un usuario hace clic en el número de teléfono en su dispositivo móvil, lo llamará automáticamente. Cuando hagan clic en su dirección de correo electrónico, se le abrirá un nuevo correo electrónico en su aplicación de correo electrónico predeterminada.

Haz que el carrito sea fácilmente accesible

Si un cliente quiere seguir comprando después de agregar un producto a su carrito, es importante que pueda editar ese carrito y pagar más tarde.

El complemento Mini Cart para WooCommerce agrega una opción de carrito a las versiones de escritorio y móvil de su sitio web. En el escritorio, el carrito incluye los nombres de los artículos, las fotos y los precios, y permite a los compradores editar las cantidades sin salir de la página. En el móvil, muestra la cantidad de artículos en su carrito y el total del pedido. Además, los compradores pueden acceder a la página del carrito con un solo clic.

Centrarse en la velocidad del sitio web

Si bien la velocidad del sitio web es importante en cualquier dispositivo, podría decirse que lo es más para los dispositivos pequeños. Los compradores móviles a menudo usan conexiones a Internet más lentas o datos móviles para navegar, por lo que debe hacer todo lo posible para asegurarse de que su sitio se cargue lo más rápido posible. El 53 % de los usuarios móviles abandonan un sitio si tarda más de tres segundos en cargarse, y la nueva indexación móvil primero de Google prioriza la versión móvil de su sitio web.

Comience por comprender el tiempo de carga actual de su sitio. GTMetrix y Pingdom Website Speed ​​Test pueden ayudarlo a comprender la velocidad de su sitio y ofrecer recomendaciones para mejorar. Google PageSpeed ​​Insights incluso ofrece una prueba específica para dispositivos móviles.

Luego, utilice los siguientes recursos para optimizar su sitio:

• Cómo optimizar las imágenes para acelerar su tienda en línea
• Primeros aspectos a considerar con WooCommerce y Speed
• ¿Por qué mi sitio WooCommerce es lento y cómo solucionarlo?
• Cómo lograr una puntuación de alto rendimiento en Google PageSpeed ​​Insights para WooCommerce
• Acelere su sitio de WooCommerce con estas características de Jetpack

También puede considerar habilitar AMP (Páginas móviles aceleradas), un marco creado por Google para crear experiencias móviles optimizadas y livianas. Es una excelente manera de acelerar las publicaciones de blog, especialmente para ciertas tiendas en línea. Obtenga más información sobre cómo mejorar la velocidad del sitio con AMP.

Prueba tu tienda online en el móvil

Es importante probar regularmente su tienda y comprender cómo funciona todo en los dispositivos móviles. El proceso para su sitio es similar a los pasos enumerados anteriormente para probar demostraciones de temas: use una combinación de herramientas como la prueba de optimización para dispositivos móviles de Google y métodos manuales como cambiar el tamaño de la ventana del navegador.

¡Prueba todo! Haga clic en cada enlace; desplazarse por cada página; y verifique cada pieza de funcionalidad. Todos los aspectos de su sitio deben ser fáciles de ver, leer y navegar en teléfonos y tabletas.

Unos pequeños cambios en los dispositivos móviles pueden marcar una gran diferencia en la satisfacción del cliente y las conversiones. ¿Buscas más consejos? Lea Cómo desbloquear el poder de WooCommerce en dispositivos móviles.