Die wichtigsten Erkenntnisse
- Die schnellste Methode: Lege unter Produkte > Kategorien ein Kategorie-Bild fest – die meisten Themes zeigen es als Banner an.
- Um einen individuellen Header-Bereich auf allen Kategorie-Seiten zu haben, nutze den Theme-Editor > Kategorie-Vorlage.
- Für einzigartige Banner pro Kategorie, nutze Kategorie-Metafelder, um Bilder für jede einzelne Kategorie zu speichern.
- Ein Banner mit dem Titel und der Beschreibung der Kategorie verbessert das SEO und die Seitenqualität.
Ein Banner ganz oben auf einer Kategorie-Seite setzt den optischen Rahmen, kommuniziert die Kategorie eindeutig und bietet Platz für keyword-reichen Text. Hier erfährst du, wie du eines hinzufügst.
Warum Sie uns vertrauen können
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Bewertung im Shopify App Store.
Methode 1 – Ein Kategoriebild festlegen (am einfachsten)
Jede Shopify-Kollektion verfügt über ein optionales Feld für ein Kollektionsbild. Die meisten Themes zeigen dieses Bild als Banner oben auf der Kollektionsseite an.
Schritt 1. Gehe zu Produkte > Kollektionen.
Schritt 2. Klicke auf die Kollektion, der du ein Banner hinzufügen möchtest.
Schritt 3. Klicke im Bereich Kollektionsbild (normalerweise auf der rechten Seite des Editors) auf Bild hinzufügen und lade dein Banner-Bild hoch.
Schritt 4. Speichern.
Das Bild wird nun oben auf dieser Kollektionsseite angezeigt. Das genaue Layout (volle Breite, zentriert, mit Textüberlagerung) hängt von deinem Theme ab.
Diese Methode setzt ein Banner pro Kollektion, ohne dass Code erforderlich ist. Der Nachteil ist die begrenzte Kontrolle über das Layout – du bist auf das angewiesen, was das Theme standardmäßig mit dem Kollektionsbild macht.
Verwandtes Thema: Alt-Text für Bilder in Shopify hinzufügen.
Verwandtes Thema: Eine Kollektionsseite in Shopify anpassen.
Methode 2 – Einen Header-Bereich über den Theme-Editor hinzufügen
Für mehr Kontrolle über das Banner-Layout kannst du über den Theme-Editor direkt ein Abschnitt zum Vorlagen-Template für Kollektionen hinzufügen.
Verwandtes Thema: Fudge Store Editor.
Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.
Schritt 2. Navigiere über die Seitenauswahl oben zu einer Kollektionsseite.
Schritt 3. Suche in der linken Seitenleiste nach den Abschnitten über dem Produktraster. Klicke auf Abschnitt hinzufügen und wähle ein Bildbanner, Hero-Bild oder einen Textabschnitt aus.
Schritt 4. Konfiguriere das Bild und den Inhalt in den Abschnitteinstellungen.
Schritt 5. Speichern.
Wichtige Einschränkung: Wenn du einen Abschnitt über den Theme-Editor zur Kollektionsvorlage hinzufügst, wird dieser auf allen Kollektionsseiten angezeigt, die diese Vorlage verwenden. Wenn du ein einzigartiges Banner pro Kollektion möchtest, verwende Methode 3.
Methode 3 – Individuelle Banner pro Kategorie mittels Metafeldern
Um auf jeder Kollektionsseite ein anderes Banner-Bild anzuzeigen, musst du Kollektions-Metafelder verwenden.
Schritt 1. Gehe in der Shopify-Verwaltung zu Einstellungen > Benutzerdefinierte Daten > Kollektionen > Definition hinzufügen.
Schritt 2. Erstelle eine neue Metafeld-Definition: Gib ihr einen Namen wie „Banner-Bild“ und setze den Typ auf Datei (Bilder).
Schritt 3. Gehe zurück zu deiner Kollektion (Produkte > Kollektionen > Kollektion auswählen) und fülle das neue Metafeld für das Banner-Bild aus.
Schritt 4. Füge im Theme-Editor einen Bildbanner-Abschnitt zur Kollektionsvorlage hinzu. Klicke im Bildfeld auf Dynamische Quelle verbinden und verknüpfe es mit deinem Metafeld.
Schritt 5. Speichern.
Jetzt kann jede Kollektion ihr eigenes, einzigartiges Banner-Bild haben, das im Metafeld gespeichert ist. Du aktualisierst diese im Kollektions-Editor, nicht im Theme-Editor.
Ein verwandter Ansatz findet sich unter Hero-Bild in Shopify ändern.
Design-Tipps für Kategorie-Banner
Integrieren Sie den Kategorienamen im Bannertext. Das hilft bei der SEO und bestätigt Kunden, dass sie am richtigen Ort gelandet sind.
Nutzen Sie die Beschreibung Ihrer Kategorie. Eine Beschreibung von 1–2 Sätzen unter dem Titel bietet Kontext und liefert Google crawlbarer Text mit relevanten Keywords.
Einheitliche Dimensionen. Wenn Sie Banner für mehrere Kategorien erstellen, verwenden Sie dasselbe Seitenverhältnis, damit Ihre Seiten konsistent aussehen. Ein breites Querformat von 3:1 oder 4:1 ist für Kategorie-Banner üblich.
Mobile Ansicht. Breite Querformat-Banner werden auf dem Handy oft auf die Mitte zugeschnitten. Stellen Sie sicher, dass Ihr wichtigstes visuelles Element und Ihr Text in der „Safe Zone“ des Bildes liegen (die mittleren 50–60 %).
Kategorie-Banner vs. Hero-Image
Das Collection-Bild (das als Banner angezeigt wird) ist etwas anderes als ein Full-Bleed-Hero mit Text-Overlay. Wenn du einen eindrucksvollen Hero-Style-Header auf deinen Collection-Seiten haben möchtest – mit Overlay-Überschrift, CTA-Button und gestyltem Text –, wird das normalerweise über einen benutzerdefinierten Abschnitt (Custom Section) oder ein Template gemacht, nicht über das normale Feld für das Collection-Bild.
Beschreibe es Fudge: “Füge einen Full-Width Hero-Banner zu den Collection-Seiten hinzu, bei dem der Collection-Titel über dem Bild liegt. Ziehe das Banner-Bild aus einem Collection-Metafield.”
FAQ
Ja, mit Kategorie-Metafeldern. Erstelle eine Metafeld-Definition vom Typ 'Datei' für Kategorien, lade ein einzigartiges Bild pro Kategorie hoch und verbinde dieses Metafeld als dynamische Quelle für einen Bild-Banner-Abschnitt in der Kategorie-Vorlage. Wenn dein Theme diese Verknüpfung nicht sauber anbietet, beschreibe Fudge, was du möchtest ("Lies das Banner-Bild aus einem Metafeld pro Kategorie aus, mit einem Fallback zum Kategorie-Bild"), und es erstellt den mit deinem Metafeld verknüpften Abschnitt.
Ein Querformat im Verhältnis 3:1 oder 4:1 funktioniert gut, bei einer Breite von etwa 2000-2800px, damit es auf großen Bildschirmen scharf bleibt. Halte die Dateigröße für eine gute Performance möglichst unter 200KB und platziere das wichtigste visuelle Element in den mittleren 50-60% des Rahmens, damit es beim Zuschneiden auf Mobilgeräten nicht abgeschnitten wird.
Nein. Jedes Shopify-Theme unterstützt standardmäßig ein Kategorie-Bild, und mit Online Store 2.0-Themes kannst du direkt im Theme-Editor einen Bild-Banner-Abschnitt hinzufügen. Apps werden nur benötigt, wenn dein Theme älter ist oder du Layout-Funktionen möchtest, die es nicht unterstützt.
Einige Themes zeigen das Kategorie-Bild gar nicht an, oder nur auf der Kategorie-Karte auf Übersichtsseiten. Öffne die Kategorie-Vorlage im Theme-Editor und suche nach einem Abschnitt mit dem Namen "Kategoriebanner" oder "Featured image" – wenn er nicht da ist, rendert das Theme das Bild nicht standardmäßig als Header.
Ja. Öffne die Kategorie-Vorlage im Theme-Editor, füge einen Bild-Banner-Abschnitt hinzu und konfiguriere das Bild. Da die Änderung an der Vorlage vorgenommen wird, zeigt jede Kategorie, die diese Vorlage verwendet, dasselbe Banner an. Nutze Metafelder (Methode 3), wenn du individuelle Banner pro Kategorie möchtest.
