Cómo implementar el diseño de un menú a partir de una imagen en Shopify (Mega menú, Drawer, Barra de pestañas)
Tienes una captura de pantalla de un menú que te encanta y quieres tener en tu tienda Shopify. Puede ser la navegación de una marca referente, una maqueta cuidada de Figma que te envió tu diseñador o una idea guardada de Pinterest. Muestra columnas ordenadas, fotografías de colecciones, banners promocionales y tarjetas destacadas. Sin embargo, al abrir el panel de control de Shopify, surge un obstáculo de inmediato: no hay ningún botón para subir un diseño completo ni casillas para añadir imágenes dentro de los elementos de menú convencionales.
Una imagen de menú es una especificación, no una foto: divídela en estructura, bloques de contenido, estilo y comportamiento, luego construye cada parte con la herramienta adecuada y diseña a propósito la versión para móviles. Al descomponer la imagen en piezas, resulta mucho más fácil recrearla en Shopify.
Quick answer: how to turn a menu image into a working Shopify menu
Trata la imagen como una especificación técnica, no como un gráfico cerrado. Anota el tipo de menú, los niveles y columnas, los bloques de contenido (enlaces, imágenes, banners, productos), el estilo y el comportamiento móvil; luego construye cada parte con los ajustes de cabecera de tu tema, una app de menú o código a medida, diseñando la versión para smartphones por separado.
Para recrear cualquier diseño de menú en Shopify, sigue estos cinco pasos:
- Step 1: Break the image into a menu design spec: Registra niveles, columnas, tarjetas con imagen, colores de marca e interacciones de hover o clic.
- Step 2: Choose the build route: theme settings, a menu app, or custom code: Equilibra el esfuerzo de configuración, el control visual y el riesgo de mantenimiento en futuras actualizaciones del tema.
- Step 3: Map each part of the image to a building block: Asocia las zonas visuales con listas de enlaces, tarjetas de colección, banners o iconos.
- Step 4: Translate the desktop design for mobile: Transforma las cuadrículas amplias de escritorio en un panel lateral (drawer), una barra de pestañas inferior o una fila de iconos.
- Step 5: Match colors, fonts, and spacing to your brand: Utiliza la paleta y tipografía de tu propia tienda y comprueba el contraste accesible en lugar de copiar activos ajenos.
Los menús de Shopify almacenan enlaces; el aspecto visual depende de tu tema, una app o tu código. Dado que las estructuras de escritorio no encajan por sí solas en pantallas pequeñas, la navegación móvil requiere un diseño pensado específicamente para el tacto.
Why a Shopify menu rarely matches a design image out of the box
Cuando los comerciantes intentan trasladar una imagen de diseño a su tienda, suelen acudir a Contenido > Menús buscando herramientas de diseño visual. En su lugar, encuentran una lista plana de campos de texto.
En Shopify, los menús son árboles de enlaces anidados. Según la documentación oficial del Centro de ayuda de Shopify sobre menús desplegables, el elemento de nivel superior puede tener hasta dos niveles de menús desplegables anidados, lo que establece una profundidad máxima de tres niveles. En el código del tema, Shopify representa cada entrada como un objeto Liquid link. En la documentación de Liquid de Shopify, un elemento es simplemente “a link in a menu” (un enlace en un menú) con atributos como title y url, pero sin ningún campo de imagen nativo.
Añadir menús a tu tienda ayuda a tus clientes a navegar por ella y encontrar páginas importantes (Centro de ayuda de Shopify). No obstante, el menú principal y los menús desplegables se muestran en diferentes ubicaciones de tu tienda online según el tema que utilices. El panel de administración solo guarda las rutas de redirección. La apariencia gráfica—colores, tipografías, columnas y si los desplegables se muestran como listas verticales o amplios mega menús—depende del tema, de una app o del código personalizado.
La mayoría de capturas de referencia proceden de tiendas con temas distintos, código a medida o aplicaciones de terceros. Si tu captura corresponde a la demo oficial del tema que ya tienes instalado, consulta nuestra guía para hacer que tu menú se vea como la demo de tu tema. Pero si la imagen procede de otra marca o de un boceto personalizado, debes descomponerla en módulos y construirla por tu cuenta.
Step 1: Break the image into a menu design spec
Concept illustration: una imagen de diseño descompuesta en notas de estructura, bloques de contenido, estilo y comportamiento.
Antes de cambiar ajustes o escribir código, observa detenidamente tu imagen y elabora una especificación escrita atendiendo a cuatro áreas: estructura, bloques de contenido, estilo y comportamiento.
Structure: levels and columns
- Identificar la familia de menú: ¿Es una barra horizontal básica con desplegables sencillos, un mega menú extenso (panel ancho con varias columnas), un drawer lateral o una barra de pestañas fija en la parte inferior? Para evaluar las alternativas, revisa nuestra guía para elegir el tipo de menú adecuado.
- Contar elementos de primer nivel: Anota cuántos enlaces principales aparecen en la barra de cabecera (por ejemplo: Novedades, Colecciones, Historia, Rebajas).
- Comprobar los niveles anidados: Examina el interior del desplegable. ¿Muestra enlaces directos o están agrupados bajo subtítulos en negrita? Recuerda el límite de Shopify de tres niveles en total.
- Contar las columnas: Determina cuántas columnas verticales componen la cuadrícula.
Content blocks: links, images, banners, products
Haz un inventario de cada componente presente en el diseño:
- Columnas de enlaces de texto: Listas verticales de páginas o colecciones.
- Encabezados de grupo: Títulos destacados que agrupan enlaces relacionados.
- Tarjetas con imagen de colección: Miniaturas fotográficas con el nombre de la colección.
- Banners promocionales: Módulos gráficos horizontales o verticales para campañas o lookbooks.
- Productos destacados: Pequeñas fichas con foto, título y precio de producto.
- Iconos junto a los enlaces: Pequeños símbolos o insignias al lado del texto.
- Botones y llamadas a la acción (CTA): Enlaces con formato de botón llamativo (como Ver novedades).
Style: colors, fonts, spacing
Anota las pautas de estilo visual de forma cualitativa, sin obsesionarte con medir píxeles exactos en una imagen comprimida:
- Colores: Identifica el fondo del panel (blanco, gris suave o tono oscuro), color de enlaces, color al pasar el cursor y líneas divisorias.
- Tipografía: Observa la familia tipográfica (sans-serif limpia o con serifa clásica), el uso de mayúsculas y la diferencia de grosor entre títulos y enlaces.
- Espaciado: Comprueba si el menú se siente despejado con márgenes amplios o compacto para dar cabida a un catálogo extenso.
- Formas: Observa si las imágenes tienen esquinas rectas o un ligero redondeo.
Behavior: hover, click, and mobile
- Activación: ¿El desplegable aparece al pasar el cursor (hover) o requiere un clic?
- Despliegue secundario: En un menú lateral, ¿los subniveles se abren como acordeón hacia abajo o se deslizan horizontalmente?
- Versión móvil: ¿La imagen incluye el aspecto en smartphones? Si no es así, deberás definir cómo adaptar el diseño a pantallas táctiles.
Hoja de especificación del menú
Copia esta lista de verificación antes de ponerte a construir:
- Tipo de menú: Barra horizontal / Mega menú de escritorio / Drawer lateral / Barra de pestañas móvil
- Cantidad de enlaces superiores: (ej. 5 elementos)
- Profundidad de niveles: Nivel 1 / Nivel 2 / Nivel 3 (límite Shopify: 3 niveles)
- Número de columnas: (ej. 4 columnas en escritorio)
- Bloques de contenido: Listas de enlaces / Tarjetas de colección / Banners / Productos / Iconos / Botones
- Colores aproximados: Fondo, texto de enlaces, color de hover, bordes
- Estilo de fuentes: Sans-serif o serifa, mayúsculas o minúsculas, grosor de títulos
- Comportamiento en escritorio: Apertura por hover con pausa segura / Clic
- Estrategia para móvil: Drawer lateral / Filas de acordeón / Barra de pestañas fija / Tira de iconos
Step 2: Choose the build route: theme settings, a menu app, or custom code
Con tu especificación lista, escoge la vía de implementación. En Shopify dispones de tres caminos: ajustes nativos del tema, una app de menú o código a medida.
Analiza cada opción considerando el esfuerzo de configuración, el control de diseño y el riesgo de mantenimiento ante futuras actualizaciones del tema:
| Vía de construcción | Esfuerzo de montaje | Control del diseño | Riesgo en actualizaciones del tema | Ideal para |
|---|---|---|---|---|
| Ajustes del tema | Bajo (configuración en el editor de temas sin programar) | Limitado (restringido estrictamente a las funciones nativas del tema) | Bajo: las personalizaciones en el editor se conservan en las actualizaciones | Desplegables tradicionales y mega menús simples integrados en el tema |
| App de menú | Moderado (editor visual con arrastrar y soltar) | Alto (columnas a medida, tarjetas con fotos, banners, productos y pestañas móviles) | Bajo a Moderado: los app embeds no tocan código del tema; conviene revisar compatibilidad en grandes rediseños | Tiendas que buscan diseños llamativos y banners sin tener que programar |
| Código a medida | Alto (desarrollo en Liquid, CSS, JavaScript y bloques de esquema) | Máximo (control absoluto sobre la estructura, animaciones y comportamiento) | Alto: conviene guardar una copia del código personalizado antes de actualizar y puede que haya que volver a aplicarlo | Marcas con desarrolladores en plantilla o agencias técnicas contratadas |
Opción 1: Ajustes nativos del tema
Empieza revisando el personalizador de tu tema (Tienda online > Temas > Personalizar). Abre la sección de cabecera (Header) para ver las opciones disponibles. Algunos temas ofrecen mega menús nativos que muestran los enlaces anidados de Contenido > Menús en varias columnas.
La ventaja principal es la estabilidad: cualquier personalización realizada en el tema con el editor se copia y aplica al tema actualizado (Centro de ayuda de Shopify). Sin embargo, la libertad de diseño es acotada. Si tu tema no admite imágenes ni banners promocionales en la cabecera, los ajustes por sí solos no podrán generarlos. Para conocer estos límites, lee nuestro análisis sobre las limitaciones de los menús de temas en Shopify.
Opción 2: Una aplicación de menú especializada
Si tu imagen de referencia incluye banners publicitarios, imágenes de colecciones, productos o una barra de pestañas fija que tu tema no contempla, recurrir a una aplicación de menú es la vía más práctica.
Las aplicaciones modernas de Shopify utilizan extensiones de aplicaciones de temas. Cuando las apps emplean estas extensiones, los comerciantes no tienen que editar manualmente el código de su tema (Shopify Developer Documentation). Diseñas la navegación en el constructor visual de la aplicación y la activas mediante un app embed en el editor de temas.
El contrapunto es que añades una dependencia externa. Las aplicaciones pueden implicar una suscripción mensual, y Shopify advierte de que algunas apps podrían no ser compatibles con un tema nuevo al cambiar de tema (Centro de ayuda de Shopify). Con todo, para comerciantes sin perfil técnico, una app proporciona flexibilidad estética sin arriesgar la estabilidad del código del tema.
Opción 3: Código a medida
Si necesitas una animación exclusiva o un comportamiento particular que ni tu tema ni las apps ofrecen, el código personalizado brinda control absoluto. Un desarrollador modificará los archivos Liquid de la cabecera, añadirá reglas CSS e integrará campos personalizados (metafields).
A continuación se muestra un vídeo didáctico como ejemplo de la vía de código a medida, donde se explica cómo introducir fragmentos de código y metafields en un tema gratuito para incluir imágenes en el menú:
Aunque el código a medida permite cualquier diseño, acarrea una carga de mantenimiento real. El Centro de ayuda de Shopify recomienda: “Siempre debes guardar una copia de cualquier código personalizado antes de actualizar tu tema” (Centro de ayuda de Shopify). Como el código personalizado puede tener que volver a aplicarse en un tema actualizado, guarda una copia y revisa tu menú después de cada actualización.
Step 3: Map each part of the image to a building block
Una vez definida la vía técnica, vincula cada elemento visual de la especificación elaborada en el Paso 1 con un bloque práctico de navegación.
La tabla siguiente muestra cómo se materializan siete componentes habituales según la solución escogida:
| Elemento en la imagen | Función técnica | Ajustes del tema | App de menú | Código a medida |
|---|---|---|---|---|
| Enlaces de primer nivel | Barra principal con las categorías y destinos clave | Integrado: enlaces de Contenido > Menús asignados a la cabecera | Depende de la app: puede reemplazar o ampliar la barra de cabecera del tema | Bucle Liquid iterando sobre linklists.main-menu.links en la cabecera |
| Columnas de enlaces con título | Subenlaces agrupados bajo encabezados de categoría | Depende del tema: disponible si incluye bloques de mega menú | Depende de la app: busca un constructor de columnas con títulos de grupo | Bucles Liquid anidados (for child in link.links) maquetados con CSS Grid |
| Tarjetas de imagen de colección | Miniaturas con foto de la colección y su nombre | Depende del tema: algunos temas de pago toman la foto de colección | Depende de la app: busca bloques de tarjetas de imagen enlazadas a colecciones | Fragmento Liquid que consulta collection.featured_image o metafields |
| Banners promocionales | Módulo gráfico para ofertas de temporada o catálogos | Depende del tema: algunos temas incluyen un bloque promocional en la cabecera | Depende de la app: busca bloques de banner con tus propias imágenes y enlaces de botón | Bloques estáticos en el schema de la sección con selector de imagen |
| Productos destacados | Tarjeta pequeña con foto de producto, nombre y precio | Depende del tema | Depende de la app: busca bloques de producto | Consulta Liquid llamando a productos específicos mediante all_products[handle] |
| Iconos junto a los enlaces | Pequeños gráficos ilustrativos al lado del texto | Depende del tema | Depende de la app: busca selectores de iconos o subida de iconos propios | Código SVG en línea o pseudo-elementos CSS vinculados a los enlaces |
| Botones de acción (CTA) | Enlace resaltado con aspecto de botón (ej. Pedir cita) | Depende del tema: algunos temas permiten estilizar el último enlace | Depende de la app: busca estilos de botón para enlaces concretos del menú | Clase CSS personalizada asignada a las etiquetas de enlace en Liquid |
Principios de diseño para mega menús
Si tu imagen de muestra es un panel amplio con varias columnas, estás diseñando un mega menú. Los estudios de usabilidad del Nielsen Norman Group concluyen que los mega menús resultan muy efectivos porque muestran múltiples opciones en una distribución desplegable bidimensional. Esta disposición panorámica permite a los clientes examinar las categorías de un vistazo, sin verse obligados a navegar por menús desplegables angostos y sucesivos.
NN/g resalta asimismo que “los mega menús facilitan el uso de imágenes e iconos cuando resulte oportuno” (Nielsen Norman Group). Los apoyos visuales aceleran la identificación de categorías. Sin embargo, las imágenes deben potenciar la claridad. Acompaña cada imagen con un texto legible para que el usuario sepa con exactitud a dónde conduce el enlace.
Finalmente, NN/g aconseja “agrupar las opciones en conjuntos relacionados” (Nielsen Norman Group). Si tienes veinte enlaces de categorías, no los presentes en una sola lista desordenada. Divídelos bajo títulos de columna destacados (como Prendas superiores, Pantalones, Abrigos y Complementos). Si buscas profundizar en estos esquemas, consulta nuestra guía sobre buenas prácticas para mega menús.
Step 4: Translate the desktop design for mobile
Concept illustration: un mega menú de escritorio traducido a un drawer móvil, un menú de iconos y una barra de pestañas inferior.
Un error habitual al recrear un menú a partir de una captura de ordenador es descuidar la experiencia móvil. Un mega menú de escritorio aprovecha una pantalla ancha, mientras que un smartphone tiene una pantalla estrecha. No es posible encoger una cuadrícula de cuatro columnas en una pantalla pequeña sin arruinar la usabilidad.
Las investigaciones del Instituto Baymard constatan esta dificultad: “Durante las pruebas de usabilidad observamos de forma recurrente que la navegación móvil resulta especialmente difícil para los usuarios.” En teléfonos móviles, los compradores se enfrentan a textos reducidos y botones táctiles demasiado juntos.
Baymard observa que, la mayoría de las veces, el menú móvil está colapsado por defecto y oculto tras un icono de hamburguesa (Baymard Institute). Aunque ocultar la navegación ahorra espacio en pantalla, supone un coste notable: los experimentos del Nielsen Norman Group demuestran que la facilidad de descubrimiento se reduce casi a la mitad cuando la navegación principal queda oculta detrás de un icono fuera de pantalla.
Para mitigar esta pérdida de visibilidad, NN/g sugiere: “Si tu sitio tiene 4 o menos enlaces de navegación de nivel superior, muéstralos como enlaces visibles” (Nielsen Norman Group). En tiendas Shopify, este principio da pie a tres soluciones prácticas:
1. El menú lateral desplegable (drawer)
Para catálogos medios o grandes, el menú drawer lateral sigue siendo la base indispensable. Al tocar el icono de hamburguesa, el panel se despliega. Para adaptar tu mega menú a este formato:
- Convierte las columnas horizontales en listas verticales tipo acordeón.
- Emplea los títulos de columna como botones que se abren al tacto.
- Mantén los enlaces secundarios sangrados debajo con claridad.
- Sustituye los banners grandes por franjas horizontales discretas o descártalos en móvil para evitar un scroll excesivo.
2. La barra de pestañas fija en la parte inferior
Para que tus secciones prioritarias permanezcan siempre accesibles en móviles, añade una barra de pestañas fijada al borde inferior de la pantalla. Situada en la zona cómoda de alcance del pulgar, ofrece tres o cuatro accesos clave (como Inicio, Tienda, Buscador, Cesta). Los clientes pueden alternar entre áreas principales con un solo toque y sin necesidad de abrir el menú lateral. Amplía este enfoque en nuestro artículo sobre navegación móvil más allá del menú hamburguesa.
3. Tiras de iconos de categorías
Si tu diseño de escritorio incluía tarjetas con fotos de colecciones, adáptalas en móviles mediante una tira de iconos en la parte superior de las páginas o dentro del panel lateral. Pequeños iconos circulares acompañados de etiquetas como Vestidos, Camisetas o Zapatos permiten explorar visualmente sin saturar la pantalla en vertical.
Contar con estructuras diferenciadas para cada dispositivo garantiza una navegación fluida para todos tus clientes. Descubre los pasos detallados en nuestro tutorial sobre cómo crear menús independientes para escritorio y móvil.
Step 5: Match colors, fonts, and spacing to your brand
Recrear un menú a partir de una imagen consiste en adoptar su lógica espacial y de distribución—nunca en apropiarse de los activos protegidos de otra empresa. No copies logotipos registrados, imágenes con derechos de autor ni tipografías comerciales ajenas. En su lugar, traslada ese ritmo visual a la propia identidad de tu tienda.
Utilizar los estilos configurados en tu tema
Aplica la tipografía y los tonos de tu marca a la nueva navegación:
- Utiliza las fuentes ya definidas en tu tema (Tienda online > Temas > Personalizar > Configuración del tema > Tipografía) para asegurar la coherencia estética con el resto de la web.
- Elige para los fondos de los paneles los tonos neutros de tu tienda (como un blanco limpio o un beige claro).
- Emplea tu color de acento corporativo para los efectos de hover, distintivos de oferta o botones destacados.
Si deseas profundizar en la relación entre navegación e imagen corporativa, consulta nuestra guía para hacer que la navegación refleje tu marca.
Garantizar un contraste de texto accesible
La estética jamás debe restar legibilidad. Muchas capturas de inspiración en redes sociales muestran textos en gris claro sobre blanco o tipografías finas blancas sobre fotografías complejas. En una tienda en vivo, esa falta de contraste impide que muchos clientes puedan leer el menú con comodidad.
Las normas internacionales de accesibilidad definen umbrales matemáticos claros. Según las directrices WCAG 2.2 de la W3C Web Accessibility Initiative, el texto estándar precisa una relación de contraste mínima de 4.5:1 respecto a su fondo, y el texto de gran tamaño al menos 3:1.
Al personalizar los colores del menú:
- Asegúrate de que el color de los enlaces logre un contraste de al menos 4.5:1 frente al fondo del contenedor.
- Si sitúas texto o botones sobre un banner promocional, coloca una tarjeta opaca o ligeramente translúcida detrás de las letras para garantizar el contraste de 4.5:1 sin importar el brillo de la foto.
- Mantén una separación vertical suficiente entre enlaces para que en dispositivos móviles sea sencillo pulsar cada elemento sin tocar el adyacente por error.
Trade-offs: what not to copy pixel for pixel
Ante un diseño atractivo, resulta tentador querer replicar cada sombra paralela, cada microanimación y cada píxel de espaciado. Sin embargo, imitar una idea visual sin valorar las limitaciones funcionales suele originar problemas de uso y costes de mantenimiento imprevistos.
Evita caer en estas tres trampas de diseño:
1. Animaciones de hover excesivamente sensibles
Los bocetos estáticos transmiten la sensación de que los menús se abren al instante cuando el cursor apenas roza el enlace. En la práctica, la apertura inmediata resulta molesta: cuando los usuarios mueven el ratón hacia el buscador o el carrito, activan accidentalmente paneles enormes que bloquean la pantalla.
El Nielsen Norman Group aconseja una pequeña pausa: “El ratón debe permanecer inmóvil durante 0.5 segundos antes de mostrar nada.” Este breve retardo de medio segundo previene aperturas imprevistas durante los movimientos naturales del cursor.
La accesibilidad con teclado es igualmente crítica. Los tutoriales de la W3C Web Accessibility Initiative sobre menús desplegables indican con claridad: “Los submenús no deben abrirse al usar la tecla Tab para navegar por el menú.” Si una persona navega pulsando Tab, los submenús deben permanecer cerrados hasta que decida desplegarlos de forma expresa. Abrirlos automáticamente confunde y desorienta.
2. Crear más columnas de las que tu catálogo justifica
Si tu captura de referencia procede de unos grandes almacenes con muchas columnas y decenas de categorías, no fuerces un catálogo pequeño dentro de esa misma cuadrícula. Distribuir pocas referencias en demasiadas columnas produce espacios vacíos y columnas con un único enlace, transmitiendo una imagen de tienda desabastecida. Adapta la estructura a la dimensión real de tu inventario.
3. Diseños extravagantes que generan deuda de mantenimiento
Menús con divisiones diagonales, paneles asimétricos o efectos complejos de JavaScript pueden lucir espectaculares en una galería de diseño. No obstante, en Shopify requieren un código Liquid y scripts muy delicados.
Tal como recuerda la documentación de actualización de temas de Shopify, siempre debes guardar una copia de cualquier código personalizado antes de actualizar tu tema. Los menús muy personalizados pueden tener que revisarse y volver a aplicarse tras las actualizaciones.
Ningún software ni tema puede garantizar una fidelidad idéntica con cualquier boceto arbitrario. El objetivo no consiste en calcar cada píxel, sino en construir un sistema de navegación claro y fiable que facilite las compras a tus clientes.
Where Navi+ fits
Si tu imagen de inspiración incluye esquemas de múltiples columnas, tarjetas visuales de colecciones, banners promocionales o una barra de pestañas móvil que tu tema nativo no contempla, no necesitas encargar un desarrollo a medida desde cero. Aquí es donde encaja la app Navi+.
Navi+ es una aplicación de navegación para Shopify que ayuda a los comerciantes a crear diseños de menú de forma visual:
- Mega menús de escritorio: Diseña desplegables de varias columnas con productos, colecciones, imágenes, iconos y anchos ajustables (Shopify App Store), recreando la disposición y banners de tu maqueta.
- Menús móviles y paneles laterales: Crea menús móviles y drawers específicos (Shopify App Store) que pueden reproducir la estructura de escritorio o presentar una jerarquía simplificada para teléfonos.
- Barras de pestañas fijas en la parte inferior: Añade una barra de navegación inferior con iconos y etiquetas estilo aplicación móvil (Shopify App Store), manteniendo los tres o cuatro destinos más importantes siempre al alcance.
- Tiras de iconos de colecciones: Inserta filas de iconos circulares para facilitar la exploración visual táctil en dispositivos móviles.
- Sin necesidad de programar: Genera y ajusta menús apoyándote en plantillas prediseñadas, asistencia de IA y un editor de arrastrar y soltar sin modificar archivos de código (Shopify App Store).
- Integración segura con el tema: La app se integra mediante extensiones de aplicaciones de temas de Shopify (Shopify Developer Documentation), por lo que no tienes que editar manualmente los archivos Liquid del tema.
- Estructura estandarizada: Admite hasta tres niveles de anidación, manteniendo total compatibilidad con los estándares de navegación de Shopify.
Las plantillas prediseñadas facilitan un inicio rápido, pero serás tú quien conecte tus colecciones, suba tus fotografías optimizadas y configure los tonos de tu marca. Navi+ no escanea un archivo de imagen para generar un menú por arte de magia; lo que hace es brindarte los componentes necesarios para ensamblar ese diseño con facilidad.
Si tu tema no es capaz de generar las columnas, las tarjetas de imagen o la barra de pestañas móvil de tu imagen de referencia, puedes probar a recrearlas en Navi+ partiendo de una plantilla y ajustando cada bloque a tu catálogo y marca.
Pre-publish checklist
Antes de poner a disposición de tus clientes el nuevo menú, revisa esta lista práctica:
- Comprobación con la especificación: Compara tu menú publicado con la hoja redactada en el Paso 1 para verificar que no falte ninguna columna ni bloque.
- Auditoría de enlaces: Pulsa en cada enlace, tarjeta y banner para confirmar que ninguno dirija a páginas de error 404.
- Optimización de imágenes: Verifica que las fotografías sean de tu propiedad, estén comprimidas para la web y cuenten con texto alt descriptivo.
- Pruebas en varios dispositivos: Revisa la navegación en un navegador de escritorio y pruébala en un teléfono móvil real.
- Navegación por teclado: Comprueba con la tecla Tab que los submenús no se abran de forma imprevista (W3C Flyout Menus).
- Medición de contrastes: Asegúrate de que los textos sobre fondos y banners cumplan con la proporción mínima de 4.5:1 (WCAG 2.2).
- Ajuste en pantallas móviles: Confirma que el panel lateral y la barra de pestañas se acomoden sin provocar desplazamientos horizontales en la página.
- Copia de seguridad del código: Si añadiste código Liquid o CSS personalizado en tu tema, guarda una copia de tu código personalizado (Centro de ayuda de Shopify).
- Plan para actualizaciones: Prevé una revisión del menú tras actualizar tu tema o instalar nuevas aplicaciones (Centro de ayuda de Shopify).
- Previsualización en la app: Si utilizas Navi+, revisa el mega menú de escritorio y la barra móvil en el editor antes de activar el app embed definitivo.
FAQ
Can I add images to a Shopify menu without an app?
Los menús estándar de Shopify gestionados en Contenido > Menus solo guardan títulos y URLs como objetos Liquid (Shopify Developer Documentation). La posibilidad de mostrar imágenes en los paneles desplegables depende de si tu tema incorpora bloques de imagen para la cabecera (Centro de ayuda de Shopify); si carece de ellos, necesitarás una app de menú o código a medida.
How many levels can a Shopify menu have?
En la arquitectura de navegación de Shopify, un elemento de nivel superior puede albergar hasta dos niveles de menús desplegables anidados debajo (Centro de ayuda de Shopify). Esto da como resultado una jerarquía máxima de tres niveles (Nivel superior > Subcategoría > Elemento final).
What should my desktop mega menu become on mobile?
En dispositivos móviles, un mega menú de escritorio normalmente necesita su propio diseño móvil, como un panel lateral (drawer) con filas desplegables. Dado que la navegación móvil resulta compleja para los usuarios (Baymard Institute) y ocultar los enlaces disminuye su visibilidad, los sitios con cuatro o menos enlaces principales deberían mantenerlos visibles (Nielsen Norman Group), por ejemplo con una barra de pestañas fija en la parte inferior.
Will a custom-coded menu survive theme updates?
Todas las modificaciones realizadas a través del editor visual de temas se guardan y transfieren al actualizar el tema (Centro de ayuda de Shopify). Sin embargo, el código escrito directamente en los archivos Liquid o CSS conviene guardar siempre una copia antes de actualizar y puede que tengas que volver a aplicarlo en el tema actualizado.
Should I copy the image exactly?
No. Conviene adoptar la disposición modular, el reparto en columnas y los criterios de interacción, pero utilizando las imágenes, tipografías y logotipos de tu propia marca. Además, debes garantizar que los textos alcancen el contraste accesible mínimo de 4.5:1 (W3C WCAG 2.2) y organizar los enlaces en grupos lógicos que respondan al tamaño de tu catálogo (Nielsen Norman Group).
Sources
- Shopify Help Center — Drop-down menus: https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
- Shopify Help Center — Menus and links: https://help.shopify.com/en/manual/online-store/menus-and-links
- Shopify Help Center — Updating themes: https://help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes
- Shopify Developer Documentation — Link Liquid object: https://shopify.dev/docs/api/liquid/objects/link
- Shopify Developer Documentation — Theme app extensions: https://shopify.dev/docs/apps/build/online-store/theme-app-extensions
- Nielsen Norman Group — Mega Menus Work Well: https://www.nngroup.com/articles/mega-menus-work-well/
- Nielsen Norman Group — Hamburger Menus and Hidden Navigation: https://www.nngroup.com/articles/hamburger-menus/
- Baymard Institute — Navigation Menu Usability: https://baymard.com/mcommerce-usability/benchmark/mobile-page-types/navigation-menu
- W3C Web Accessibility Initiative — Contrast Minimum (WCAG 2.2): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- W3C Web Accessibility Initiative — Flyout Menus Tutorial: https://www.w3.org/WAI/tutorials/menus/flyout/
- Shopify App Store — Navi+ Navigation Design: https://apps.shopify.com/pronavi-navigation-design
Explora los temas
Esta guía enlaza a artículos específicos — profundiza en cada uno.