Moderne Themes | Alte Themes

Installation in älteren (1.0) Themes

Nur für ältere Themes stellt diese App eine Reihe von Embeds bereit - jeweils ein kleines Code-Stück, das Sie in Ihr Theme einbauen müssen, um die Kategorien anzuzeigen. 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.

Schritt-für-Schritt-Anleitung

  • Ö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' %}

  • Zeigen Sie Unterkategorien-Icons auf Ihren Kollektionsseiten an:

      {% include 'uncomplicated.categories.caticons' %}

Sie können das Verhalten der Kategorienliste anpassen - insbesondere welche Unterkategorien beim Klick auf eine Elternkategorie erscheinen. Siehe „Andere Möglichkeiten, die Kategorienliste anzuzeigen” weiter unten.

Weitere Videos zur Einrichtung

Aus unserem YouTube-Kanal:

Embed-Typen

Dies ist die vollständige Liste der für Vintage- oder Legacy-Themes verfügbaren Embed-Typen. Beachten Sie, dass nicht alle Themes alle Embed-Typen unterstützen:

Kategoriebasierte Breadcrumb:

{% include 'uncomplicated.categories.catbread' %}

„Springe zu”-Auswahlfeld:

{% include 'uncomplicated.categories.catselect' %}

Vollständige Kategorienliste, mit Markierung der aktuellen, Eltern- und Geschwister-Kategorie:

{% include 'uncomplicated.categories.catlist' %}

Unterkategorien-Icons:

{% include 'uncomplicated.categories.caticons' %}

Andere Möglichkeiten, die Kategorienliste anzuzeigen

Probieren Sie diese verschiedenen Embeds aus, um das Rendering und Verhalten Ihrer Kategorienliste zu steuern.

Beispiel-Embeds

{% include 'uncomplicated.categories.catlist', show_class:'show-pathback' %} (Dies ist der Standard)
{% include 'uncomplicated.categories.catlist', show_class:'show-pathdirect' %}
{% include 'uncomplicated.categories.catlist', show_class:'show-all' %}
{% include 'uncomplicated.categories.catlist', show_class:'show-activedown' %}
{% include 'uncomplicated.categories.catlist', show_class:'show-activedowndirect' %}
{% include 'uncomplicated.categories.catlist', show_class:'show-activeupdown' %}
{% include 'uncomplicated.categories.catlist', show_class:'show-activeupdowndirect' %}
{% include 'uncomplicated.categories.catlist', show_class:'show-peersactiveup' %}
{% include 'uncomplicated.categories.catlist', show_class:'show-peersactivedown' %}
{% include 'uncomplicated.categories.catlist', show_class:'show-peersactivedowndirect' %}
{% include 'uncomplicated.categories.catlist', show_class:'show-down' %}

Optionale Erweiterungen für die Kategorienliste

Leere Kategorien entfernen (ohne Produkte und ohne Unterkategorien):

{% include 'uncomplicated.categories.catlist', show_class:'show-pathback show-hide-catpc-zero' %}

Produktanzahlen ausblenden, die hinter jeder Kategorie erscheinen, z. B. (42):

{% include 'uncomplicated.categories.catlist', show_class:'show-pathback show-nopc' %}

Andere Möglichkeiten, die Kategorie-Icons anzuzeigen

Sie können die Anzahl der Spalten an Icons auf der Seite festlegen (8, 5, 4, 3, 2 oder 1). Ebenso können Sie unterschiedliche Spaltenzahlen für verschiedene Bildschirmbreiten (groß, mittel, klein) wählen, da Ihre Kundschaft Ihren Shop möglicherweise auf Desktop, Tablet oder Mobilgerät besucht.

Die Anwendung dieser Klassen lässt sich am besten an Beispielen zeigen. Die folgenden Beispiele entsprechen dem Standard, lassen sich aber an Ihre Bedürfnisse anpassen.

So zeigen Sie die Icons 4-spaltig auf großen, breiten Bildschirmen (>1024px), 3-spaltig auf mittleren Bildschirmen (>640px) und 2-spaltig auf schmaleren Bildschirmen:

{% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up' %}

So zeigen Sie die Icons 8-spaltig auf großen, breiten Bildschirmen (>1024px), 5-spaltig auf mittleren Bildschirmen (>640px) und 1-spaltig auf schmaleren Bildschirmen:

{% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-8up show-medium-5up show-small-1up' %}

Optionale Erweiterungen für die Kategorie-Icons

Leere Kategorien entfernen (ohne Produkte)

{% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up show-onlyifpc' %}

Kategorien ohne eigenes Kollektionsbild entfernen

{% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up show-onlyifimage' %}

Produktanzahlen ausblenden, die hinter jeder Kategorie erscheinen, z. B. (42)

{% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up show-nopc' %}

Aussehen Ihrer Breadcrumb für 1.0-Themes 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.

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: 
      {% raw %}{% 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:

{% raw %}{% 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 
      {% raw %}{% 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" %}

Teile der Breadcrumb übersetzen

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

Beispiel für eine angepasste Breadcrumb

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 %}