Shopify: Breadcrumbs und ItemList Markup für Collections nachrüsten.

Passt für dich, wenn: du einen Shopify-Shop betreibst, Zugriff auf den Theme-Code hast (Onlineshop, Themes, Code bearbeiten) und deine Collections mehr als eine Handvoll Produkte listen.

Das Problem: Shopify versteckt deine Struktur

Shopify-Themes zeigen auf Produkt- und Collection-Seiten oft keinen Pfad an. Der Besucher weiß nicht, wo er sich im Sortiment befindet, und Google fehlt ein wichtiges Signal für die Seitenhierarchie. Dazu kommt: Collection-Seiten sind Listen, aber kaum ein Theme sagt das auch maschinenlesbar. Eine Kategorieseite ohne ItemList-Markup ist für Google erstmal nur eine Seite mit vielen Links.

Beides zusammen kostet dich Sichtbarkeit an zwei Stellen: In den Suchergebnissen fehlen Breadcrumb-Pfade und strukturierte Signale für Sitelinks. Und KI-Systeme, die deinen Shop als Quelle bewerten, können die Beziehung zwischen Kategorie und Produkten schlechter erfassen.

Zur Einordnung, wo die Breadcrumbs hingehören: ganz nach oben, als erstes Element über der H1. So sieht die Anatomie einer sauberen Kategorieseite aus:

Schritt 1: Breadcrumbs als Snippet anlegen

Den Code-Editor erreichst du im Shopify-Admin unter Onlineshop, Themes, dann beim Theme über das Drei-Punkte-Menü und Code bearbeiten. Wichtig, bevor du irgendetwas anfasst: Dupliziere dein Theme über dasselbe Menü und arbeite im Duplikat. Veröffentlicht wird erst, wenn alles validiert ist.

Screenshot: So kommst du in den Code-Editor

Lege im Code-Editor unter Snippets eine neue Datei breadcrumbs.liquid an und füge diesen Code ein. Er rendert die sichtbaren Breadcrumbs und das passende BreadcrumbList-Markup in einem Rutsch, damit sichtbarer Pfad und strukturierte Daten nie auseinanderlaufen:

{% unless template == 'index' %}
    {%- liquid
      assign crumb_excluded = 'all,frontpage,sale,sales,angebot,angebote,aktion,aktionen,deals,bestseller,neuheiten,new,featured,black-friday,cyber-monday' | split: ','
      assign crumb_collection = blank
      assign crumb_parent = blank
      assign crumb_grandparent = blank

      if template contains 'product'
        assign primary = product.metafields.custom.primary_collection.value
        if primary.first != blank
          assign primary = primary.first
        endif
        if primary != blank
          unless crumb_excluded contains primary.handle
            assign crumb_collection = primary
          endunless
        endif

        if crumb_collection == blank and collection
          unless crumb_excluded contains collection.handle
            assign crumb_collection = collection
          endunless
        endif

        if crumb_collection == blank
          for c in product.collections
            unless crumb_excluded contains c.handle
              assign c_parent = c.metafields.custom.parent_collection.value
              if c_parent.first != blank
                assign c_parent = c_parent.first
              endif
              if c_parent != blank
                assign crumb_collection = c
                break
              endif
            endunless
          endfor
        endif

        if crumb_collection == blank
          for c in product.collections
            unless crumb_excluded contains c.handle
              assign crumb_collection = c
              break
            endunless
          endfor
        endif
      elsif template contains 'collection' and collection
        assign crumb_collection = collection
      endif

      if crumb_collection != blank
        assign p = crumb_collection.metafields.custom.parent_collection.value
        if p.first != blank
          assign p = p.first
        endif
        if p != blank and p.handle != crumb_collection.handle
          unless crumb_excluded contains p.handle
            assign crumb_parent = p
          endunless
        endif
      endif

      if crumb_parent != blank
        assign gp = crumb_parent.metafields.custom.parent_collection.value
        if gp.first != blank
          assign gp = gp.first
        endif
        if gp != blank and gp.handle != crumb_parent.handle and gp.handle != crumb_collection.handle
          unless crumb_excluded contains gp.handle
            assign crumb_grandparent = gp
          endunless
        endif
      endif
    -%}
    <nav class="breadcrumbs" aria-label="Breadcrumb">
      <a href="{{ routes.root_url }}">Start</a>
      {% if crumb_grandparent != blank %}
        <span aria-hidden="true">›</span>
        <a href="{{ crumb_grandparent.url }}">{{ crumb_grandparent.title }}</a>
      {% endif %}
      {% if crumb_parent != blank %}
        <span aria-hidden="true">›</span>
        <a href="{{ crumb_parent.url }}">{{ crumb_parent.title }}</a>
      {% endif %}
      {% if template contains 'product' %}
        {% if crumb_collection != blank %}
          <span aria-hidden="true">›</span>
          <a href="{{ crumb_collection.url }}">{{ crumb_collection.title }}</a>
        {% endif %}
        <span aria-hidden="true">›</span>
        <span aria-current="page">{{ product.title }}</span>
      {% elsif template contains 'collection' and collection %}
        <span aria-hidden="true">›</span>
        <span aria-current="page">{{ collection.title }}</span>
      {% endif %}
    </nav>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "Start", "item": "{{ shop.url }}" }
        {%- assign pos = 1 -%}
        {%- if crumb_grandparent != blank -%}
          {%- assign pos = pos | plus: 1 -%}
          ,{ "@type": "ListItem", "position": {{ pos }}, "name": {{ crumb_grandparent.title | json }}, "item": "{{ shop.url }}{{ crumb_grandparent.url }}" }
        {%- endif -%}
        {%- if crumb_parent != blank -%}
          {%- assign pos = pos | plus: 1 -%}
          ,{ "@type": "ListItem", "position": {{ pos }}, "name": {{ crumb_parent.title | json }}, "item": "{{ shop.url }}{{ crumb_parent.url }}" }
        {%- endif -%}
        {%- if template contains 'product' -%}
          {%- if crumb_collection != blank -%}
            {%- assign pos = pos | plus: 1 -%}
            ,{ "@type": "ListItem", "position": {{ pos }}, "name": {{ crumb_collection.title | json }}, "item": "{{ shop.url }}{{ crumb_collection.url }}" }
          {%- endif -%}
          {%- assign pos = pos | plus: 1 -%}
          ,{ "@type": "ListItem", "position": {{ pos }}, "name": {{ product.title | json }}, "item": "{{ shop.url }}{{ product.url }}" }
        {%- elsif template contains 'collection' and collection -%}
          {%- assign pos = pos | plus: 1 -%}
          ,{ "@type": "ListItem", "position": {{ pos }}, "name": {{ collection.title | json }}, "item": "{{ shop.url }}{{ collection.url }}" }
        {%- endif %}
      ]
    }
    </script>
    {% endunless %}
    

Wichtig: Für Produkte nutzt das Snippet die kanonische Produkt-URL ({{ product.url }}) statt der Collection-Pfade mit /collections/ in der URL. So zeigst du Google immer die eine, kanonische Version und vermeidest Duplicate-Content-Pfade.

Auf Produktseiten entscheidet der Logik-Block oben in vier Stufen, welche Collection in den Pfad kommt: zuerst ein optional gepflegtes Produkt-Metafeld. Dann der Collection-Kontext der aufgerufenen URL. Dann die erste Produkt-Collection, die eine gepflegte Oberkategorie hat, denn eine Collection mit parent_collection-Metafeld ist erkennbar Teil deiner Kategorie-Struktur, während Themen-Collections wie „Geschenkideen" keine haben. Erst ganz zuletzt nimmt das Snippet irgendeine zulässige Collection. Ohne diese Vorfahrtsregel gewinnt sonst die alphabetisch erste Collection, und dein Produkt steht plötzlich unter „Anti-Aging" statt in seiner Kategorie. Die Liste crumb_excluded hält zusätzlich Sale-, Aktions- und Bestseller-Collections aus dem Pfad heraus, denn „Start, Black Friday, Produkt" ist keine Hierarchie, sondern ein Unfall. Ergänze die Liste um die Handles deiner eigenen Aktionsflächen, bevor du das Snippet einbaust.

Und das Snippet kann echte Kategorie-Ebenen: Es prüft bei der gewählten Collection das Collection-Metafeld für die Oberkategorie und baut daraus die Kette nach oben, bis zu zwei Eltern-Ebenen. Aus „Start, Espressobohnen" wird so „Start, Kaffee, Espressobohnen", auf Produktseiten entsprechend „Start, Kaffee, Espressobohnen, Produktname". Ohne gepflegte Metafelder zeigt das Snippet eine Ebene und verhält sich wie die Basisversion, nichts davon ist Pflicht.

Beide Metafelder legst du unter Einstellungen, Benutzerdefinierte Daten an, jeweils als Collection-Referenz vom Typ „Eine Collection":

1. Produkte, „Primary Collection" (ergibt custom.primary_collection): steuert auf Produktseiten, welche Collection im Pfad steht. Lohnt sich für Produkte, die in vielen Collections hängen.
2. Collections, „Parent Collection" (ergibt custom.parent_collection): steuert, welche Oberkategorie vor einer Collection steht. Bei jeder Unterkategorie-Collection die Oberkategorie auswählen, das Snippet erledigt den Rest, auch über zwei Ebenen.

Wichtig sind die exakten Namespaces custom.primary_collection und custom.parent_collection, denn genau die liest das Snippet. Der Schalter „Storefront API access" in der Metafeld-Definition spielt keine Rolle, Liquid liest Metafelder auch ohne ihn.

Noch ein Wort zur Architektur: Du kannst Produkt- und Collection-Logik auch auf zwei getrennte Snippets verteilen, das machen manche Shops so. Ich halte bewusst beides in einer Datei, damit sichtbarer Pfad und Markup nie auseinanderlaufen und der Einbau in Schritt 3 eine einzige Zeile bleibt.

Schritt 2: ItemList Markup für Collections

Zweite Datei, gleiche Stelle: collection-itemlist.liquid. Das Snippet sagt Google, dass deine Collection eine geordnete Liste von Produkten ist, wie viele es insgesamt sind und in welcher Reihenfolge sie stehen:

{% if template contains 'collection' and collection %}
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "name": {{ collection.title | json }},
      "numberOfItems": {{ collection.products_count }},
      "itemListElement": [
        {%- for product in collection.products -%}
        {
          "@type": "ListItem",
          "position": {{ forloop.index }},
          "url": "{{ shop.url }}{{ product.url }}"
        }{%- unless forloop.last -%},{%- endunless -%}
        {%- endfor %}
      ]
    }
    </script>
    {% endif %}
    

Zwei Hinweise aus der Praxis: Erstens listet das Snippet die Produkte der aktuellen Seite. Wenn deine Collection paginiert ist, bekommt jede Seite ihre eigene, korrekte Liste, und numberOfItems nennt trotzdem die Gesamtzahl. Zweitens reicht die schlanke Variante mit url und position völlig. Vollständige Product-Objekte gehören auf die Produktseite, nicht in die Liste.

Schritt 3: Einbauen und alte Breadcrumbs ersetzen

Nach den ersten beiden Schritten liegen zwei Dateien im Theme, aber es passiert noch nichts. Shopifys eigener Theme-Check sagt dir das sogar:

3a: Erst prüfen, ob dein Theme schon Breadcrumbs hat

Viele Themes bringen eigene Breadcrumbs mit, und die sehen oft anders aus als erwartet: nur „Startseite" und Produktname, ohne die Kategorie-Ebene dazwischen, und im Quelltext fehlt das BreadcrumbList-Markup komplett. So sieht der Unterschied aus:

Solche Alt-Breadcrumbs müssen raus, bevor die neuen reinkommen, sonst hast du zwei Pfade auf der Seite und doppeltes Markup.

Der schnellste Weg führt über layout/theme.liquid. Bei vielen Themes wird die Breadcrumb genau dort gerendert, zwischen Header und {{ content_for_layout }}. Öffne die Datei und such mit Strg+F nach „breadcrumb". Ein Treffer sieht dann zum Beispiel so aus:

Wenn du so einen Block findest, ist der Umbau ein Handgriff: Ersetze den alten render-Aufruf mitsamt seinen Parametern (Dinge wie separator oder show_product_collection gehören zum alten Snippet, unseres ignoriert sie) durch {% render 'breadcrumbs' %}. Einen eventuellen {% if settings.breadcrumbs_enabled %}-Rahmen nimmst du mit raus, sonst hängt die Sichtbarkeit deiner neuen Breadcrumbs an einem Häkchen im Theme-Customizer, das jemand irgendwann aus Versehen abwählt. Umgebende Wrapper-Divs (etwa section-breadcrumbs-wrapper) lässt du dagegen stehen: Die zentrieren die Breadcrumb auf die Content-Breite des Themes. Damit sind Ersetzen und Einbau in einem Schritt erledigt, und du springst direkt zu Schritt 3c.

Wird die Suche in theme.liquid nicht fündig, rendert dein Theme die Breadcrumbs in einer Section oder einem Snippet. Dann geht es so weiter:

1. Global im Code suchen: Öffne im Code-Editor die Suche (Lupensymbol) und such über alle Dateien nach „breadcrumb". Achte auf die Schreibweisen: Theme-Dateien heißen gern breadcrumb.liquid im Singular, während unsere neue Datei breadcrumbs.liquid heißt. Such zusätzlich nach „crumb", manche Themes kürzen ab.
2. Im Frontend nachsehen: Wenn dein Shop sichtbare Breadcrumbs zeigt, mach einen Rechtsklick darauf, wähle „Untersuchen" und lies den Klassennamen aus dem HTML ab. Nach dieser Klasse suchst du dann im Code. So findest du auch Breadcrumbs, die tief in einer Section stecken.
3. Einbindung ersetzen: Gefunden heißt noch nicht erledigt. Entscheidend ist die Stelle, an der das alte Snippet aufgerufen wird, meist eine Zeile wie {% render 'breadcrumb' %} oder bei älteren Themes {% include 'breadcrumb' %}. Diese Zeile ersetzt du durch den neuen Aufruf. Die alte Snippet-Datei selbst kannst du liegen lassen, ohne Aufruf ist sie stumm.

So sah es bei einem realen Projekt aus, direkt nach dem Anlegen der neuen Datei: Das Theme hatte längst ein eigenes breadcrumb.liquid, eine Zeile über dem neuen Snippet:

Wenn du beim Suchen nicht weiterkommst oder dir beim Entfernen unsicher bist: Kopiere die verdächtigen Dateien (theme.liquid plus die Treffer deiner Suche) in Claude oder ChatGPT und frag konkret: „Wo werden in diesem Shopify-Theme die Breadcrumbs gerendert, und wie ersetze ich sie gegen {% render 'breadcrumbs' %}?" Das ist genau die Sorte Aufgabe, die KI-Assistenten zuverlässig lösen, weil der komplette Kontext in den Dateien steckt. Mit dem Theme-Duplikat aus Schritt 1 kann dabei nichts kaputtgehen.

3b: Breadcrumbs einbinden (nur, wenn dein Theme keine hatte)

Hast du in 3a den Theme-Block in theme.liquid ersetzt, ist dieser Schritt schon erledigt. Für Themes ganz ohne Breadcrumbs: Öffne layout/theme.liquid und such die Zeile {{ content_for_layout }}. Sie ist der Platzhalter, an dem Shopify den Seiteninhalt einsetzt. Direkt davor kommt der neue Aufruf:

{% render 'breadcrumbs' %}
    {{ content_for_layout }}
    

Damit stehen die Breadcrumbs auf jeder Seite über dem Inhalt, und das Snippet blendet sich auf der Startseite selbst aus. Das gilt ausdrücklich auch für Produktseiten: Wer in Schritt 3a Theme-Breadcrumbs entfernt hat, bekommt sie hier vollwertig ersetzt, inklusive der Kategorie-Ebene, die vorher meist fehlte. Falls dein Theme zwischen Header und Inhalt noch Banner-Sections rendert, setz den Aufruf einfach unter diese Zeilen, die Breadcrumbs sollen direkt über der H1 stehen.

3c: ItemList ins Collection-Template

Hier lauert die zweite Theme-Falle: Die Datei, die deine Collection-Produkte rendert, heißt je nach Theme anders. Bei Dawn und seinen Ablegern ist es sections/main-collection-product-grid.liquid, andere Themes nennen sie main-collection.liquid, collection-template.liquid oder rendern noch direkt aus templates/collection.liquid. So findest du deine:

1. Öffne templates/collection.json. Im Abschnitt "main" steht unter "type" der Name der zuständigen Section, zum Beispiel "main-collection-product-grid". Das ist deine Datei im sections-Ordner.
2. Kein collection.json vorhanden? Dann ist dein Theme älter und arbeitet mit templates/collection.liquid direkt. Auch gut, dann gehört der Aufruf dorthin.
3. Zur Not: Code-Suche nach collection.products. Die Datei mit der Produktschleife ist die richtige.

In dieser Datei setzt du den Aufruf ans Ende, außerhalb aller Schleifen:

{% render 'collection-itemlist' %}
    

3d: Styling nicht vergessen

Das Snippet liefert bewusst kein eigenes CSS, damit es keinem Theme dazwischenfunkt. Direkt nach dem Einbau sehen die Breadcrumbs deshalb nach rohem HTML aus: blaue Links, falsche Abstände. Das ist normal und in zwei Minuten behoben. Wenn du in 3a einen Theme-Block ersetzt hast, gilt außerdem: Das alte Theme-CSS stylte die alten Klassen, nicht unsere. Dieser Startpunkt gehört in den Theme-Editor unter Theme-Einstellungen, Benutzerdefiniertes CSS oder in die zentrale CSS-Datei deines Themes:

.breadcrumbs {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      max-width: var(--page-width, 1200px);
      margin: 0 auto;
      padding: 14px 20px;
      font-size: 0.875rem;
      line-height: 1.4;
      color: rgba(0, 0, 0, 0.55);
    }
    .breadcrumbs a {
      color: inherit;
      text-decoration: none;
    }
    .breadcrumbs a:hover {
      text-decoration: underline;
    }
    .breadcrumbs span[aria-current="page"] {
      color: rgba(0, 0, 0, 0.85);
    }
    

Die Zeilen max-width und margin: 0 auto sind der Fix für den zweithäufigsten Stolperstein: Klebt der Pfad ganz links am Viewport-Rand, steht der render-Aufruf außerhalb des Content-Containers deines Themes. Dawn-basierte Themes definieren die Variable --page-width, dann passt sich die Breite automatisch an; sonst trägst du die Content-Breite deines Themes als Wert ein. Farben und Schriftgröße gleichst du ans Theme an. Die Leitplanke bleibt: kleine Schrift, dezente Farbe, Orientieren statt Dominieren. Und noch einmal, weil es der häufigste Styling-Fehler ist: nicht mobil ausblenden.

Aus der Praxis: ein Sortiment, zwei Sorten Collections

Damit das Ganze greifbarer wird, hier das Muster aus einem aktuellen Kundenprojekt, übersetzt in unseren Demo-Shop, eine Kaffeerösterei. Der Shop hat, wie die meisten, zwei Sorten Collections:

1. Taxonomie-Collections bilden das Sortiment ab, hier bewusst über drei Ebenen: „Zubehör" als Oberkategorie, darunter „Mühlen", darunter „Handmühlen". Jede Ebene beantwortet eine eigene Suchintention, von „Kaffeezubehör" bis „Handkaffeemühle kaufen". Genau deshalb haben wir uns für mehrere Unterkategorien entschieden statt einer flachen Liste.
2. Themen-Collections wie „Geschenkideen", „Cold Brew" oder die Bestseller sind Einstiege für Kampagnen, Startseite und Newsletter. Sie gehören zum Shop, aber nicht in die Hierarchie.

Die Breadcrumb-Pflege daraus: Bei jeder Unterkategorie steht die Oberkategorie im Metafeld „Parent Collection", das war eine Stunde Fleißarbeit übers Sortiment. Die Themen-Collections bekommen schlicht kein Parent-Metafeld, damit greift auf Produktseiten automatisch die Vorfahrtsregel für Taxonomie-Collections; wer sie ganz aus den Pfaden heraushalten will, setzt sie zusätzlich auf die Ausschlussliste. Das Produkt-Metafeld haben wir nur bei Produkten gesetzt, die in mehreren Taxonomie-Kategorien hängen.

Das Ergebnis:

• Unterkategorie-Seite: „Start, Zubehör, Mühlen, Handmühlen"
• Produktseite: „Start, Zubehör, Mühlen, Handmühlen, Handmühle Espresso Pro"
• Themen-Seite: „Start, Geschenkideen", eine Ebene, mehr braucht sie nicht

Die Snippets selbst waren in einer halben Stunde drin. Die eigentliche Arbeit war die Entscheidung davor: Welche Collections sind Struktur, welche sind Thema? Ist das einmal beantwortet, ist die Metafeld-Pflege nur noch Fleißarbeit.

Noch eine Geschmacksfrage: der Produktname am Ende. Das Snippet schließt den Pfad auf Produktseiten mit dem Produkttitel ab. Ich bin da ehrlich: Bei langen Produktnamen lasse ich ihn gern weg. Nur der Pfad wirkt aufgeräumter und bricht mobil nicht in die dritte Zeile. Wenn du das auch so hältst, lösch im Nav-Teil des Snippets die beiden Zeilen nach dem Collection-Link im product-Zweig, also den Trenner-Span und den Span mit {{ product.title }}. Das BreadcrumbList-Markup lässt du dabei komplett stehen: Es beschreibt weiterhin die Position der Seite, und Google blendet die letzte Ebene in den Suchergebnissen ohnehin aus.

Würde ein Shopify-Dev das genauso bauen?

Ja, im Kern schon. Collection-Hierarchie über ein Collection-Referenz-Metafeld ist seit Jahren der Standard in der Shopify-Entwicklung, weil die Plattform lange keine native Verschachtelung kannte. Drei Varianten wirst du in Agentur-Setups trotzdem antreffen, und alle drei sind legitime Abwägungen, kein Widerspruch zu diesem Setup:

1. Ausschlussliste als Metafeld statt im Code: Statt der Handle-Liste im Snippet pflegen manche Teams ein Ja/Nein-Metafeld „von Breadcrumbs ausschließen" direkt an der Collection oder legen die Liste in ein Section-Setting. Das lohnt sich, wenn Redakteure ohne Code-Zugriff arbeiten und ständig neue Aktions-Collections entstehen. Für den Start reicht die Liste im Snippet, umziehen kannst du später immer.
2. Section statt Snippet: Als Section mit Schema-Settings lassen sich Trennzeichen oder der Produktname per Customizer umschalten, ohne Code anzufassen. Mehr Komfort, mehr Code, mehr Pflege. Sinnvoll, wenn mehrere Leute am Shop schrauben; für die meisten Shops ist das Snippet die schlankere Wahl.
3. Breadcrumbs aus dem Hauptmenü: Der alte Alternativweg leitet die Hierarchie aus der Navigation ab (linklists). Klingt elegant, bricht aber in der Praxis: Das Menü ist Marketing-Struktur, nicht Taxonomie. Bei Mega-Menüs, saisonalen Menüpunkten oder mehreren Navigationen wird aus der Ableitung Raterei. Metafelder sind explizit und eindeutig, deshalb setzt dieses Setup auf sie.

Validieren

• Öffne eine Collection- und eine Produktseite im Google Rich Results Test. Erwartung: BreadcrumbList wird erkannt, ohne Fehler.
• Prüfe das ItemList-Markup im Schema.org Validator.
• Klicke die Breadcrumbs einmal durch: Jeder Link muss auf eine kanonische URL führen, keine /collections/-Produktpfade.
• Beobachte in der Search Console unter Verbesserungen, ob die Breadcrumb-Berichte nach einigen Tagen Seiten aufnehmen.

Häufige Fragen zu Breadcrumbs und ItemList