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.

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.

Du möchtest ein individuelles Banner-Layout für Kollektionen? Beschreibe es Fudge.

Try Fudge for Free

Ein verwandter Ansatz findet sich unter Hero-Bild in Shopify ändern.

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 %).

Das Kategoriebild (das als Banner angezeigt wird) unterscheidet sich von einem vollflächigen Hero-Bereich mit Text-Overlay. Wenn Sie einen wirkungsvollen Header im Hero-Stil auf Kategorieseiten mit eingeblendeter Überschrift, CTA-Button und formatiertem Text wünschen – das wird normalerweise über einen benutzerdefinierten Abschnitt oder ein Template gelöst, nicht über das einfache Feld für das Kategoriebild.

Beschreiben Sie es Fudge: „Füge einen vollflächigen Hero-Banner zu Kategorieseiten hinzu, bei dem der Kategorietitel über dem Bild liegt. Beziehe das Bannerbild aus einem Kategorie-Metafeld.“