Moderne Themes | Alte Themes

Häufig gestellte Fragen

Was macht Breadcrumbs Uncomplicated?

Die App zeigt Ihrer Kundschaft auf Kollektions- und Produktseiten vollständige kategoriebasierte Breadcrumbs an, damit sie immer wissen, wo sie sich in Ihrem Shop befinden. Die Breadcrumbs werden aus den standardmäßigen Shopify-Navigationsmenüs aufgebaut, die Sie ohnehin pflegen.

Ist Breadcrumbs Uncomplicated gut für SEO?

Ja. Zusätzlich zur sichtbaren Breadcrumb fügt die App den Kollektions- und Produktseiten strukturiertes BreadcrumbList-JSON-LD hinzu, damit Suchmaschinen verstehen, wie Ihr Shop aufgebaut ist, und Breadcrumb-Pfade in den Ergebnissen anzeigen können.

Woher kommen die Breadcrumbs — muss ich eine neue Struktur aufbauen?

Nein. Die App liest Ihre bestehenden Standard-Menüs von Shopify. Es gibt keinen separaten Kategoriebaum, der gepflegt oder synchronisiert werden müsste — ändern Sie Ihre Menüs, und die Breadcrumbs folgen automatisch.

Funktioniert sie sowohl auf Produkt- als auch auf Kollektionsseiten?

Ja, auf beiden. Auf Produktseiten verwendet sie lange URL-Formen (/collections/.../products/...) und unterstützt kurze URL-Formen über ein Metafield, wenn Ihr Theme diese erzeugt.

Welche Themes werden unterstützt?

Alle modernen Online-Store-2.0-Themes per Drag-and-Drop im Shopify-Theme-Editor. Ältere 1.0-Themes („Vintage”) werden über ein Embed unterstützt — siehe den Leitfaden Alte Themes.

Ist sie mehrsprachig?

Ja — Englisch, Spanisch, Deutsch und Französisch, gemäß den Sprachen Ihres Shops über Shopify Translate & Adapt.

Wie viel kostet sie?

5 $/Monat mit 10-tägiger kostenloser Testphase. Dieselben Breadcrumbs sind auch in Categories Uncomplicated enthalten, das einen kostenlosen Plan für bis zu 10 Kategorien bietet.

Erste Schritte

Damit Sie das Beste aus Category Breadcrumbs herausholen können, müssen Sie zunächst Ihren Shop mit Produkten, Kollektionen und Menüs einrichten. Dieses Video führt Sie durch den Prozess, einschließlich der Einrichtung der Menüpunkte, die Ihre Kategorien bilden.

Category Breadcrumbs installieren

Diese App nutzt den Shopify-Theme-Editor, damit Sie volle Kontrolle über Aussehen und Position der Breadcrumb haben. Dieses Video macht den Ablauf einfach:

  1. Öffnen Sie Ihr aktuelles Theme im Shopify-Theme-Editor.
  2. Wählen Sie „Standard-Kollektion” im Template-Auswahlmenü.
  3. Platzieren Sie den Category-Breadcrumbs-Block (Embed) per Theme-Editor in Ihr Theme.
  4. Wiederholen Sie den Vorgang optional für „Standard-Produkt”.

Deinstallation

Shopify übernimmt die gesamte Abrechnung. Um Ihr Abo zu kündigen, müssen Sie die App lediglich über die Shopify-Verwaltungsoberfläche deinstallieren. Weitere Informationen von Shopify dazu:

Apps deinstallieren

Nach der Deinstallation berechnet Ihnen Shopify nur, was Sie bereits genutzt haben, danach fallen keine weiteren Kosten an. Wenn Sie vor Ablauf Ihrer kostenlosen Testphase deinstallieren, werden Sie überhaupt nicht belastet. Weitere Informationen darüber, wie Shopify abrechnet — etwa warum auch bei nur teilweiser Nutzung ganze Monate fakturiert werden — finden Sie hier:

Shopify-Abrechnungszyklus

Sie können Breadcrumbs auch auf Ihren Produktseiten anzeigen.

Da jedes Produkt zu mehreren Kollektionen gehören kann, brauchen wir eine Möglichkeit zu erkennen, in welcher Kollektion das Produkt erscheinen soll und welche Breadcrumb daher angezeigt wird.

Am besten geht das mit langen URLs:

  • Links der Form /collection/kollektionsname/product/produktname, wie dieser hier, zeigen die richtige Breadcrumb an.
  • Links ohne Kollektion oder Kurz-URLs wie dieser geben nicht an, in welcher Kollektion Sie sich befinden, und zwingen Shopify zum Raten.

Es gibt das unbelegte Gerücht, Kurz-URLs seien besser für SEO, weil sie doppelten Inhalt vermeiden — das löst man jedoch besser mit langen URLs und rel=”canonical”, wie Shopify in diesem Best-Practice-Beitrag empfiehlt.

Von Kollektionsseiten kommend

Die Links in Kollektionen werden von Ihrem Theme erzeugt. Wenn Sie also in einer Kollektion auf ein Produkt klicken und auf einer Produktseite mit Kurz-URL landen, wurde dieses Problem von Ihrem Theme verursacht.

Der beste Ort, das zu beheben, ist das Theme — Sie können jedoch den Kurz-URL-Fix in Ihrem Embed als schlechtere Alternative verwenden.

Er versucht so gut wie möglich, Kurz-URL-Links auf Kollektionsseiten zu erkennen und automatisch umzuschreiben. Dieses Video erklärt das:

Der Kurz-URL-Fix ist als Checkbox-Option für 2.0-Themes im Shopify-Theme-Editor unter den Category-Breadcrumb-Einstellungen auf der Standard-Kollektionsseite verfügbar.

Von anderen Seiten kommend, etwa der Shopify-Suche

Selbst mit diesem Fix können Sie auf Kurz-URLs landen, und auf diesen Seiten brauchen Sie eine Breadcrumb-Anzeige.

Standardmäßig stellt Shopify eine ungeordnete Liste von Kollektionen als Metafields bereit, mit der diese App die richtige Breadcrumb errät.

Hinweis: Bei Kurz-URLs kann ein Produkt nur eine Breadcrumb haben.

Meistens ist die Standard-Breadcrumb eines Produkts diejenige der spezifischsten Kollektion (Standardeinstellung). Sie können das Verhalten in den Category-Breadcrumb-Einstellungen auf der Standard-Produktseite ändern.

Das ist eine Vermutung — sie wird nicht immer die richtige Kollektion treffen, aber es ist eine Notlösung, wenn Ihr Theme keine langen URLs erzeugt.

Wenn Sie schließlich für bestimmte Produkte eine andere Standard-Eltern-Kollektion festlegen möchten — etwa wenn die Vermutung nicht passt — und Ihr Theme Kurz-URLs erzeugt, können Sie auf jedem Produkt eine eigene Produkt-Metafield für die Standard-Kollektions-Referenz (custom.default_collection_reference) anlegen, die auf eine einzelne Kollektion verweist:

Aussehen Ihrer Breadcrumb anpassen

Das Aussehen der Breadcrumb wird vollständig von Ihrem Theme gesteuert. Farben oder Stile können sich in verschiedenen Bereichen des Templates und zwischen Templates unterscheiden, werden aber alle vom aktuellen Theme bestimmt.

Am einfachsten ändern Sie diese Stile über die Category-Breadcrumb-Einstellungen im Shopify-Theme-Editor.

Wenn Sie mehr Kontrolle wollen, können Sie die Stile Ihres Themes und die Category-Breadcrumb-Einstellungen mit einem Custom-Liquid-Block überschreiben. Dieses Video erklärt das Vorgehen Schritt für Schritt:

Wenn Sie zum Beispiel die Schrift fett, schwarz und ohne Unterstreichung möchten, können Sie diesen Custom-Code verwenden:

<style>
    nav.category-breadcrumbs a {
        font-weight: bold;
        color: black;
        text-decoration: none;
    }
</style>

Shopify Menus unterstützt zwei Möglichkeiten, Menüpunkte unterhalb anderer Menüpunkte zu verschachteln:

  • Die Shopify-Menus-Administrationsoberfläche erlaubt es, eine Hierarchie von Menüpunkten anzulegen — jedoch nur bis zu 3 Ebenen tief.
  • Historisch wurden Menüs verschachtelt, indem ein Menüpunkt mit demselben Namen wie ein anderes Menü angelegt wurde. Diese Legacy-Verschachtelung wird weiterhin unterstützt.

Während die moderne Shopify-Menus-Administrationsoberfläche nur 3 Navigationsebenen unterstützt, können Sie mithilfe der Legacy-Verschachtelung weiterhin mehr als 3 Ebenen erstellen.

Es ist wichtig, doppelte Kategorienamen oder Kategorie-URLs zu vermeiden, besonders bei Legacy-Verschachtelung, weil Shopify nicht zwischen zwei Menüpunkten mit demselben Namen oder derselben URL unterscheiden kann. Dieses Video gibt eine vollständige Erklärung:

Produkte in Blattkategorien und übergeordneten Kategorien platzieren

Sie können Produkte sowohl in Blattkategorien (den spezifischsten) als auch in deren übergeordneten Kategorien erscheinen lassen. Allerdings ist Shopify so aufgebaut, dass Sie ihm explizit mitteilen müssen, wo jedes Produkt erscheinen soll. Das bedeutet, das Produkt einer Blatt-Kollektion UND ihren übergeordneten Kollektionen hinzuzufügen. Am besten gelingt das mit Tags, sodass:

  • Sie ein Produkt nur einmal taggen müssen
  • Jede Kollektion ihren Inhalt anhand einer immer breiteren Tag-Menge definiert

Jeder Link im Kategoriebaum kann nur zu einem Ziel führen. Jeder Link zeigt eine Kollektion an. Welche Produkte Sie in diese Kollektion legen, bestimmen Sie selbst — indem Sie Ihre Produkte auf mehrere Kollektionen verteilen, können Sie sie überall im Kategoriebaum erscheinen lassen.

Wenn Sie einen Kategoriebaum wie diesen haben — aus unserem Demo-Shop:

  • Technologie
    • Computer
      • Desktops

Sie könnten den Lenovo-Desktop-PC in nur eine einzige Kollektion legen, wie hier.

Alternativ könnten Sie ihn in die Desktops-Kollektion, die Computer-Kollektion und die Technologie-Kollektion legen. So habe ich es in meinem Demo-Shop nicht umgesetzt, aber es ist möglich.

Mit Tags Produkte in mehreren Kategorien automatisieren

Mithilfe von Tags können Sie den Lenovo-Desktop-PC mit „Desktop-PC” taggen und dann Kollektionen anlegen, die diesen Tag verwenden:

  • Technologie, Kollektions-Tags = [“Desktop-PC”, “Laptop-PC”, “Tablet”, “Server”, “Smartphone”, “Smartwatch”, “Drucker”…]
    • Computer, Kollektions-Tags = [“Desktop-PC”, “Laptop-PC”, “Tablet”, “Server”]
      • Desktops, Kollektions-Tags = [“Desktop-PC”]

Das ist völlig in Ordnung, lässt sich aber vereinfachen, indem Sie Produkte direkt mit dem Namen ihrer übergeordneten Kategorien taggen. Den Lenovo-Desktop-PC könnten Sie mit „Desktops”, „Computer” und „Technologie” taggen. Damit werden die Kollektions-Tags einfacher zu konfigurieren:

  • Technologie, Kollektions-Tags = [“Technologie”]
    • Computer, Kollektions-Tags = [“Computer”]
      • Desktops, Kollektions-Tags = [“Desktop-PC”]