Dynamic Subcategories
Die Dynamic Subcategories App zeigt auf Kollektionsseiten Ihres Shopify Shops automatisch Unterkategorien an. Abhängig von der gewählten Datenquelle werden entweder die Untereinträge aus einem Navigationsmenü oder Kollektionen aus einem Metafeld ausgelesen und im Storefront dargestellt. Das Erscheinungsbild wird vollständig über den Theme Editor gesteuert und lässt sich zusätzlich mit eigenem CSS erweitern.
Funktionsweise
Der Block ist als Theme App Extension implementiert und wird als Section-Block in den Theme Editor geladen. Beim Seitenaufruf liest das Liquid-Template die aktuelle Kollektion aus und ermittelt daraus die zugehörigen Unterkategorien – entweder durch Traversierung des Navigationsmenüs oder durch Auslesen des Metafelds custom.subcategories. Das geladene Custom CSS aus dem Admin-Interface wird über ein Shop-Metafeld bereitgestellt und direkt in die Seite eingebettet.
Installation
Die App wird über den Shopify App Store installiert. Nach der Installation erscheint der Block Dynamic Subcategories automatisch im Theme Editor unter Abschnitte → Blöcke. Fügen Sie den Block zu Ihrer Kollektionsvorlage hinzu und konfigurieren Sie ihn direkt im Editor.
Datenquellen
Navigationsmenü
Bei dieser Quelle wird ein Navigationsmenü ausgewählt, das die Kollektionshierarchie abbildet. Das Liquid-Template durchsucht das Menü nach einem Eintrag, dessen Handle mit der aktuellen Kollektion übereinstimmt. Die direkten Unterlinks dieses Eintrags werden als Unterkategorien angezeigt.
Voraussetzungen:
- Ein Navigationsmenü mit der aktuellen Kollektion als übergeordnetem Eintrag
- Die gewünschten Unterkategorien müssen als direkte Unterlinks dieses Eintrags angelegt sein
Beispielstruktur im Menü:
Bekleidung → /collections/bekleidung
├── Jacken → /collections/jacken
├── Hosen → /collections/hosen
└── Shirts → /collections/shirts
Beim Aufruf der Kollektion Bekleidung werden dann Jacken, Hosen und Shirts als Unterkategorien angezeigt.
Metafeld
Bei dieser Quelle wird das Metafeld custom.subcategories der aktuellen Kollektion ausgelesen. Darin hinterlegte Kollektionen werden direkt als Unterkategorien dargestellt. Das Metafeld muss vom Typ Kollektion (Liste) sein.
Voraussetzungen:
- Die gewünschten Unterkategorien müssen an der jeweiligen Kollektion im Metafeld eingetragen sein
Die Metafeld-Definition custom.subcategories wird beim ersten Öffnen der App im Shopify Admin automatisch angelegt.
Layouts
Grid
Zeigt die Unterkategorien in einem mehrspaltigen Raster. Die Anzahl der Spalten ist frei konfigurierbar (2–5). Auf kleinen Bildschirmen reduziert sich das Raster automatisch auf 2 Spalten (≤ 768 px) bzw. eine Spalte (≤ 480 px).
Karussell
Zeigt die Unterkategorien horizontal scrollbar mit Navigationsschaltflächen links und rechts. Die Schaltflächen werden automatisch deaktiviert, wenn der Anfang oder das Ende der Liste erreicht ist. Das Karussell passt seine Kachelbreite dynamisch an die aktuelle Container-Breite an und reagiert auf Größenänderungen des Fensters.
Liste
Zeigt die Unterkategorien untereinander in einer vertikalen Auflistung. Bild (falls aktiviert) und Text werden nebeneinander dargestellt. Auf kleinen Bildschirmen (≤ 480 px) wechselt die Liste automatisch zur übereinander Darstellung.
Einstellungen
Alle Einstellungen werden direkt im Shopify Theme Editor am Block vorgenommen.
Datenquelle
| Einstellung | Typ | Standard | Beschreibung |
|---|---|---|---|
| Datenquelle | Auswahl | Navigationsmenü | Wahl zwischen Navigationsmenü und Metafeld |
| Menü | Menü-Auswahl | – | Auszuwählendes Navigationsmenü (nur bei Datenquelle Navigationsmenü) |
Layout
| Einstellung | Typ | Standard | Beschreibung |
|---|---|---|---|
| Layout | Auswahl | Grid | Grid, Karussell oder Liste |
| Spalten | Schieberegler | 3 | Anzahl der Spalten (2–5); nur für Grid und Karussell |
| Abstand | Schieberegler | 16 px | Abstand zwischen den Elementen (0–48 px, Schritte: 4 px) |
Bilder
| Einstellung | Typ | Standard | Beschreibung |
|---|---|---|---|
| Bild anzeigen | Checkbox | Ja | Aktiviert die Anzeige des Kollektionsbildes |
| Bildformat | Auswahl | Quadrat | Seitenverhältnis: Quadrat (1:1), Querformat (16:9) oder Hochformat (2:3) |
| Bildradius | Schieberegler | 4 px | Eckenradius der Bilder (0–40 px, Schritte: 2 px) |
Bilder werden responsiv mit srcset und sizes ausgeliefert (300 w, 600 w, 900 w) und laden per Lazy Loading. Ein Hover-Effekt skaliert das Bild leicht auf 105 %.
Typografie
| Einstellung | Typ | Standard | Beschreibung |
|---|---|---|---|
| Schriftgröße | Schieberegler | 16 px | Schriftgröße der Kategorie-Titel (10–28 px, Schritte: 1 px) |
| Beschreibung anzeigen | Checkbox | Ja | Zeigt die Kollektion-Beschreibung unterhalb des Titels an; HTML wird entfernt, Text auf 120 Zeichen gekürzt |
Karussell-Schaltflächen
Diese Einstellungen sind nur sichtbar, wenn das Layout Karussell ausgewählt ist.
| Einstellung | Typ | Standard | Beschreibung |
|---|---|---|---|
| Schaltflächengröße | Schieberegler | 40 px | Größe der Navigationsschaltflächen (28–56 px, Schritte: 4 px) |
| Schaltflächenstil | Auswahl | Gefüllt | Stil: Gefüllt (weißer Hintergrund, Schatten), Umrahmt (transparent, Rahmen) oder Minimal (kein Hintergrund, kein Rahmen) |
Custom CSS
Im Shopify Admin auf der App-Einstellungsseite kann eigenes CSS für den Block hinterlegt werden. Das CSS wird im Shop-Metafeld $app:custom_css gespeichert und beim Seitenaufruf direkt in den <head> eingebettet.
Das Admin-Interface validiert das CSS in Echtzeit mit der css-tree-Bibliothek und zeigt Syntaxfehler mit Zeilennummer an, bevor gespeichert wird.
CSS-Variablen
Der Block stellt folgende CSS-Custom-Properties zur Verfügung, die über die Theme-Editor-Einstellungen gesetzt werden:
| Variable | Beschreibung | Standardwert |
|---|---|---|
--dsc-columns | Anzahl der Spalten | 3 |
--dsc-gap | Abstand zwischen Elementen | 16px |
--dsc-image-radius | Eckenradius der Bilder | 4px |
--dsc-font-size | Schriftgröße der Titel | 1rem (16px) |
--dsc-btn-size | Größe der Karussell-Schaltflächen | 40px |
CSS-Klassen
| Klasse | Element | Hinweis |
|---|---|---|
.dsc-container | Haupt-Container | Enthält data-layout (grid/carousel/list) und data-carousel-btn-style |
.dsc-item | Einzelnes Unterkategorie-Element (Link) | |
.dsc-item__image | Bild-Container | Zusätzliche Modifier-Klassen: --square, --landscape, --portrait |
.dsc-item__image img | Das eigentliche Bild | Hover-Zoom über .dsc-item:hover |
.dsc-item__content | Text-Container (Titel + Beschreibung) | |
.dsc-item__title | Titel der Unterkategorie (<h3>) | |
.dsc-item__description | Beschreibungstext | |
.dsc-carousel__track | Scrollbarer Track des Karussells | |
.dsc-carousel__btn | Beide Navigationsschaltflächen | Modifier: --prev, --next |
.dsc-empty-state | Platzhalter im Theme-Editor-Modus | Nur sichtbar im Design Mode |
Beispiel
.dsc-container {
padding: 1rem 0;
}
.dsc-item__title {
color: #1a1a2e;
font-weight: 700;
}
.dsc-item__image {
border: 2px solid #e8e8e8;
}
Verhalten im Theme Editor
Wenn die App im Shopify Theme Editor geöffnet wird (Design Mode), zeigt der Block entsprechende Hinweise an, falls keine Unterkategorien gefunden werden:
- Kein Menü ausgewählt oder Menü ohne Einträge → Hinweis zur Menü-Auswahl
- Kollektion nicht im Menü verlinkt → Hinweis, dass kein Eintrag für die aktuelle Kollektion gefunden wurde
- Metafeld leer → Hinweis zur Pflege des Metafelds
custom.subcategories
Im regulären Storefront werden diese Hinweise nicht angezeigt – der Block rendert schlicht nichts, wenn keine Daten vorliegen.
Responsive Verhalten
| Breakpoint | Grid | Liste | Karussell |
|---|---|---|---|
| > 768 px | Konfigurierte Spaltenanzahl | Nebeneinander (Bild + Text) | Konfigurierte Spaltenanzahl |
| ≤ 768 px | 2 Spalten | Nebeneinander | Konfigurierte Spaltenanzahl |
| ≤ 480 px | 1 Spalte | Untereinander | Konfigurierte Spaltenanzahl |
Das Karussell berechnet seine Kachelbreite dynamisch anhand der aktuellen Container-Breite und passt sich über einen ResizeObserver automatisch an Fenstergrößenänderungen an.