Límites del menú en temas de Shopify: ¿Cuándo utilizar un sistema de navegación dedicado? (2026)

Para una marca emergente de venta directa (DTC) con unas pocas docenas de productos, el menú predeterminado de Shopify es una solución sumamente práctica. Solo necesitas configurar tus colecciones en el panel de control, vincularlas al menú principal y el tema mostrará una barra horizontal en ordenadores y un menú lateral desplegable en móviles.

Sin embargo, a medida que el catálogo crece y alcanza cientos o miles de referencias (SKUs) organizadas en múltiples colecciones y líneas de producto, esta arquitectura monolítica choca contra severos límites técnicos y ergonómicos: un tope inamovible de 3 niveles de profundidad, cuotas de bloques en el editor de temas, sobrecarga del DOM y menús móviles que exigen forzar el pulgar.

Figura 1: Comparativa arquitectónica entre la navegación monolítica de un tema de Shopify (izquierda) y una arquitectura desacoplada en Edge CDN (derecha). Ilustración conceptual.

A continuación, analizamos a fondo por qué existen estas limitaciones, cómo afectan a las ventas desde el punto de vista de la usabilidad y qué criterios permiten decidir cuándo mantener el menú nativo y cuándo migrar a un motor de navegación especializado.

Comparativa rápida y de arquitectura

Tesis central (The Core Thesis)

Los temas de Shopify están diseñados como plantillas de presentación monolíticas, no como motores de descubrimiento escalables. El límite de 3 niveles, las cuotas de bloques y el menú de hamburguesa superior son barreras de seguridad intencionadas de Shopify. Pero cuando el catálogo supera las 200 referencias, estas protecciones se convierten en un cuello de botella que frena las ventas.

1. Realidad técnica: Por qué los temas imponen estas restricciones

Muchos comerciantes creen que los límites de navegación se deben a descuidos de los desarrolladores. En realidad, son barreras impuestas por el motor de renderizado Liquid y el sistema de almacenamiento de configuraciones de Shopify.

{% comment %} Bucle de navegación monolítico estándar en Liquid de Shopify {% endcomment %}
{% for link in linklists[section.settings.menu].links %}
  <li class="menu-item menu-item--level-1">
    <a href="{{ link.url }}">{{ link.title }}</a>
    {% if link.links != blank %}
      <div class="mega-menu-dropdown">
        {% for child_link in link.links %}
          <div class="menu-column menu-item--level-2">
            <span class="column-heading">{{ child_link.title }}</span>
            {% if child_link.links != blank %}
              <ul class="sub-column-list menu-item--level-3">
                {% for grandchild_link in child_link.links %}
                  <li><a href="{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
                {% endfor %}
              </ul>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </li>
{% endfor %}

El tope de 3 niveles de profundidad

En Tienda online → Navegación, Shopify solo permite anidar menús hasta tres escalones:

1. Nivel 1 (p. ej., Ropa de hombre)
2. Nivel 2 (p. ej., Partes de arriba)
3. Nivel 3 (p. ej., Sudaderas con capucha)

Shopify impone este límite para evitar bucles recursivos profundos en Liquid que agoten la memoria del servidor. Aunque esto basta para catálogos simples, sectores complejos (como repuestos de automóvil o suministros industriales) exigen 4 o 5 niveles de clasificación. Para lograrlo en código nativo, los desarrolladores deben encadenar listas de enlaces, lo cual genera un sistema propenso a fallar con cada actualización de tema.

Cuotas de bloques en secciones (max_blocks)

En los temas Online Store 2.0, los mega menús se construyen mediante bloques (blocks/mega_menu.liquid). En sections/header.liquid, los desarrolladores establecen un límite de 16 a 50 bloques para evitar que config/settings_data.json supere el límite de seguridad de 2 MB de Shopify. Si intentas añadir 20 banners, 15 logotipos de marca y 10 distintivos de oferta, el editor bloqueará nuevas adiciones.

La sobrecarga del DOM

Cuando un mega menú de 150 enlaces se procesa íntegramente en el servidor con Liquid, el encabezado inyecta entre 1.200 y 1.600+ nodos DOM en el documento HTML inicial. Esto activa advertencias en Google Lighthouse, empeora el tiempo de respuesta inicial (TTFB) y ralentiza la carga en dispositivos móviles modestos.

2. Usabilidad y arquitectura de la información: El coste del menú oculto

Teoría del forrajeo de información y el “rastro visual”

Según la Information Foraging Theory (desarrollada por Peter Pirolli y Stuart Card en Xerox PARC), los usuarios web buscan productos siguiendo rastros perceptivos («rastro de información»).

Si tus categorías se apiñan en una lista interminable de texto plano por limitaciones del tema, ese rastro se diluye. Si un cliente que busca Neumáticos de gravel solo encuentra 40 enlaces alfabéticos sin iconos visuales ni agrupaciones claras, la fatiga cognitiva se dispara y acaba abandonando la tienda.

La ergonomía del pulgar en pantallas móviles

Según las investigaciones de Steven Hoober (Designing for Mobile Interfaces), el 49 % de los usuarios maneja su teléfono con una sola mano.

En las pantallas actuales de 6,1 a 6,7 pulgadas, el botón de menú situado en la esquina superior izquierda queda en la denominada «zona de sobreesfuerzo». Para pulsarlo, el usuario debe recolocar la mano, lo que desalienta la navegación profunda entre categorías.

3. Casos reales: Tema básico frente a navegación desacoplada

Escenario A: Tema Dawn predeterminado

• En ordenador: Menú de texto simple. Máximo 2 imágenes destacadas. Los enlaces de nivel 3 forman una columna vertical tan larga que desaparece bajo el borde inferior en ordenadores portátiles estándar.
• En móvil: Para llegar a una subcategoría de nivel 3 se requieren 4 toques separados (Hamburguesa → Departamento principal → Subcategoría → Colección final), tardando unos 4,8 segundos antes de ver la primera imagen de producto.

Escenario B: Navegación desacoplada (p. ej., Gymshark)

• En ordenador: Mega menú visual con imágenes de categoría, etiquetas de temporada y respuesta inmediata al cursor.
• En móvil: Prescinde del botón de hamburguesa tradicional y utiliza una barra de pestañas fija en la parte inferior ubicada en la zona natural del pulgar, permitiendo explorar colecciones con un solo toque.

4. Cuatro síntomas de que tu tienda ha superado el menú de su tema

1. Submenús que desbordan la pantalla: Las listas de nivel 3 sobresalen por debajo de la ventana del navegador.
2. Límite de bloques alcanzado: El editor de temas impide añadir más elementos al encabezado.
3. Alto rebote en smartphones: Promediar menos de 2,2 páginas por sesión móvil indica dificultades para encontrar productos.
4. Imposibilidad de actualizar el tema: Usar versiones desactualizadas por temor a perder las modificaciones manuales de header.liquid.

5. ¿Cuándo mantener el tema y cuándo actualizar a un menú dedicado?

Cuándo el tema nativo es más que suficiente:

• Menos de 50 SKUs: Marcas de nicho o tiendas monoproducto con 4–6 enlaces en el menú.
• Catálogos de una sola categoría: Un surtido especializado no requiere jerarquías complejas.
• Estilo hiperminimalista: Tiendas de arte o estudios de diseño que rechazan conscientemente iconos y mega menús.

Cuándo un sistema especializado es obligatorio:

• Más de 200 SKUs: Catálogos que exigen varios niveles de clasificación.
• Tráfico mayoritariamente móvil: Cuando la mayor parte de las visitas procede de redes sociales en teléfonos móviles.
• Campañas promocionales frecuentes: Tiendas que necesitan destacar etiquetas (“OFERTA”, “NUEVO”) sin tocar código.

6. Matriz de decisión según el tamaño del catálogo

[1 - 100 SKUs]       ──> Menú nativo de Shopify (Dawn / Desplegable básico)
                         - Cero dependencias, 100 % Liquid en servidor.

[100 - 500 SKUs]     ──> Mega menú de tema premium (Enterprise / Prestige / Impulse)
                         - Eficaz si la estructura cabe en 3 niveles y <2 banners.

[500 - 10.000+ SKUs] ──> Motor desacoplado en Edge CDN (p. ej., Navi+)
                         - Profundidad infinita, iconos de colección, barra inferior móvil.
                         - Encabezado ligero sin sobrecarga de DOM; caché CDN ultrarrápida.

[10.000+ SKUs B2B]   ──> Arquitectura Headless + Búsqueda avanzada (Algolia / Elasticsearch)
                         - Descubrimiento guiado por filtros y APIs de búsqueda.

7. El papel de Navi+ y sus límites objetivos

Navi+ se creó para eliminar la fricción entre las limitaciones de los temas y las necesidades de crecimiento de los comercios. En lugar de modificar archivos Liquid, opera como un motor de navegación desacoplado servido desde una red Edge CDN.

Ventajas técnicas:

1. Distribución en Edge CDN: La estructura del menú se compila en un JSON ligero y se entrega desde la red global de Cloudflare R2.
2. Cero sobrecarga en el DOM: El documento HTML inicial de Shopify permanece limpio. Los componentes se cargan de forma asíncrona (~15 KB comprimidos).
3. Barra de pestañas ergonómica para móviles: Adapta los menús de escritorio a la zona natural del pulgar en pantallas grandes.
4. Independencia del tema: Se activa mediante App Embeds de Shopify, facilitando el cambio o prueba de temas sin perder la navegación configurada.

Límites transparentes:

• Requiere App Embed activo: Precisa la ejecución de un script ligero en el navegador del cliente. No apto para proyectos que exijan 100 % HTML estático sin JavaScript.
• Panel de gestión propio: Se administra desde el panel de Navi+ en lugar del menú tradicional de Shopify.

8. Auditoría de navegación en 5 pasos

• Paso 1: Medir el DOM del encabezado: Ejecuta document.querySelectorAll('header *').length en la consola del navegador. Más de 800 nodos indica sobrepeso.
• Paso 2: Contar los toques en móvil: Registra cuántos clics hacen falta para ir de la portada al producto más profundo. Más de 3 clics genera pérdidas de clientes.
• Paso 3: Probar el alcance del pulgar: Intenta abrir el menú con una sola mano en un móvil de 6,7 pulgadas sin mover la palma.
• Paso 4: Comprobar el tope de bloques: Intenta añadir bloques nuevos al encabezado en el editor de temas de Shopify.
• Paso 5: Clarificar las etiquetas: Limita cada grupo a 7–10 enlaces con nombres claros y mutuamente excluyentes.

Fuentes y referencias

1. Shopify Developer Documentation: Theme Section Architecture & Liquid Schema Specifications (shopify.dev/docs/themes).
2. Nielsen Norman Group (NN/g): Menu Design: What Makes Menus Work & Information Foraging Theory (nngroup.com).
3. Baymard Institute: Mobile Navigation & Taxonomy Usability Benchmarks (baymard.com).
4. Steven Hoober: How Do Users Really Hold Flagship Smartphones? Estudio de campo de UXmatters (uxmatters.com).
5. W3C Web Accessibility Initiative (WAI): WAI-ARIA Authoring Practices Guide: Menu Navigation Patterns (w3.org/WAI/ARIA/apg).