Alte Themes

Moderne Themes | Alte Themes

Installation in älteren (1.0) Vintage-Themes

Nur für ältere Themes stellt diese App einen Embed bereit — ein kleines Code-Stück, das Sie in Ihr Theme einbauen müssen, um die Breadcrumb zu implementieren. Etwas Programmiererfahrung ist nötig.

Sichern Sie Ihr Theme, bevor Sie Änderungen daran vornehmen.

Wenn Sie mit Programmierung nicht vertraut sind, empfehle ich dringend, Legacy- oder Vintage-1.0-Themes zu vermeiden und bei den Standard-2.0-Themes zu bleiben, die den Shopify-Theme-Editor erlauben.

Legacy-Themes basieren auf .liquid-Dateien und sind alle unterschiedlich aufgebaut. Dieses Video zeigt, wie der Embed in das alte 1.0-Standard-Theme eingebaut wird, Ihr Theme ist jedoch nicht zwingend identisch organisiert.</p>

Öffnen Sie Ihr aktuelles Theme im Shopify-Theme-Editor.
Wählen Sie die passende Liquid-Datei für Ihr Theme — manchmal collection.liquid — zum Bearbeiten aus.
Ersetzen Sie die bestehende Breadcrumb durch diesen kategoriebewussten Breadcrumb-Embed-Code:
```
  {% include 'uncomplicated.categories.catbread' %}
```

Weitere Videos zur Einrichtung

Aus unserem YouTube-Kanal:

Wie man vollständige Kategorie-Breadcrumbs auf Shopify-Produktseiten anzeigt
[2-Minuten-Video]

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.

Sie können die Stile Ihres Themes überschreiben, indem Sie CSS in eine der .scss- oder .css-Dateien Ihres Themes einfügen. Bitte ändern Sie nicht die uncomplicated…css-Dateien — sie werden dynamisch neu erzeugt.

Wenn Sie etwa den Abstand zwischen den Trennern („>”) anpassen möchten, können Sie folgendes CSS zu Ihrem Theme hinzufügen:

span.breadcrumb__sep {
    margin-left: 0.3em;
    margin-right: 0.3em;
}

Vorübergehend deaktivieren oder deinstallieren

Wenn Sie das Menü vorübergehend deaktivieren möchten, können Sie den Embed aus dem Liquid Ihres Themes entfernen. Schneiden Sie einfach den zuvor eingefügten Liquid-Code aus.

Alternativ können Sie ihn mit Liquid-Kommentaren auskommentieren.

Titellänge auf Produktseiten reduzieren

Manchmal ist der Produkttitel sehr lang, was die Breadcrumb unhandlich wirken lassen kann. Sie können steuern, wie der Produkttitel gekürzt wird (also wann die Zeichen mit einer Auslassung „…” abgeschnitten werden), über eine optionale Variable im Embed, den Sie in Ihr Theme einfügen.

Standardmäßig wird der Produkttitel in der Breadcrumb nach 28 Zeichen mit ... gekürzt.
Um nach einer anderen Anzahl Zeichen zu kürzen, setzen Sie truncate_limit auf einen anderen Ganzzahlwert, z. B. 40 Zeichen.
```
  {% include 'uncomplicated.categories.catbread', truncate_limit: 40 %}
```
Um die Kürzung ganz zu deaktivieren und den vollen Produkttitel anzuzeigen, setzen Sie truncate_limit auf -1. Zum Beispiel:
```
  {% include 'uncomplicated.categories.catbread', truncate_limit: -1 %}
```

Suchmaschinenoptimierung mit JSON-LD

Spezielle Markup-Daten werden eingefügt, damit Suchmaschinen die Struktur Ihrer Kategorien verstehen. Dieser Artikel von Google erklärt das ausführlicher.

In sehr seltenen Fällen möchten Sie diese JSON-LD-Metadaten möglicherweise von einer anderen App erzeugen und verwalten lassen. Sie können das Hinzufügen von JSON-LD über das disable_jsonld-Flag deaktivieren, zum Beispiel:

{% include 'uncomplicated.categories.catbread', disable_jsonld:true %}

Wenn Sie mehrere Kategorie-Embeds verwenden (etwa die Kategorienliste), stellen Sie bitte sicher, dass Sie dieses disable_jsonld-Flag bei allen ergänzen.

„Alle Produkte” aus Nicht-Kollektions-Breadcrumbs entfernen

Der Eintrag „Alle Produkte” erscheint bei einigen Produkten in Breadcrumbs außerhalb von Kollektionen. Am besten entfernen Sie ihn, indem Sie sicherstellen, dass alle Ihre Produkte in Kollektionen aus Ihrer Kategoriehierarchie liegen.

Es ist immer besser, kollektionsbasierte URLs zu verwenden (siehe oben), Sie können die Breadcrumb aber auch per CSS anpassen.

Wenn Sie den Eintrag „Alle Produkte” ausblenden möchten, fügen Sie folgendes CSS in eine Theme-Datei ein (nicht in uncomplicated…css):

a[title="All Products"], span#uncomplicated-category-breadcrumb-top-separator.breadcrumb__allproducts {
    display: none;
}

Vermutungen für Nicht-Kollektions-Breadcrumbs in 1.0-Themes steuern

In modernen (2.0) Themes wird die Vermutung für Nicht-Kollektions-Breadcrumbs über die Einstellungen gesteuert (siehe „Breadcrumbs auf Produktseiten anzeigen” auf der Haupt-Hilfeseite).

Die folgenden Hinweise gelten ausschließlich für ältere 1.0-Themes und auch dort nur für solche, die Kurz-URLs verwenden (nicht empfohlen).

Für jedes Produkt stellt Shopify eine ungeordnete Liste von Kollektionen bereit, in denen es enthalten ist. Diese App kann die Reihenfolge der Liste nicht beeinflussen und verwendet standardmäßig den ersten Eintrag als Basis für die Breadcrumb. Mit einem Flag im Embed-Code können Sie wählen:

‘first’: die erste mögliche Breadcrumb aus der Liste (Standard)

‘last’: die letzte mögliche Breadcrumb aus der Liste

  {% include 'uncomplicated.categories.catbread', prod_multicat_sel:"last" %}

‘generic’: eine generische Breadcrumb der Form Startseite > Alle Produkte > Produktname erstellen

  {% include 'uncomplicated.categories.catbread', prod_multicat_sel:"generic", text_catall:"Alle meine Produkte", link_catall:"/collections/all" %}

Auch hier sind 2.0-Themes die bessere Wahl, weil die automatisierte Übersetzung über „Translate & Adapt” von Shopify integriert ist.

Bei älteren Themes besteht die Breadcrumb hauptsächlich aus Produktnamen, die Sie über den Shopify-Produktkatalog steuern, mit zwei Ausnahmen:

Die Wurzel der Breadcrumb (standardmäßig „Startseite”), konfigurierbar mit:
- text_catroot — der angezeigte Text an der Wurzel
- link_catroot — das Linkziel, wenn Nutzer auf die Wurzel klicken
Die erste und einzige Breadcrumb (standardmäßig „Alle Produkte”), konfigurierbar mit:
- text_catall — der Text, der angezeigt wird, wenn keine Kollektion in der URL enthalten ist
- link_catall — das Linkziel, wenn Nutzer auf die erste Breadcrumb klicken

Ein stark angepasster Breadcrumb-Embed kann zum Beispiel so aussehen:

{% include 'uncomplicated.categories.catbread', text_catroot:"Start", link_catroot:"/collections/all", text_catall:"Meine Produkte", link_catall:"/collections/all" %}

Wenn Sie einen Teil der Breadcrumb ausblenden möchten, können Sie ihn mit display:none per CSS deaktivieren.

Optional können Sie die letzte Breadcrumb als reinen Text statt als Link auf die aktuelle Seite anzeigen lassen. Um die letzte Breadcrumb ohne Link anzuzeigen, ergänzen Sie show_finalbread_as_textonly in der Embed-Argumentliste:

{% include 'uncomplicated.categories.catbread', show_finalbread_as_textonly: true %}