Explorador de taxonomía de productos

El Product Taxonomy Explorer es una herramienta de navegador estática y sin framework para la taxonomía de productos de Shopify: categorías, atributos, valores de atributos y motivos de devolución. La creamos para la comunidad de Shopify como una herramienta que puede dejar abierta todo el día: asigne productos, compruebe identificadores, copie ID y comparta enlaces de categorías con un compañero de equipo.

No requiere una cuenta. Modo claro y oscuro. Las 31 configuraciones regionales de la versión estable actual de la taxonomía de Shopify.

Por qué la creamos

El explorador de taxonomía publicado por Shopify es realmente útil y también realmente pesado.

Cuando analizamos la versión latest (2026-05), una sola URL de categoría descargaba unos 59.9 MB de HTML. La página pre-renderiza enormes paneles de categorías, atributos, asignaciones y motivos de devolución en el DOM, almacena datos de relaciones en atributos y alterna la visibilidad entre listas de nodos almacenadas en caché. La búsqueda se ejecuta mediante herramientas externas del navegador. La página incluso devuelve trabajo al hilo principal, una señal de que el navegador tiene dificultades con su propio tamaño.

Si trabaja a menudo con datos de taxonomía, probablemente haya experimentado esto:

1. Cargas iniciales lentas en redes limitadas o equipos ocupados
2. Búsqueda y navegación por columnas lentas una vez abierta la pestaña
3. Presión de memoria y bloqueos ocasionales de la pestaña
4. Estado de carga difícil de interpretar: ¿sigue obteniendo datos o se ha bloqueado?
5. Un peso enorme de página para una pregunta sencilla: «¿Cuál es el ID de categoría de las tablas de snowboard?»

El JSON de origen ya es grande por sí solo: aproximadamente 94.8 MB para taxonomy.json en inglés y 80.0 MB para categories.json. El explorador predeterminado no reduce ese problema; renderiza gran parte del árbol en HTML de antemano.

Queríamos una herramienta de consulta que se sintiera como una herramienta, no como una prueba de estrés.

Lo que creamos

No nos propusimos clonar la interfaz de Shopify con un acabado adicional. Nos propusimos que trabajar con la taxonomía se sintiera tranquilo.

1. Datos compactos y listos para aplicaciones: normalizados durante la compilación en registros planos, ID estables, relaciones sin duplicados y fragmentos JSON con hash de contenido, dimensionados según la forma en que se carga la interfaz
2. Renderizar solo lo visible: columnas de categorías para la ruta actual, un panel de detalles, resultados de búsqueda limitados y filas de atributos solo después de expandirlas
3. Cargar los detalles bajo demanda: los metadatos de atributos y las listas de valores se obtienen en pequeños fragmentos cuando los necesita
4. Buscar sin un índice duplicado: el navegador deriva unas 23,600 filas que se pueden buscar a partir de categorías, resúmenes compactos de atributos y motivos de devolución que ya están en memoria
5. Entrega estática: HTML, CSS, JavaScript y datos generados en Cloudflare Workers Static Assets; los archivos almacenables en caché omiten la ejecución de Workers
6. Compatibilidad total con configuraciones regionales: las 31 configuraciones regionales generadas por Shopify para la versión fijada, con todo el texto de la interfaz en cada idioma habilitado

Aún obtiene consulta de categorías, inspección de atributos, motivos de devolución, etiquetas localizadas, URL que se pueden compartir y controles de copia, sin el peso que hacía que la experiencia predeterminada fuera lenta.

Por qué parece más rápido

La mayor ventaja es la moderación.

	Explorador publicado por Shopify	Product Taxonomy Explorer
Primera visita	~60 MB de HTML con un DOM oculto para toda la taxonomía	Shell + ~81–92 KB gzip de datos de categorías delimitados por raíz (configuración regional activa)
Renderizado	Pre-renderizar todo y alternar la visibilidad	Crear solo las columnas visibles, los detalles y las filas abiertas
Búsqueda	Infraestructura de índice de búsqueda independiente	Derivada en el navegador a partir de los datos de configuración regional cargados
Valores de atributos	Incluidos en el peso inicial de la página	Cargados de forma diferida por atributo (~52–66 KB gzip como máximo por fragmento)
Modo de fallo	Una lista pesada puede degradar toda la página	Una lista de valores grande afecta a una fila después de abrirla

El tamaño del despliegue y el tamaño de la sesión no son lo mismo. El artefacto completo de la versión incluye todas las configuraciones regionales (~450 MB en disco, ~2,993 archivos direccionados por contenido en producción), pero un navegador solo solicita las raíces de la configuración regional activa, un fragmento principal para la raíz de taxonomía seleccionada, un fragmento de detalles compartido y, posteriormente, los fragmentos que necesitan sus interacciones.

Medido en la compilación verificada v1.4.2 (referencia de origen v2026-05):

1. Datos de categorías delimitados por raíz: 81–92 KB gzip en todas las configuraciones regionales
2. Primer renderizado de taxonomía (localhost): ~232 ms en 4G rápida / ~824 ms en 4G lenta
3. Detalles seleccionados listos: ~803 ms en 4G rápida / ~2,835 ms en 4G lenta
4. Lighthouse de producción (2026-07-22): 100 en Accesibilidad, 100 en Prácticas recomendadas, 100 en SEO; LCP en 4G lenta ~2.2 s (limitación de CPU de 4×), CLS 0.00

La navegación rápida después del arranque es prácticamente instantánea. La confirmación de copia aparece en el pie de página, no en una notificación emergente. Los tiempos del pie de página y del panel Debug muestran claramente cuándo se están cargando los datos y cuándo algo se ha bloqueado.

Creado para flujos de trabajo reales

Encuentre lo que necesita

1. Buscar por nombre de categoría, ID de categoría, identificador de atributo o motivo de devolución: / o Cmd/Ctrl+K para enfocar
2. Explorar con una navegación por columnas predecible cuando la jerarquía es importante
3. Compartir URL que conservan la selección de categoría y la configuración regional

Inspeccione con confianza

1. Migas de pan, ID corto de categoría, GID completo de taxonomía de Shopify, atributos asignados y motivos de devolución en un solo panel
2. Botones de copia para ID, identificadores y migas de pan; confirmación en el pie de página
3. Filas de atributos contraíbles; las listas de valores largas muestran primero una vista previa y después Mostrar todo, sin otra solicitud de red

Idiomas y temas

1. Selector de idioma para cada configuración regional de Shopify habilitada: etiquetas de taxonomía de los datos de Shopify y elementos de la interfaz de nuestros catálogos (paridad estricta de claves en las 31 configuraciones regionales)
2. Modo claro y oscuro, guardado en el navegador
3. Comprobaciones WCAG A/AA en las puertas de validación de versiones automatizadas para ambos temas, además de cobertura del foco del teclado para la búsqueda

En cifras

Categorías	14,606
Atributos	8,553
Valores de atributos	74,813
Motivos de devolución	470
Configuraciones regionales	31
Filas de búsqueda derivadas	23,629
Ahorro por deduplicación de detalles compartidos	129.29 MB

La búsqueda excluye intencionadamente el texto completo de los valores de atributos del índice predeterminado. Indexar todos los valores aumentaría la búsqueda de 23,629 a 98,442 filas e incrementaría el coste de memoria y clasificación: una decisión deliberada hasta que la consulta a nivel de valor justifique una ruta opcional.

Cómo lo mantenemos

Arquitectura deliberadamente aburrida:

1. Ningún framework de frontend a menos que un modo de fallo medido demuestre que necesitamos uno
2. Pipeline de datos determinista: fijar una etiqueta de versión de Shopify a un commit inmutable, verificar los hashes de origen, publicar cargas compactas con el manifiesto al final y validar cada recurso del navegador antes de la versión
3. Un artefacto verificado por versión: identidad SHA-256 completa durante la vista previa, la producción y la reversión
4. Despliegue automático en producción en los pushes de runtime a main después de superar toda la validación; los cambios que solo afectan a la documentación no se despliegan
5. 57 pruebas de humo del navegador y 5 pruebas de accesibilidad: enlaces profundos, todas las configuraciones regionales, cargas diferidas, flujos de copia y diseños de hasta 320 px

El rendimiento aquí consiste en hacer menos trabajo, más tarde y con datos adaptados a la tarea, no en envolver una página gigante en un framework ni en ejecutar la lógica de la aplicación en cada solicitud.

Proyecto independiente

Creado por Company XYZ. No está afiliado a Shopify, salvo por utilizar los datos abiertos de product-taxonomy de Shopify en los mismos términos que el explorador original.

Asignamos categorías, comprobamos atributos y copiamos ID en herramientas internas cada semana; este es el explorador que queríamos tener a mano.

Si le importan el rendimiento y la accesibilidad en el trabajo con tiendas online, también puede interesarle Align, nuestro tema de Shopify creado con las mismas prioridades.

Pruébelo

Abrir explorador de taxonomía de productos

Enlace profundo de ejemplo: Snowboards (sg-4-17-2-17)

Datos de origen de la taxonomía: Shopify/product-taxonomy en GitHub

---

El explorador de Shopify distribuye el almacén: espera a que se cargue todo el edificio y después oculta las plantas que no está visitando.

Product Taxonomy Explorer mantiene el almacén organizado y muestra el estante que realmente está utilizando: adaptable a más de 14,000 categorías y 31 idiomas.