Resumen

La página del Árbol de Categorías está dividida en dos secciones principales, con una potente función de construcción desde el menú para ayudarte a comenzar rápidamente:

🌳 Vista de Árbol (Panel Izquierdo)

Propósito: Esta jerarquía define las migas de pan y los bloques de subcategorías que se muestran en tu tienda. Las colecciones en la vista de árbol:

• ✅ Aparecerán en las rutas de navegación de migas de pan

• ✅ Se mostrarán como subcategorías en las páginas de colección

• ✅ Crearán estructuras de navegación multinivel

• ✅ Se incluirán en los datos estructurados (SEO)

📦 Categorías No Asignadas (Panel Derecho)

Propósito: Migas de pan y subcategorías ocultas - colecciones que existen en tu tienda pero NO forman parte de la estructura de navegación. Las colecciones en categorías no asignadas:

• ❌ No aparecerán en las migas de pan

• ❌ No se mostrarán como bloques de subcategorías

• ❌ No se incluirán en la jerarquía de navegación

• ✅ Seguirán siendo accesibles mediante URLs directas

Vista de árbol - características principales

🔍 Búsqueda

Ubicación: Caja de búsqueda en la parte superior de la vista de árbol Funcionalidad:

• Encuentra categorías rápidamente por nombre

• Filtra el árbol en tiempo real

• Ayuda a navegar estructuras grandes de categorías

🔄 Botón de actualización

Ubicación: Esquina superior derecha Propósito: Obtiene las colecciones publicadas más recientes de tu tienda Shopify y sincroniza los menús Cuándo usar:

• Después de agregar nuevas colecciones en el administrador de Shopify

• Para sincronizar cambios recientes de tu tienda

• Antes de realizar una reorganización importante

• Cuando no ves tus menús en el desplegable

🎯 Construir desde Menú

Ubicación: Grupo de botones junto al encabezado de la vista de árbol Propósito: Construir automáticamente tu árbol de categorías basado en la estructura de menú de navegación Shopify existente

Cómo funciona

• Selecciona un menú del desplegable (Menú principal, Menú pie de página, etc.)

• Haz clic en el botón "Build from menu"

• La aplicación automáticamente:

• - Importa todas las colecciones publicadas del menú

• - Preserva la jerarquía del menú (relaciones padre → hijo)

• - Soporta anidamiento multinivel (3+ niveles)

• - Mueve colecciones no usadas al panel "Unassigned"

Qué se importa:

• ✅ Solo colecciones publicadas - Solo elementos del menú que enlazan a colecciones publicadas

• ✅ Jerarquía del menú - Se preservan las relaciones padre → hijo

• ✅ Anidamiento multinivel - Soporta estructuras de menú profundas (3+ niveles)

Qué está excluido:

• ❌ Colecciones en borrador/no publicadas - Solo se importan colecciones publicadas

• ❌ Enlaces HTTP - Se omiten enlaces externos y URLs personalizadas

• ❌ Enlaces a productos - No se importan enlaces directos a productos

• ❌ Enlaces a páginas - Se excluyen enlaces a páginas

• ❌ Otros elementos del menú - No se importan blogs, búsqueda, enlaces al carrito, etc.

Limitaciones importantes:

• ⚠️ Solo colecciones publicadas - No se importarán colecciones en borrador o no publicadas

• ⚠️ Solo enlaces del menú - Solo se importarán colecciones que estén en tu menú

• ⚠️ Solo punto de partida - Probablemente necesitarás personalizar después de construir (agregar más colecciones, reorganizar, etc.)

Caché del menú

Los menús se almacenan en caché durante 24 horas para una carga más rápida. La marca de tiempo de la caché se muestra junto al grupo de botones (por ejemplo, "Cached 14:30:25").

¿Necesitas sincronizar menús?

Si no ves tus menús en el desplegable, haz clic en el botón Actualizar para sincronizar los menús más recientes de tu tienda Shopify.

Indicadores visuales en el desplegable del menú

• Elementos de colección - Color normal, pueden sincronizarse con tu árbol

• Elementos no de colección (enlaces HTTP, etc.) - Color gris más claro con etiqueta de tipo (por ejemplo, "HTTP")

• Menú predeterminado - Etiqueta verde "Default"

⬇️ Botón Colapsar todo

Ubicación: Junto a la caja de búsqueda Propósito: Colapsa todas las categorías expandidas para mostrar solo los elementos de nivel superior Caso de uso:

• Obtener una vista general de tus categorías principales

• Navegar rápidamente un árbol complejo

• Antes de hacer cambios estructurales

⬆️ Botón Expandir todo

Ubicación: Junto a colapsar todo Propósito: Expande todas las categorías para mostrar toda la jerarquía Caso de uso:

• Ver la estructura completa de categorías

• Encontrar elementos profundamente anidados

• Revisar toda la navegación de una vez

Operaciones de arrastrar y soltar

El árbol soporta una potente funcionalidad de arrastrar y soltar para organizar categorías.

Selección múltiple

Cómo seleccionar múltiples elementos:

• Seleccionar primer elemento: Haz clic en una categoría

• Agregar más elementos: - Mantén presionado ⌘/Ctrl + clic = Agregar elementos individuales - Mantén presionado Shift + clic = Seleccionar rango de elementos

• Arrastrar juntos: Arrastra cualquier elemento seleccionado, todos los seleccionados se moverán juntos

Mover categorías

Elemento único:

• Haz clic y mantén presionada una categoría

• Arrástrala a una nueva posición

• Suelta para colocar: - Entre elementos = Mismo nivel (hermano) - Sobre un elemento = Hijo de ese elemento (anidar) - Arrastrar a la izquierda mientras está anidado = Desanidar (mover un nivel arriba)

Múltiples elementos:

• Selecciona múltiples categorías (⌘/Ctrl + clic)

• Arrastra cualquier elemento seleccionado

• Todos los elementos seleccionados se moverán juntos

• Suelta para colocarlos como grupo

Retroalimentación visual

• La línea indicadora de arrastre muestra dónde se colocarán los elementos

• Resaltado al pasar el cursor sobre la categoría padre objetivo

• El nivel de sangría muestra la profundidad del anidamiento

Panel de categorías no asignadas

Propósito y comportamiento

Las colecciones en este panel están ocultas de:

• Breadcrumbs

• Bloques de subcategorías

• Jerarquía de categorías

• Datos estructurados

¿Por qué mantener colecciones sin asignar?

• Colecciones internas/solo para administración

• Colecciones estacionales no activas actualmente

• Colecciones de prueba

• Colecciones usadas para otros propósitos (descuentos, paquetes, etc.)

Agregar a la vista de árbol

Método 1: Cuando se selecciona una categoría en el árbol

• Haz clic para seleccionar una categoría en la vista de árbol (panel izquierdo)

• Marca una o más colecciones en el panel Sin asignar

• Haz clic en Agregar o arrastra la colección

• → La colección se convierte en un hijo de la categoría seleccionada

Método 2: Cuando no se selecciona ninguna categoría

• Asegúrate de que no haya nada seleccionado en la vista de árbol

• Marca una o más colecciones en el panel Sin asignar

• Haz clic en Agregar o arrastra la colección

• → La colección se agrega al final del árbol (nivel raíz)

Buscar sin asignar

Ubicación: Caja de búsqueda en la parte superior del panel Sin asignar Funcionalidad:

• Filtrar la lista de colecciones sin asignar

• Encontrar colecciones específicas rápidamente

• Muestra el conteo: "Mostrando 27 colecciones sin asignar"

Actualizar sin asignar

Icono: Icono de actualizar junto a la búsqueda Propósito: Actualiza la lista de colecciones sin asignar desde Shopify

Atajos de teclado

• ⌘/Ctrl + Click = Selección múltiple de categorías

• Shift + Click = Seleccionar rango de categorías

• Drag = Mover categoría/categorías

• Click collapse icon = Alternar hijos de categoría

• Hold ⌘/Ctrl + Click colapsar = Colapsar todos los hijos recursivamente

Guardando cambios

Guardado automático: Los cambios NO se guardan automáticamente Guardado manual:

• Haz clic en el botón "Guardar" en la parte inferior derecha

• Todos los cambios se aplican juntos

• Actualiza tu tienda para ver las actualizaciones

Nombres personalizados para mostrar colecciones

Puedes establecer un nombre personalizado para mostrar cualquier colección usada en tu árbol. Esto te permite mostrar una etiqueta más limpia, corta o más amigable para el cliente en tus breadcrumbs y subcategorías sin renombrar la colección real de Shopify.

• ✅ Mantén el título original de la colección de Shopify para uso interno/administrativo

• ✅ Muestra una etiqueta diferente en la navegación de la tienda (breadcrumbs + subcategorías)

• ✅ Útil para redacción amigable con SEO, abreviaturas o nombres consistentes

Cómo editar los nombres para mostrar

En el Árbol de Categorías, haz clic en una colección y edita su Nombre para Mostrar en línea. Notas:

• Los cambios se guardan cuando haces clic en Guardar (igual que los cambios en la estructura del árbol)

• Dejar el Nombre para Mostrar vacío elimina el nombre personalizado (vuelve al título de la colección)

• Recomendado: mantenerlo corto (por ejemplo, 20-40 caracteres) para una mejor experiencia móvil

Cómo aparece en la tienda

Cuando existe un nombre para mostrar, la interfaz de la tienda lo prefiere sobre el título original. Si no se establece un nombre para mostrar, la aplicación usa el título de la colección de Shopify. Esto afecta:

• Etiquetas breadcrumb para niveles de colección

• Títulos/enlaces de bloques de subcategorías (cuando están habilitados en tu tema)

Ejemplos de estructura de categorías

Ejemplo de Construir desde el Menú

Antes de construir: Tu Menú Principal de Shopify:

Main Menu
├─ Women (COLLECTION)
│  ├─ Dresses (COLLECTION)
│  │  ├─ Summer Dresses (COLLECTION)
│  │  └─ Evening Dresses (COLLECTION)
│  └─ Tops (COLLECTION)
├─ Men (COLLECTION)
│  ├─ Shirts (COLLECTION)
│  └─ Pants (COLLECTION)
├─ About Us (HTTP) ← Skipped
└─ Contact (HTTP) ← Skipped

Después de hacer clic en "Build from menu": Tu Árbol de Categorías:

📁 Women
  └─ 👗 Dresses
      └─ ☀️ Summer Dresses
      └─ 🌙 Evening Dresses
  └─ 👕 Tops

📁 Men
  └─ 👔 Shirts
  └─ 👖 Pants

Resultado:

• Todos los ítems de la colección importados con la jerarquía preservada

• Los enlaces HTTP (About Us, Contact) se omiten automáticamente

• Listo para personalizar más con arrastrar y soltar

Ejemplo de tienda de moda

📁 Women
  └─ 👗 Dresses
      └─ ☀️ Summer Dresses
      └─ 🌙 Evening Dresses
      └─ 👔 Casual Dresses
  └─ 👕 Tops
  └─ 👖 Bottoms

📁 Men
  └─ 👔 Shirts
  └─ 👖 Pants
  └─ 🧥 Outerwear

📁 Sale
  └─ 50% Off
  └─ Clearance

Ejemplo de tienda de electrónica

📁 Computers
  └─ 💻 Laptops
      └─ Gaming Laptops
      └─ Business Laptops
  └─ 🖥️ Desktops
  └─ ⌨️ Accessories

📁 Smartphones
  └─ 📱 iPhone
  └─ 📱 Samsung
  └─ 📱 Google Pixel

Mejores prácticas

Comienza con Construir desde el Menú

Flujo de trabajo recomendado:

• Usa primero Construir desde el menú - Si ya tienes un menú de navegación, usa Construir desde el Menú para comenzar rápido

• Revisa la estructura - Verifica si la jerarquía importada tiene sentido

• Personaliza según sea necesario - Agrega colecciones faltantes, reorganiza o ajusta la profundidad

• Guarda y prueba - Guarda tus cambios y revisa los breadcrumbs en tu tienda

Beneficios:

• Ahorra tiempo comparado con la configuración manual

• Preserva la estructura de tu menú existente

• Proporciona un buen punto de partida para la personalización

Manténlo simple

Buena estructura:

• Máximo 2-3 niveles de profundidad

• 5-7 categorías por nivel

• Nombres claros y descriptivos

Mala estructura:

• Demasiados niveles anidados (confuso)

• Demasiadas categorías a la vez (abrumador)

• Nombres vagos como "Other" o "Misc"

Organiza pensando en el cliente

Piensa como tus clientes:

• ¿Cómo buscan productos?

• ¿Cuál es su modelo mental?

• ¿Qué es lo más importante para ellos?

Ejemplo de moda: ✅ Por género primero (Women > Dresses) ❌ Por color primero (Red > Women's Items) Ejemplo de electrónica: ✅ Por tipo de dispositivo (Laptops > Gaming) ❌ Por marca primero (Apple > All Products)

Usa nombres consistentes

Haz:

• Women's Dresses

• Men's Shirts

• Kids' Shoes

No hagas:

• Dresses for Women

• Shirts (Men)

• Children Footwear

Equilibra amplitud y profundidad

Amplitud (Plano): Bueno para catálogos pequeños

📁 Dresses
📁 Tops
📁 Pants
📁 Accessories

Profundidad (Anidado): Bueno para catálogos grandes

📁 Women
  └─ Dresses
  └─ Tops
  └─ Pants

Errores comunes a evitar

❌ Jerarquías demasiado profundas

Malo:

Home › Fashion › Women › Clothing › Dresses › Casual › Summer › Floral

Bueno:

Home › Women › Dresses › Summer Dresses

❌ Nombres inconsistentes

Malo:

• Women's Dresses

• Tops for Women

• Female Accessories

• Women Shoes

Bueno:

• Women's Dresses

• Women's Tops

• Women's Accessories

• Women's Shoes

❌ Categorías superpuestas

Malo:

📁 Sale Items
📁 Clearance
📁 Discounted Products

Bueno:

📁 Sale
  └─ 50% Off
  └─ Clearance

Consejos para diferentes tamaños de tienda

Tiendas pequeñas (< 100 productos)

Manténlo plano y simple:

📁 New Arrivals
📁 Dresses
📁 Tops
📁 Accessories
📁 Sale

Tiendas medianas (100-1000 productos)

Agrega un nivel de profundidad:

📁 Women
  └─ Dresses
  └─ Tops
📁 Men
  └─ Shirts
  └─ Pants
📁 Sale

Tiendas grandes (más de 1000 productos)

Usa jerarquías completas:

📁 Women
  └─ Clothing
      └─ Dresses
      └─ Tops
  └─ Accessories
📁 Men
  └─ Clothing
  └─ Accessories

Preguntas comunes