Wichtige Erkenntnisse
- Die schnellste Methode: Legen Sie ein Kategoriebild unter Produkte > Kategorien fest – die meisten Themes zeigen dies als Banner an.
- Für einen benutzerdefinierten Header-Bereich auf allen Kategorieseiten nutzen Sie den Theme-Editor > Kategorie-Template.
- Für individuelle Banner pro Kategorie verwenden Sie Metafelder, um pro Kategorie eigene Bilder zu speichern.
- Ein Banner mit Kategorietitel und Beschreibung verbessert SEO und Seitenqualität.
Ein Banner am Anfang einer Kategorieseite gibt den visuellen Ton an, kommuniziert die Kategorie klar und bietet Platz für keyword-reichen Content. So fügen Sie eines hinzu.
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 Collection-Metafields. Erstelle eine Metafield-Definition vom Typ 'Datei' für Collections, lade ein einzigartiges Bild pro Collection hoch und verknüpfe dieses Metafield dann als dynamische Quelle für einen Bild-Banner-Abschnitt (Image Banner) im Collection-Template. Wenn dein Theme diese Verknüpfung nicht sauber anbietet, beschreibe Fudge einfach, was du möchtest ("Lese das Banner-Bild aus einem Metafield pro Collection, mit dem Collection-Bild als Fallback"), und es erstellt den Abschnitt, der direkt mit deinem Metafield verbunden ist.
Ein Querformat im Verhältnis 3:1 oder 4:1 funktioniert gut, bei einer Breite von etwa 2000-2800px, damit es auch auf großen Bildschirmen scharf bleibt. Halte die Dateigröße für eine bessere Performance wenn möglich unter 200 KB und platziere das Hauptmotiv in den mittleren 50-60 % des Bildes, damit es beim automatischen Zuschnitt (Cropping) auf Mobilgeräten nicht abgeschnitten wird.
Nein. Jedes Shopify-Theme unterstützt standardmäßig ein Collection-Bild, und bei 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 Collection-Bild gar nicht an oder nur auf den Collection-Karten auf Übersichtsseiten. Öffne das Collection-Template im Theme-Editor und suche nach einem Abschnitt namens „Collection-Banner“ oder „Featured Image“ – wenn er nicht da ist, rendert das Theme das Bild standardmäßig nicht als Header.
Ja. Öffne das Collection-Template im Theme-Editor, füge einen Bild-Banner-Abschnitt hinzu und konfiguriere das Bild. Da die Änderung am Template vorgenommen wird, zeigt jede Collection, die dieses Template verwendet, dasselbe Banner an. Nutze Metafields (Methode 3), wenn du für jede Collection ein individuelles Banner möchtest.
