Produkt-Taxonomie-Explorer

Der Product Taxonomy Explorer ist ein statisches, frameworkfreies Browser-Tool für die Shopify-Produkttaxonomie — Kategorien, Attribute, Attributwerte und Rückgabegründe. Wir haben es für die Shopify-Community entwickelt, damit Sie es den ganzen Tag geöffnet lassen können: Produkte zuordnen, Handles prüfen, IDs kopieren und Kategorie-Links mit einem Teammitglied teilen.

Kein Konto erforderlich. Heller und dunkler Modus. Alle 31 Locales aus Shopifys aktueller stabiler Taxonomieversion.

Warum wir das entwickelt haben

Shopifys veröffentlichter Taxonomie-Explorer ist wirklich nützlich — und wirklich schwergewichtig.

Als wir uns die Version latest (2026-05) angesehen haben, lud eine einzelne Kategorie-URL etwa 59.9 MB HTML herunter. Die Seite rendert riesige Kategorien-, Attribut-, Zuordnungs- und Rückgabegrund-Panels vorab in das DOM, speichert Beziehungsdaten in Attributen und schaltet die Sichtbarkeit in zwischengespeicherten Knotenlisten um. Die Suche läuft über externe browserseitige Tools. Die Seite gibt Arbeit sogar an den Hauptthread zurück — ein Zeichen dafür, dass der Browser mit seiner eigenen Größe zu kämpfen hat.

Wenn Sie häufig mit Taxonomiedaten arbeiten, kennen Sie wahrscheinlich Folgendes:

1. Langsame erste Ladevorgänge in Netzwerken mit begrenzter Bandbreite oder auf ausgelasteten Geräten
2. Träge Suche und Spaltennavigation, sobald der Tab geöffnet ist
3. Hoher Speicherbedarf und gelegentliche Tab-Abstürze
4. Schwer verständlicher Ladestatus — werden noch Daten abgerufen oder hängt die Seite?
5. Enormes Seitengewicht für eine einfache Frage: „Wie lautet die Kategorie-ID für Snowboards?“

Das vorgelagerte JSON ist bereits für sich genommen groß — etwa 94.8 MB für die englische taxonomy.json und 80.0 MB für categories.json. Der standardmäßige Explorer verkleinert dieses Problem nicht; er rendert einen großen Teil des Baums von Anfang an in HTML.

Wir wollten ein Nachschlage-Tool, das sich wie ein Tool anfühlt, nicht wie ein Stresstest.

Was wir entwickelt haben

Wir wollten nicht Shopifys UI mit zusätzlichem Feinschliff nachbauen. Wir wollten, dass sich die Arbeit mit Taxonomien ruhig anfühlt.

1. Kompakte, app-fertige Daten — zur Build-Zeit in flache Datensätze, stabile IDs, deduplizierte Beziehungen und inhaltsgehashte JSON-Shards normalisiert, deren Größe an das Laden durch die UI angepasst ist
2. Nur Sichtbares rendern — Kategoriespalten für den aktuellen Pfad, ein Detail-Panel, begrenzte Suchergebnisse und Attributzeilen erst nach dem Aufklappen
3. Details bei Bedarf laden — Attributmetadaten und Wertelisten werden in kleinen Blöcken abgerufen, wenn Sie sie benötigen
4. Ohne doppelten Index suchen — der Browser leitet etwa 23.600 durchsuchbare Zeilen aus Kategorien, kompakten Attributzusammenfassungen und bereits im Speicher befindlichen Rückgabegründen ab
5. Statische Auslieferung — HTML, CSS, JavaScript und generierte Daten in Cloudflare Workers Static Assets; cachebare Dateien umgehen die Worker-Ausführung
6. Vollständige Locale-Unterstützung — alle 31 von Shopify generierten Locales für die festgelegte Version, mit vollständigen UI-Texten in jeder aktivierten Sprache

Sie erhalten weiterhin Kategoriesuche, Attributinspektion, Rückgabegründe, lokalisierte Bezeichnungen, teilbare URLs und Kopierfunktionen — ohne das Gewicht, das die standardmäßige Erfahrung ausgebremst hat.

Warum es sich schneller anfühlt

Der größte Vorteil ist Zurückhaltung.

	Shopifys veröffentlichter Explorer	Product Taxonomy Explorer
Erster Besuch	~60 MB HTML mit verborgenem DOM für die vollständige Taxonomie	Shell + ~81–92 KB gzip kategoriebasierte Daten auf Stammebene (aktives Locale)
Rendering	Alles vorab rendern, Sichtbarkeit umschalten	Nur sichtbare Spalten, Details und geöffnete Zeilen erstellen
Suche	Separate Infrastruktur für den Suchindex	Im Browser aus geladenen Localedaten abgeleitet
Attributwerte	In der anfänglichen Seitengröße enthalten	Pro Attribut verzögert geladen (max. ~52–66 KB gzip pro Chunk)
Fehlermodus	Eine umfangreiche Liste kann die gesamte Seite beeinträchtigen	Eine große Werteliste betrifft eine Zeile, nachdem Sie sie geöffnet haben

Deployment-Größe und Sitzungsgröße sind nicht dasselbe. Das vollständige Release-Artefakt enthält jedes Locale (~450 MB auf der Festplatte, ~2.993 inhaltsadressierte Dateien in der Produktion), aber ein Browser fordert nur die Wurzeln des aktiven Locales, einen Core-Shard für die ausgewählte Taxonomiewurzel, einen gemeinsam genutzten Detail-Shard und später die für Ihre Interaktionen benötigten Chunks an.

Gemessen mit dem verifizierten Build v1.4.2 (Quellreferenz v2026-05):

1. Kategoriedaten auf Stammebene: 81–92 KB gzip über alle Locales
2. Erstes Taxonomie-Rendering (localhost): ~232 ms Fast 4G / ~824 ms Slow 4G
3. Ausgewähltes Detail bereit: ~803 ms Fast 4G / ~2.835 ms Slow 4G
4. Production Lighthouse (2026-07-22): 100 Barrierefreiheit, 100 Best Practices, 100 SEO; Slow 4G LCP ~2,2 s (4× CPU-Drosselung), CLS 0,00

Die Navigation nach dem Bootstrap ist praktisch sofort. Die Kopierbestätigung befindet sich in der Fußzeile, nicht in einem Toast. Die Zeitangaben in der Fußzeile und im Debug-Panel zeigen klar, wann Daten geladen werden und wann etwas feststeckt.

Für echte Workflows entwickelt

Finden, was Sie benötigen

1. Suchen Sie nach Kategoriename, Kategorie-ID, Attribut-Handle oder Rückgabegrund — / oder Cmd/Ctrl+K, um den Fokus zu setzen
2. Durchsuchen Sie die Taxonomie mit vorhersehbarer Spaltennavigation, wenn die Hierarchie wichtig ist
3. Teilen Sie URLs, die die Kategorieauswahl und das Locale beibehalten

Mit Sicherheit prüfen

1. Breadcrumb, kurze Kategorie-ID, vollständige Shopify-Taxonomie-GID, zugewiesene Attribute und Rückgabegründe in einem Panel
2. Kopierschaltflächen für IDs, Handles und Breadcrumbs — Bestätigung in der Fußzeile
3. Aufklappbare Attributzeilen; lange Wertelisten werden zunächst als Vorschau angezeigt, anschließend Alle anzeigen, ohne eine weitere Netzwerkanfrage

Sprachen und Themes

1. Sprachauswahl für jedes aktivierte Shopify-Locale — Taxonomiebezeichnungen aus Shopifys Daten, UI-Elemente aus unseren Katalogen (strikte Schlüsselparität über 31 Locales hinweg)
2. Heller und dunkler Modus, im Browser gespeichert
3. WCAG-A/AA-Prüfungen in automatisierten Release-Gates für beide Themes sowie Tastaturfokus-Unterstützung für die Suche

Nach Zahlen

Kategorien	14,606
Attribute	8,553
Attributwerte	74,813
Rückgabegründe	470
Locales	31
Abgeleitete Suchzeilen	23,629
Durch gemeinsame Deduplizierung von Details eingespart	129.29 MB

Die Suche schließt vollständige Attributwerttexte absichtlich aus dem Standardindex aus. Die Indexierung aller Werte würde die Suche von 23.629 auf 98.442 Zeilen vergrößern und den Speicher- und Rankingaufwand erhöhen — ein bewusster Kompromiss, bis eine Suche auf Wertebene einen optional aktivierbaren Pfad rechtfertigt.

Wie wir die Wartbarkeit sicherstellen

Bewusst langweilige Architektur:

1. Kein Frontend-Framework, sofern nicht ein gemessener Fehlermodus den Bedarf dafür nachweist
2. Deterministische Datenpipeline — ein Shopify-Release-Tag auf einen unveränderlichen Commit festlegen, Quell-Hashes prüfen, kompakte Payloads mit dem Manifest als letztem Element veröffentlichen und jedes Browser-Asset vor dem Release validieren
3. Ein verifiziertes Artefakt pro Release — vollständige SHA-256-Identität über Vorschau, Produktion und Rollback hinweg
4. Automatisches Produktions-Deployment bei Runtime-Pushes auf main, nachdem das vollständige Gate erfolgreich durchlaufen wurde; reine Dokumentationsänderungen werden nicht bereitgestellt
5. 57 Browser-Smoke-Tests und 5 Barrierefreiheitstests — Deep Links, alle Locales, verzögerte Payloads, Kopier-Workflows und Layouts bis hinunter zu 320 px

Performance bedeutet hier, später weniger Arbeit mit für den Zweck geformten Daten zu erledigen — nicht, eine riesige Seite in ein Framework einzubetten oder bei jeder Anfrage App-Logik auszuführen.

Unabhängiges Projekt

Entwickelt von Company XYZ. Nicht mit Shopify verbunden, abgesehen davon, dass die offenen product-taxonomy-Daten von Shopify zu denselben Bedingungen wie im vorgelagerten Explorer verwendet werden.

Wir ordnen jede Woche Kategorien zu, prüfen Attribute und kopieren IDs in interne Tools — dies ist der Explorer, den wir selbst zur Hand haben wollten.

Wenn Ihnen Performance und Barrierefreiheit bei Storefront-Arbeiten wichtig sind, gefällt Ihnen vielleicht auch Align, unser Shopify-Theme mit denselben Prioritäten.

Ausprobieren

Produkt-Taxonomie-Explorer öffnen

Beispiel für einen Deep Link: Snowboards (sg-4-17-2-17)

Quelldaten der Taxonomie: Shopify/product-taxonomy auf GitHub

---

Shopifys Explorer liefert das Lager aus — Sie warten, bis das gesamte Gebäude geladen ist, und blenden dann die Stockwerke aus, die Sie nicht besuchen.

Der Product Taxonomy Explorer hält das Lager organisiert und holt das Regal nach vorn, das Sie tatsächlich verwenden — responsiv über mehr als 14.000 Kategorien und 31 Sprachen hinweg.