El editor moderno de Tienda online > Navegación de Shopify permite anidar elementos de menú hasta 3 niveles de profundidad. Para la mayoría de las tiendas es de sobra. Pero si vende piezas, ferretería, o cualquier cosa con miles de SKUs repartidos en subcategorías profundas, alcanzará ese techo rápidamente. La anidación heredada en Breadcrumbs Uncomplicated, Categories Uncomplicated y Menus Uncomplicated es el camino limpio para superarlo.
Por qué existe el límite de 3 niveles
La interfaz moderna de administración de menús limita la anidación a 3 niveles, y el desplegable con el que vienen la mayoría de los temas no se renderiza bien más allá de eso de todos modos. Pero el modelo de datos de Shopify no tiene tal tope - siempre ha admitido árboles más profundos a través de la pauta más antigua de “un elemento de menú apunta a otro menú por nombre”. Eso es lo que aprovecha la anidación heredada en la aplicación.
El apaño ingenuo (y por qué falla)
Las tiendas suelen intentar simular un 4º nivel duplicando submenús o creando menús hermanos que se solapan. Shopify no puede distinguir dos elementos de menú con el mismo nombre, así que los nombres de colección y las URLs duplicadas confunden al resolutor de URLs. El síntoma en sus rutas de navegación es una ruta que salta aleatoriamente a la rama equivocada en algunos productos, sin patrón aparente - porque el resolutor escogió el duplicado que vio primero.
Anidación heredada en la aplicación
Anidación del menú vive en Lista de categorías > Anidación del menú (o Configuración de Floatlist > Anidación del menú en Menus Uncomplicated).
- Anidación moderna (el valor por defecto) - refleja la administración de Shopify, limitada a 3 niveles.
- Anidación heredada - hace coincidir un elemento de menú con otro menú por título, de modo que el menú coincidente se convierte en subárbol bajo ese elemento. Sin límite de profundidad.
La anidación heredada es cómo funcionaba la navegación de Shopify antes de que existiera el editor moderno, y el modelo de datos sigue soportándolo. Para superar los 3 niveles cree un menú de 4º nivel (o más profundo) en Tienda online > Navegación cuyo título coincida con el elemento de menú hoja del que debe colgar. La aplicación los une en el momento del renderizado.
La contrapartida, anunciada en el propio tooltip del ajuste, es que los títulos deben ser globalmente únicos en todos los menús - si dos menús o dos elementos de menú comparten un título, Shopify (y la aplicación) no pueden saber cuál es el padre.
Un ejemplo trabajado: un árbol de tornillería de 5 niveles
Un árbol de tornillería de 5 niveles, del tipo que necesita un catálogo serio de ferretería:
- Tornillería
- Tornillos
- Tornillos de máquina
- Tornillos de máquina de acero inoxidable
- Tornillos de máquina de acero inoxidable 18-8
- Tornillos de máquina de acero inoxidable
- Tornillos de máquina
- Tornillos
La estructura en el lado de Shopify: un menú llamado main-menu con Tornillería > Tornillos > Tornillos de máquina (3 niveles, el límite moderno), y luego un menú aparte llamado Tornillos de máquina de acero inoxidable cuyo primer elemento es Tornillos de máquina de acero inoxidable 18-8. La aplicación ve la coincidencia de título entre el elemento de 3er nivel y el segundo menú, y los une como si fueran un único árbol. La ruta de navegación en un producto 18-8 dice Casa > Tornillería > Tornillos > Tornillos de máquina > Tornillos de máquina de acero inoxidable > Tornillos de máquina de acero inoxidable 18-8.
Cada título en ese árbol es globalmente único - eso es lo que mantiene operativa la coincidencia de títulos de la anidación heredada.
Consideraciones de rendimiento
Los árboles profundos significan más elementos de menú, lo que significa instantáneas ligeramente mayores y un Actualizar Categorías ligeramente más lento. En la práctica, un árbol de 6 niveles y ~500 elementos se actualiza en unos segundos en una tienda típica, y el renderizado por página no cambia porque la instantánea está cacheada.
Limitaciones
- Los títulos deben ser globalmente únicos en todos los menús. Dos elementos de menú (o dos menús) que compartan un título confundirán la coincidencia de títulos en la que se basa la anidación heredada - la aplicación señalará los duplicados, pero usted debe corregirlos en Tienda online > Navegación.
- El desplegable del menú principal en la mayoría de los temas no mostrará más allá del nivel 3 aunque sus datos sean más profundos - necesitará una aplicación de megamenú para el propio desplegable. Las rutas de navegación seguirán siendo correctas.
- Los resultados de la búsqueda de Shopify devuelven URLs de formato corto
/products/..., que pierden el contexto de ruta completo (vea la entrada sobre productos en varias colecciones para saber cómo lo maneja la aplicación).
Resumen
Si alguna vez se ha sentido encajonado por el tope de 3 niveles de Shopify, la anidación heredada en Breadcrumbs Uncomplicated, Categories Uncomplicated o Menus Uncomplicated le permite construir la taxonomía profunda que sus clientes esperan, sin trucos ni colecciones duplicadas - siempre que cada menú y cada elemento de menú tengan un título único.