¿Cómo usar?
Mega Menu es uno de los tipos de menú más populares y efectivos, especialmente en escritorio. Los usuarios naturalmente esperan encontrar un Mega Menu justo debajo del encabezado del sitio web. Sin embargo, el menú predeterminado de Shopify suele ser simple, carece de una estructura sólida y ofrece poco o ningún soporte de imagen. Por eso deberías usar el Navi+ Mega Menu.
Beneficios Clave:
- Reemplaza completamente el menú mega simple predeterminado de Shopify
- Ofrece múltiples estilos de presentación con imágenes, rejillas y diseños de múltiples niveles para una experiencia rica y profesional
- Funciona sin problemas tanto en móvil como en escritorio para una experiencia consistente
FAQ:
1. No he decidido si usar la versión gratuita o de pago. ¿Puedo probar las plantillas de menú profesional?
¡Absolutamente! Los grupos de menú están principalmente para ayudar a los principiantes a evitar sentirse abrumados por las características avanzadas en Navi+ 😄. La mejor manera es probar los menús profesionales para explorar todas las características y opciones de diseño. Más tarde, puedes simplemente eliminar cualquier menú que no necesites o que consideres inadecuado.
2. ¿Crear un menú aquí hace que aparezca en mi sitio web de inmediato?
Aún no. Necesitarás publicar el menú correcto para que aparezca en tu sitio web. ¡No te preocupes, es fácil!
3. ¿Qué pasa si elijo la plantilla incorrecta o cometo un error?
No hay problema en absoluto. Puedes eliminarlo y crear uno nuevo en cualquier momento. Si estás probando un menú y quieres intentar otra plantilla, puedes guardar la actual como un archivo de respaldo y volver a abrirlo más tarde. Incluso puedes copiar y pegar partes entre menús (abriendo dos pestañas del navegador) para mantener tu trabajo anterior. ¡Siéntete libre de experimentar!
4. ¿Debería crear solo un menú o múltiples?
Deberías crear múltiples menús. Solo el menú activo se mostrará en tu sitio, pero puedes preparar muchas versiones — seleccionando diferentes plantillas o clonando menús. Los menús pueden configurarse para mostrar/ocultar según el tipo de página (inicio, producto, colección...), dispositivo (móvil o escritorio) o palabras clave de URL. ¡Así que adelante y construye menús que se adapten a cada situación!
Paso 1: Editar el árbol de menú
1.1. Entendiendo el Árbol de Menú
El árbol de menú es la parte más importante de cualquier menú: define la estructura.
Aquí hay un ejemplo de un árbol de menú de un mega menú de escritorio completo:
[+] Menú
[+] Categorías
[+] Alfabetos
Skateboarding
- Componentes (Nombre del grupo)
- Mesas
- Ejes
- Más (Enlace azul a detalle..)
- Completes
- Gorras (Nombre del grupo)
- Burton Lunchlap Earflap Hat
- Volcom Ramp Stone Adjustable Hat
- ...
[+] Accesorios
[+] Blogs
[+] Soporte
[+] Más
Este es un árbol de menú de 3 niveles. El nivel 1 incluye Menú, Categorías, Alfabetos, Skateboarding… y Más... Skateboarding tiene 5 submenús de nivel 2: Componentes, Mesas, Completes (Consiste en algunos submenús de nivel 3: Gorras, Burton Lunchlap Earflap Hat…)
Pasarás la mayor parte de tu tiempo construyendo este árbol de menú para tu sitio web, ayudando a los clientes a encontrar el contenido que están buscando.
1.2. Interacciones Básicas con el Árbol de Menú
Puedes arrastrar y soltar elementos del menú hacia arriba y hacia abajo o de izquierda a derecha para cambiar su posición y relaciones padre-hijo en el árbol de menú.
Cuando pasas el cursor sobre cualquier elemento del menú, verás opciones adicionales: editar los detalles del elemento, eliminarlo del árbol de menú o copiar y pegarlo en otro lugar.
Consejo: Puedes copiar un elemento de menú de un menú a otro abriendo la aplicación Navi+ en dos pestañas del navegador.
1.3. ¡IMPORTANTE! Elimina los elementos de menú de muestra y mantén solo la estructura que deseas.
Esta es una situación común al crear un menú con Navi+. Cuando creas un nuevo menú, incluimos un ejemplo completo con elementos de menú populares para mostrar ideas de diseño y permitirte copiar/pegar según sea necesario. Sin embargo, si eres nuevo en Navi+ y usas el plan Starter, verás muchas advertencias rojas (i) para características que no están disponibles, como subir imágenes o usar interacciones avanzadas.
Si te gustan estas características avanzadas, considera actualizar a un plan Business o Elite. Pero si deseas continuar con el plan Starter, por favor encuentra y elimina los elementos de menú con advertencias rojas (i).
Consejo Importante: Cuando aparezca la confirmación de eliminación, activa “No preguntar de nuevo la próxima vez” para eliminar más rápido.
1.4. Agregar elementos de menú al Árbol de Menú
Para agregar un elemento de menú, tienes dos opciones:
Opción 1 **(No recomendado si eres nuevo en Navi+)**: Haz clic en “Agregar menú” para insertar un elemento de menú en blanco al final del árbol de menú. Este método requiere un buen entendimiento de la configuración de los elementos del menú, que cubriremos a continuación. Puede parecer abrumador al principio, así que puedes explorar esto más tarde.
Opción 2 (Recomendada): Ya hemos preparado muchas plantillas de elementos de menú bien diseñadas para ti. Simplemente cópialas y pégalas en el lugar correcto. Después de terminar tu árbol de menú, solo elimina las plantillas no utilizadas.
1.5. ¡IMPORTANTE! El atributo “Es elemento de menú de múltiples columnas” (solo disponible para escritorio y para menús Mega).
Esta es una característica altamente especializada diseñada específicamente para menús Mega de escritorio. Se utiliza cuando necesitas un elemento de menú de pantalla completa con múltiples columnas. Cada columna puede configurarse con anchos personalizados (por ejemplo, 3/12, 4/12, 6/12…). El elemento de menú de múltiples columnas es extremadamente poderoso y flexible para construir diseños de menú complejos adaptados a tus necesidades.
Si no necesitas diseños complejos como elementos de menú de múltiples columnas — o planeas usarlos más tarde — puedes eliminarlos de forma segura de tus elementos de menú de nivel 1.
Ver instrucciones detalladas sobre cómo usar el atributo “Es elemento de menú de múltiples columnas”.
Cuando un elemento de menú de nivel 1 está configurado como “Es elemento de menú de múltiples columnas”, se resaltará en amarillo claro en el Árbol de Menú, y sus elementos de menú de nivel 2 se convertirán automáticamente en Columnas (con un ícono rojo), independientemente de cualquier otro atributo que asignes.
Para estos elementos de menú de nivel 2 de columna, el único atributo utilizable es Diseño de ancho. Todos los elementos de submenú bajo esa columna se organizarán dentro de una sola columna.
¿Te parece difícil usar este tipo de menú? ¡Tienes razón! Pero los resultados que obtienes con este atributo son realmente WOW.
Si eliminas el atributo “Es menú de múltiples columnas” del elemento de menú de nivel 1, todo volverá al estado original.
¿Por qué necesitas el atributo “Ancho del desplegable cuando se expande”?
Por defecto, al usar el atributo “Es elemento de menú de múltiples columnas”, el submenú (desplegable) se expande al ancho de la pantalla completa (o basado en el tamaño del contenedor, generalmente 1280, 1366, 1440 o 100% — configurable en la pestaña Avanzado). Sin embargo, con un área tan amplia, puede que no siempre tengas suficiente contenido o ideas para llenar el espacio.
En este caso, puedes limitar el ancho del submenú (individualmente para cada elemento de menú de múltiples columnas) para evitar un aspecto vacío o desequilibrado.
Ejemplo: Puedes crear un menú con un ancho de 700px y dos columnas de 6/12 cada una. De esta manera, aún obtienes un diseño espacioso sin desperdiciar demasiado espacio en pantalla.