Esplora tassonomia dei prodotti

Product Taxonomy Explorer è uno strumento browser statico e privo di framework per la tassonomia dei prodotti Shopify: categorie, attributi, valori degli attributi e motivi di reso. Lo abbiamo creato per la community Shopify come qualcosa che puoi lasciare aperto tutto il giorno: assegna i prodotti alle categorie, verifica gli handle, copia gli ID e condividi i link delle categorie con un collega.

Non è richiesto alcun account. Modalità chiara e scura. Tutte le 31 lingue della versione stabile corrente della tassonomia Shopify.

Perché lo abbiamo creato

Lo strumento di esplorazione della tassonomia pubblicato da Shopify è davvero utile, e davvero pesante.

Quando abbiamo esaminato la versione latest (2026-05), un singolo URL di categoria scaricava circa 59.9 MB di HTML. La pagina esegue il pre-rendering di enormi pannelli di categorie, attributi, mappature e motivi di reso nel DOM, memorizza i dati delle relazioni negli attributi e attiva o disattiva la visibilità tra elenchi di nodi memorizzati nella cache. La ricerca viene eseguita tramite strumenti esterni lato browser. La pagina restituisce persino il lavoro al thread principale: un segnale che il browser fatica a gestire le proprie dimensioni.

Se lavori spesso con i dati della tassonomia, probabilmente hai riscontrato questo:

1. Caricamenti iniziali lenti su reti con limitazioni o macchine impegnate
2. Ricerca e navigazione tra le colonne lente dopo l’apertura della scheda
3. Pressione sulla memoria e arresti occasionali della scheda
4. Stato di caricamento difficile da interpretare: sta ancora recuperando i dati o si è bloccato?
5. Peso enorme della pagina per una domanda semplice: “Qual è l’ID categoria degli snowboard?”

Il JSON upstream è già grande: circa 94.8 MB per taxonomy.json in inglese e 80.0 MB per categories.json. Lo strumento di esplorazione predefinito non riduce il problema; esegue il rendering anticipato di gran parte dell’albero nell’HTML.

Volevamo uno strumento di ricerca che sembrasse uno strumento, non uno stress test.

Cosa abbiamo creato

Non volevamo clonare l’interfaccia di Shopify con qualche rifinitura in più. Volevamo rendere il lavoro sulla tassonomia tranquillo.

1. Dati compatti, pronti per l’app — normalizzati in fase di build in record piatti, ID stabili, relazioni deduplicate e frammenti JSON con hash del contenuto, dimensionati in base al caricamento dell’interfaccia
2. Esegui il rendering solo di ciò che è visibile — colonne delle categorie per il percorso corrente, un pannello dei dettagli, risultati di ricerca limitati e righe degli attributi solo dopo averle espanse
3. Carica i dettagli su richiesta — i metadati degli attributi e gli elenchi dei valori vengono recuperati in piccoli blocchi quando servono
4. Cerca senza un indice duplicato — il browser ricava circa 23.600 righe ricercabili dalle categorie, dai riepiloghi compatti degli attributi e dai motivi di reso già presenti in memoria
5. Distribuzione statica — HTML, CSS, JavaScript e dati generati su Cloudflare Workers Static Assets; i file memorizzabili nella cache ignorano l’esecuzione di Worker
6. Supporto completo delle lingue — tutte le 31 lingue generate da Shopify per la versione fissata, con testi completi dell’interfaccia in ogni lingua abilitata

Ottieni comunque la ricerca delle categorie, l’ispezione degli attributi, i motivi di reso, le etichette localizzate, gli URL condivisibili e i controlli di copia, senza il peso che rendeva lenta l’esperienza predefinita.

Perché sembra più veloce

Il vantaggio principale è la moderazione.

	Esploratore pubblicato da Shopify	Product Taxonomy Explorer
Prima visita	~60 MB di HTML con DOM nascosto per l’intera tassonomia	Shell + ~81–92 KB gzip di dati delle categorie con ambito root (lingua attiva)
Rendering	Esegue il pre-rendering di tutto, attiva o disattiva la visibilità	Crea solo colonne, dettagli e righe aperte visibili
Ricerca	Infrastruttura separata per l’indice di ricerca	Derivata nel browser dai dati della lingua caricati
Valori degli attributi	Inclusi nel peso iniziale della pagina	Caricati in modo differito per attributo (~52–66 KB gzip al massimo per blocco)
Modalità di errore	Un singolo elenco pesante può rallentare l’intera pagina	Un elenco di valori grande influisce su una riga dopo l’apertura

Le dimensioni della distribuzione e quelle della sessione non coincidono. L’artefatto completo della versione include tutte le lingue (~450 MB su disco, ~2.993 file indirizzati al contenuto in produzione), ma un browser richiede solo le radici della lingua attiva, un frammento core per la radice della tassonomia selezionata, un frammento condiviso dei dettagli e, in seguito, i blocchi necessari per le tue interazioni.

Misurato sulla build verificata v1.4.2 (riferimento del sorgente v2026-05):

1. Dati delle categorie con ambito root: 81–92 KB gzip tra le lingue
2. Primo rendering della tassonomia (localhost): ~232 ms Fast 4G / ~824 ms Slow 4G
3. Dettagli selezionati pronti: ~803 ms Fast 4G / ~2.835 ms Slow 4G
4. Lighthouse in produzione (2026-07-22): 100 Accessibilità, 100 Best practice, 100 SEO; LCP su Slow 4G ~2,2 s (throttling CPU 4×), CLS 0,00

La navigazione rapida dopo il bootstrap è praticamente istantanea. La conferma della copia si trova nel piè di pagina, non in un toast. I tempi nel piè di pagina e nel pannello Debug mostrano chiaramente quando i dati sono in caricamento e quando qualcosa è bloccato.

Creato per flussi di lavoro reali

Trova ciò che ti serve

1. Cerca per nome della categoria, ID categoria, handle dell’attributo o motivo di reso — / o Cmd/Ctrl+K per mettere a fuoco
2. Sfoglia con una navigazione tra le colonne prevedibile quando la gerarchia è importante
3. Condividi URL che conservano la selezione della categoria e la lingua

Ispeziona con sicurezza

1. Breadcrumb, ID breve della categoria, GID completo della tassonomia Shopify, attributi assegnati e motivi di reso in un unico pannello
2. Pulsanti di copia per ID, handle e breadcrumb: conferma nel piè di pagina
3. Righe degli attributi comprimibili; gli elenchi lunghi di valori mostrano prima un’anteprima, poi Mostra tutto senza un altro round trip di rete

Lingue e temi

1. Selettore della lingua per ogni lingua Shopify abilitata: etichette della tassonomia dai dati Shopify, elementi dell’interfaccia dai nostri cataloghi (parità rigorosa delle chiavi tra 31 lingue)
2. Modalità chiara e scura, memorizzata nel browser
3. Controlli WCAG A/AA nei gate automatici della versione per entrambi i temi, oltre alla copertura del focus da tastiera per la ricerca

I numeri

Categorie	14,606
Attributi	8,553
Valori degli attributi	74,813
Motivi di reso	470
Lingue	31
Righe di ricerca derivate	23,629
Risparmio dalla deduplicazione dei dettagli condivisi	129.29 MB

La ricerca esclude intenzionalmente dall’indice predefinito il testo completo dei valori degli attributi. Indicizzare tutti i valori farebbe crescere la ricerca da 23.629 a 98.442 righe e aumenterebbe il costo in termini di memoria e ranking: un compromesso deliberato finché la ricerca a livello di valore non giustificherà un percorso attivabile opzionalmente.

Come lo manteniamo gestibile

Architettura volutamente noiosa:

1. Nessun framework frontend a meno che una modalità di errore misurata non dimostri che ne serve uno
2. Pipeline di dati deterministica — fissa un tag di versione Shopify a un commit immutabile, verifica gli hash del sorgente, pubblica payload compatti con il manifest per ultimo e convalida ogni risorsa del browser prima della versione
3. Un unico artefatto verificato per versione — identità SHA-256 completa tra anteprima, produzione e rollback
4. Distribuzione automatica in produzione sui push del runtime a main dopo il superamento dell’intero gate; le modifiche che riguardano solo la documentazione non generano una distribuzione
5. 57 test smoke del browser e 5 test di accessibilità — deep link, tutte le lingue, payload caricati in modo differito, flussi di copia e layout fino a 320 px

Le prestazioni qui consistono nel fare meno lavoro, più tardi, su dati modellati per lo scopo: non nell’inserire una pagina enorme in un framework o nell’eseguire la logica dell’app a ogni richiesta.

Progetto indipendente

Creato da Company XYZ. Non affiliato a Shopify, salvo per l’utilizzo dei dati open product-taxonomy di Shopify secondo gli stessi termini dello strumento di esplorazione upstream.

Ogni settimana assegniamo categorie, controlliamo attributi e copiamo ID negli strumenti interni: questo è lo strumento di esplorazione che volevamo avere a portata di mano.

Se ti interessano le prestazioni e l’accessibilità nel lavoro sulla vetrina, potrebbe piacerti anche Align, il nostro tema Shopify creato con le stesse priorità.

Provalo

Apri esploratore tassonomia prodotti

Deep link di esempio: Snowboard (sg-4-17-2-17)

Dati sorgente della tassonomia: Shopify/product-taxonomy su GitHub

---

Lo strumento di esplorazione di Shopify distribuisce il magazzino: aspetti che venga caricato l’intero edificio, poi nascondi i piani che non stai visitando.

Product Taxonomy Explorer mantiene organizzato il magazzino e porta in primo piano lo scaffale che stai effettivamente usando: reattivo con oltre 14.000 categorie e 31 lingue.