Wichtigste Erkenntnisse
- Die schnellste Methode: Füge ein Kategoriebild unter Produkte > Kategorien hinzu – die meisten Themes zeigen es als Banner an.
- Für einen Custom Header auf allen Kategorie-Seiten nutzt du am besten den Theme-Editor > Kategorie-Template.
- Für individuelle Banner pro Kategorie kannst du Metafields nutzen, um spezifische Bilder zu hinterlegen.
- Ein Banner mit dem Kategorie-Titel und einer Beschreibung verbessert die SEO und die Seitenqualität.
Ein Banner oben auf einer Kategorie-Seite gibt den visuellen Ton an, kommuniziert die Kategorie klar 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 Shopify Storefronts erstellt und angepasst. Wir haben außerdem Fudge entwickelt – einen KI-Storefront-Editor mit einer 4.9-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 Kollektions-Metafields. Erstelle eine Metafield-Definition vom Typ 'Datei' für Kollektionen, lade für jede Kollektion ein individuelles Bild hoch und verknüpfe dieses Metafield dann als dynamische Quelle für einen Bildbanner-Abschnitt im Kollektions-Template. Wenn dein Theme diese Verknüpfung nicht richtig unterstützt, beschreibe Fudge einfach, was du möchtest ("Lies das Banner-Bild aus einem Metafield pro Kollektion, mit Fallback auf das Kollektionsbild") und es baut den Abschnitt direkt verknüpft mit deinem Metafield.
Ein Querformat mit einem Seitenverhältnis von 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 bessere Performance wenn möglich unter 200 KB und platziere das Hauptmotiv in den mittleren 50-60 % des Bildes, damit es beim mobilen Zuschnitt nicht abgeschnitten wird.
Nein. Jedes Shopify-Theme unterstützt von Haus aus ein Kollektionsbild, und bei Online Store 2.0 Themes kannst du einen Bildbanner-Abschnitt direkt im Theme-Editor hinzufügen. Apps werden nur benötigt, wenn dein Theme älter ist oder du Layout-Features möchtest, die es nicht unterstützt.
Einige Themes zeigen das Kollektionsbild gar nicht an oder nur auf der Kollektionskarte auf Übersichtsseiten. Öffne das Kollektions-Template im Theme-Editor und suche nach einem Abschnitt mit dem Namen "Kollektionsbanner" oder "Beitragsbild" – wenn er nicht da ist, rendert das Theme das Bild standardmäßig nicht als Header.
Ja. Öffne das Kollektions-Template im Theme-Editor, füge einen Bildbanner-Abschnitt hinzu und konfiguriere das Bild. Da die Änderung am Template vorgenommen wird, zeigt jede Kollektion, die dieses Template verwendet, dasselbe Banner an. Nutze Metafields (Methode 3), wenn du individuelle Banner pro Kollektion möchtest.
