No existe un único conjunto de menús que sirva para todas las tiendas. Una tienda de moda con miles de SKU necesita una navegación muy distinta a la de una cafetería que vende unas pocas decenas de productos. Este artículo reúne cómo combinar los menús de Shopify según el tipo de tienda, basándome en lo que he observado tanto gestionando una tienda como viendo cómo lo hacen otras.
Antes de la tabla, un punto importante: el menú en escritorio y el menú en móvil no deberían ser iguales. La gente sostiene el teléfono con una mano y toca sobre todo con el pulgar. Según las observaciones de Steven Hoober, alrededor del 75% de las interacciones en móvil se hacen con el pulgar, y la zona más fácil de alcanzar es la mitad inferior de la pantalla. En escritorio ocurre lo contrario: la gente recorre la vista de arriba abajo, así que un menú horizontal en la parte superior tiene más sentido. Dos contextos distintos piden dos formas distintas de disponer el menú.
Una tabla sugerida para combinar menús de Shopify según el tipo de tienda
| Tipo de tienda | Escritorio | Móvil |
|---|---|---|
| Moda / Lifestyle, catálogo amplio | Mega Menu | Tab Bar + Slide Menu |
| Electrónica, muchas categorías técnicas | Mega Menu con filtros | Slide Menu |
| Restauración / Local, pocos productos | Simple Nav (menú horizontal sencillo) | Tab Bar |
| Belleza / Cuidado de la piel | Mega Menu con imágenes | Tab Bar + FAB de chat |
| Dropshipping, muchas líneas de producto | Mega Menu | Slide Menu |
Esta tabla es un punto de partida, no una regla. A continuación están las razones de cada fila, para que puedas ajustarla a tu propia tienda.
Moda y lifestyle: un catálogo amplio necesita un Mega Menu en escritorio
Las tiendas de moda suelen tener una estructura profunda: Hombre / Mujer, luego Parte superior / Parte inferior / Accesorios, después líneas de producto individuales, por temporada, por colección. Meter todo eso en un único desplegable vertical obliga al comprador a pasar el cursor por muchas capas.
En escritorio, un Mega Menu resuelve esto. Despliega las categorías en varias columnas dentro de un único panel grande, de modo que el usuario ve todo el árbol de productos a la vez en lugar de hacer clic por cada nivel. Para una tienda de ropa de mujer con decenas de líneas de producto, este suele ser el enfoque más limpio.
En móvil es diferente. Una pantalla estrecha no puede desplegar un Mega Menu, así que un enfoque habitual es una Tab Bar para las rutas más importantes (Inicio, Categorías, Carrito, Cuenta) fijada en la parte inferior de la pantalla, más un Slide Menu para la lista completa de categorías. La Tab Bar siempre queda al alcance del pulgar, mientras que el Slide Menu guarda el árbol de productos detallado para cuando el usuario quiere profundizar.
Electrónica: las categorías técnicas necesitan filtrado dentro del propio menú
La electrónica tiene sus propias particularidades. El comprador suele saber bastante bien lo que necesita: capacidad, marca, rango de precio, año del modelo. Por eso, para una tienda de electrónica, el Mega Menu en escritorio debería incluir algunos filtros o subgrupos dentro del propio menú, permitiendo al usuario saltar directamente a la rama correcta en lugar de recorrer toda la página de categoría.
Por ejemplo, una tienda de accesorios para ordenador podría dividir su Mega Menu en columnas por tipo (ratones, teclados, auriculares) y, dentro de cada columna, listar los rangos de precio o marcas más populares.
En móvil, como el árbol de categorías es largo y técnico, un Slide Menu funciona mejor que intentar meterlo todo en una Tab Bar. Un Slide Menu permite que el menú se anide en varios niveles de profundidad sin dejar de ser compacto. Si lo usas, ponle etiquetas de texto claras junto a los iconos. El Nielsen Norman Group midió esto en su momento y descubrió que los menús ocultos (al estilo hamburguesa) reducían casi a la mitad la probabilidad de que el usuario encontrara la navegación, en comparación con los menús visibles, así que no escondas el menú en exceso.
Restauración y negocios locales: con pocos productos, no compliques de más
Restaurantes, panaderías y comercios locales suelen tener solo unas pocas decenas de productos. Construir un Mega Menu para una tienda así es excesivo, e incluso puede hacer que la página quede más recargada de lo necesario.
En escritorio, un Simple Nav, un menú horizontal con unos pocos elementos como Carta, Sobre nosotros, Contacto, es suficiente. El comprador no necesita profundizar; necesita pedir rápido.
En móvil, una Tab Bar funciona muy bien aquí. Unos pocos botones de los más importantes, por ejemplo Carta, Pedir, Llamar, quedan listos en la parte inferior de la pantalla, justo en la zona del pulgar fácil de alcanzar. Una cafetería que venda online podría fijar los botones de Pedir y Llamar en la Tab Bar para que el cliente no tenga que desplazarse para encontrarlos.
Belleza y cuidado de la piel: apoyo en imágenes y asesoramiento
Los cosméticos se venden a través de imágenes y de confianza. El cliente a menudo duda sobre qué tipo le conviene según su piel, así que el menú también debería reflejarlo.
En escritorio, un Mega Menu con imágenes permite al cliente ver el producto o la línea de cuidado de la piel dentro del propio menú, en lugar de leer solo texto. Una tienda de belleza podría colocar una imagen representativa para cada línea (limpieza, hidratación, protección solar) junto al nombre de la categoría.
En móvil, además de una Tab Bar para la navegación principal, un FAB de chat flotante en una esquina encaja bastante bien en este sector. El cliente suele tener preguntas antes de comprar (puede usarlo mi piel, va bien con este otro), y un botón de chat siempre visible le permite preguntar al instante. Reducir la duda en esta etapa vale la pena: según el Baymard Institute, la tasa media de abandono de carrito en ecommerce ronda el 70%, lo que significa que por cada 10 personas que añaden al carrito, solo unas 3 completan la compra. Responder las preguntas a tiempo es una forma de retener a parte de ellas.
Dropshipping: muchas líneas de producto, prioriza una agrupación clara
Las tiendas de dropshipping suelen vender muchas categorías a la vez: artículos de cocina, accesorios para el móvil, juguetes, productos para el hogar. El reto es que esos grupos están dispersos y no tienen relación entre sí.
En escritorio, un Mega Menu ayuda a reunir cada categoría en su propia columna, de modo que el cliente vea de inmediato qué vende la tienda. Una estructura clara importa más que un diseño bonito, porque el cliente suele llegar desde anuncios y todavía no conoce la tienda.
En móvil, un Slide Menu maneja bien un gran número de categorías sin ocupar espacio. El usuario lo abre, elige una categoría y luego profundiza.
Por qué deberías configurar el móvil y el escritorio por separado
Lo que tienen en común los cinco casos anteriores es que ambos lados se configuran de forma distinta. Esto no es un detalle menor. Hoy la mayoría de los pedidos llegan desde el teléfono, y un menú de escritorio trasladado tal cual al móvil suele ser difícil de tocar y, además, lastra el peso de la página.
El rendimiento también merece atención. Google fija el umbral de unos buenos Core Web Vitals en un LCP por debajo de 2,5 segundos, un INP por debajo de 200 ms y un CLS por debajo de 0,1. Un menú pesado cargándose en cada dispositivo arrastra estos números a la baja con facilidad. En móvil, cada componente que añadas debería ser ligero.
Aquí es donde una herramienta como Navi+ resulta útil: te permite configurar los menús de escritorio y móvil por separado, arrastrar y soltar sin código, y conservar tu menú cuando cambias de tema. Puedes poner un Mega Menu para escritorio y una Tab Bar más un Slide Menu para móvil, sin tocar nunca los archivos del tema.
En resumen, elige tu menú según lo amplio que sea tu catálogo y cómo compra el cliente, y luego separa la configuración para los dos tipos de pantalla. La tabla de arriba es un punto de partida; el resto es probar y ajustar con los números reales de tu tienda.
Este artículo forma parte de la guía más amplia sobre Cómo elegir el tipo de menú adecuado para tu tienda Shopify.