Über Shopifys 3-Ebenen-Menüverschachtelung hinaus

Shopifys moderner Editor Onlineshop > Navigation erlaubt, Menüelemente 3 Ebenen tief zu verschachteln. Für die meisten Shops reicht das reichlich. Wenn Sie aber Teile, Hardware oder irgendetwas mit tausenden SKUs verkaufen, verteilt über tiefe Unterkategorien, stoßen Sie schnell an die Decke. Die veraltete Verschachtelung in Breadcrumbs Uncomplicated, Categories Uncomplicated und Menus Uncomplicated ist der saubere Weg hindurch.

Warum die 3-Ebenen-Grenze existiert

Die moderne Menü-Admin-Oberfläche begrenzt die Verschachtelung auf 3 Ebenen, und das Dropdown, das die meisten Themes mitbringen, rendert ohnehin nicht gut darüber hinaus. Shopifys Datenmodell hat aber keine solche Grenze - es hat schon immer tiefere Bäume über das ältere Muster unterstützt, bei dem ein Menüelement per Name auf ein anderes Menü zeigt. Genau das nutzt die veraltete Verschachtelung in der App aus.

Der naive Umweg (und warum er scheitert)

Händler versuchen oft, eine 4. Ebene vorzutäuschen, indem sie Untermenüs duplizieren oder sich überlappende Geschwistermenüs anlegen. Shopify kann zwei gleichnamige Menüelemente nicht auseinanderhalten, sodass doppelte Kollektionsnamen und URLs den URL-Resolver verwirren. Das Symptom in Ihren Breadcrumbs ist eine Spur, die bei manchen Produkten zufällig auf den falschen Ast springt, ohne erkennbares Muster - weil der Resolver den ersten gefundenen Duplikateintrag genommen hat.

Veraltete Verschachtelung in der App

Menüverschachtelung finden Sie unter Kategorienliste > Menüverschachtelung (oder Floatlist-Einstellungen > Menüverschachtelung in Menus Uncomplicated).

• Moderne Verschachtelung (die Vorgabe) - spiegelt Shopifys Admin, begrenzt auf 3 Ebenen.
• Veraltete Verschachtelung - gleicht ein Menüelement per Titel mit einem anderen Menü ab, sodass das passende Menü zu einem Unterbaum unterhalb dieses Elements wird. Keine Tiefenbegrenzung.

Die veraltete Verschachtelung funktioniert so, wie Shopify-Navigation vor dem modernen Editor funktionierte, und das Datenmodell unterstützt sie weiterhin. Um über 3 Ebenen hinauszugehen, erstellen Sie in Onlineshop > Navigation ein Menü der 4. (oder tieferen) Ebene, dessen Titel mit dem Blatt-Menüelement übereinstimmt, an dem es hängen soll. Die App heftet sie beim Rendern aneinander.

Der Kompromiss, der im Tooltip der Einstellung selbst genannt wird, ist, dass Titel über alle Menüs hinweg global eindeutig sein müssen - teilen sich zwei Menüs oder Menüelemente einen Titel, können Shopify (und die App) das übergeordnete Element nicht zuordnen.

Ein durchgespieltes Beispiel: ein 5-stufiger Befestigungsbaum

Ein 5-stufiger Befestigungsbaum, wie ihn ein ernsthafter Hardware-Katalog braucht:

• Befestigungen
  • Schrauben
    • Maschinenschrauben
      • Edelstahl-Maschinenschrauben
        • 18-8-Edelstahl-Maschinenschrauben

Die Struktur auf der Shopify-Seite: ein Menü main-menu mit Befestigungen > Schrauben > Maschinenschrauben (3 Ebenen, das moderne Limit), dann ein separates Menü namens Edelstahl-Maschinenschrauben, dessen erstes Element 18-8-Edelstahl-Maschinenschrauben ist. Die App erkennt die Titelübereinstimmung zwischen dem Element der 3. Ebene und dem zweiten Menü und heftet sie zusammen, als wären sie ein Baum. Der Breadcrumb auf einem 18-8-Produkt lautet Startseite > Befestigungen > Schrauben > Maschinenschrauben > Edelstahl-Maschinenschrauben > 18-8-Edelstahl-Maschinenschrauben.

Jeder Titel in diesem Baum ist global eindeutig - das hält den Titelabgleich der veralteten Verschachtelung am Laufen.

Leistungsüberlegungen

Tiefe Bäume bedeuten mehr Menüelemente, also etwas größere Snapshots und ein leicht langsameres Kategorien aktualisieren. In der Praxis aktualisiert sich ein 6-stufiger Baum mit etwa 500 Einträgen auf einem typischen Shop in wenigen Sekunden, und das Rendering pro Seite bleibt unverändert, weil der Snapshot zwischengespeichert wird.

Einschränkungen

1. Titel müssen über alle Menüs hinweg global eindeutig sein. Zwei Menüelemente (oder zwei Menüs), die sich einen Titel teilen, verwirren den Titelabgleich, auf den die veraltete Verschachtelung angewiesen ist - die App meldet Duplikate, aber Sie müssen sie in Onlineshop > Navigation beheben.
2. Das Dropdown des Hauptmenüs zeigt in den meisten Themes nichts über Ebene 3 hinaus an, selbst wenn Ihre Daten tiefer reichen - dafür brauchen Sie eine Mega-Menü-App. Die Breadcrumbs bleiben dabei korrekt.
3. Shopify-Suchergebnisse geben Kurzform-URLs /products/... zurück, denen der volle Pfadkontext fehlt (siehe Beitrag zu mehreren Kollektionen, wie die App damit umgeht).

Zusammenfassung

Wenn Sie sich jemals von Shopifys 3-Ebenen-Limit eingeengt gefühlt haben, lässt Sie die veraltete Verschachtelung in Breadcrumbs Uncomplicated, Categories Uncomplicated oder Menus Uncomplicated die tiefe Taxonomie aufbauen, die Ihre Kunden erwarten, ohne Hacks oder doppelte Kollektionen - vorausgesetzt jedes Menü und jedes Menüelement hat einen eindeutigen Titel.