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-Kategorie hat ein optionales Feld für das Kategoriebild. Die meisten Themes zeigen dieses Bild als Banner im oberen Bereich der Kategorieseite an.
Schritt 1. Gehen Sie zu Produkte > Kategorien.
Schritt 2. Klicken Sie auf die Kategorie, der Sie ein Banner hinzufügen möchten.
Schritt 3. Klicken Sie im Bereich Kategoriebild (meistens auf der rechten Seite des Editors) auf Bild hinzufügen und laden Sie Ihr Bannerbild hoch.
Schritt 4. Speichern.
Das Bild wird nun oben auf dieser Kategorieseite angezeigt. Das genaue Layout (volle Breite, zentriert, mit Text-Overlay) hängt von Ihrem Theme ab.
Diese Methode legt ein Banner pro Kategorie fest, ohne dass Code erforderlich ist. Der Nachteil ist die eingeschränkte Kontrolle über das Layout – Sie sind darauf angewiesen, wie das Theme das Kategoriebild standardmäßig darstellt.
Methode 2 – Einen Header-Bereich über den Theme-Editor hinzufügen
Für mehr Kontrolle über das Banner-Layout können Sie über den Theme-Editor direkt einen Abschnitt zum Kategorieseiten-Template hinzufügen.
Schritt 1. Gehen Sie zu Onlineshop > Themes > Anpassen.
Schritt 2. Navigieren Sie über die Seitenauswahl oben zu einer Kategorieseite.
Schritt 3. Suchen Sie in der linken Seitenleiste nach den Abschnitten oberhalb des Produktrasters. Klicken Sie auf Abschnitt hinzufügen und wählen Sie ein Bild-Banner, Hero oder einen Text-Abschnitt.
Schritt 4. Konfigurieren Sie das Bild und den Inhalt in den Abschnittseinstellungen.
Schritt 5. Speichern.
Wichtige Einschränkung: Wenn Sie einen Abschnitt über den Theme-Editor im Kategorie-Template hinzufügen, wird dieser auf all allen Kategorieseiten angezeigt, die dieses Template verwenden. Wenn Sie ein individuelles Banner pro Kategorie wünschen, nutzen Sie Methode 3.
Methode 3 – Individuelle Banner pro Kategorie mittels Metafeldern
Um auf jeder Kategorieseite ein anderes Bannerbild anzuzeigen, müssen Sie Kategorie-Metafelder verwenden.
Schritt 1. Gehen Sie im Shopify-Adminbereich zu Einstellungen > Eigene Daten > Kategorien > Definition hinzufügen.
Schritt 2. Erstellen Sie eine neue Metafeld-Definition: Geben Sie ihr einen Namen wie „Bannerbild“ und setzen Sie den Typ auf Datei (Bilder).
Schritt 3. Gehen Sie zurück zu Ihrer Kategorie (Produkte > Kategorien > Kategorie auswählen) und füllen Sie das neue Bannerbild-Metafeld aus.
Schritt 4. Fügen Sie im Theme-Editor einen Bild-Banner-Abschnitt zum Kategorie-Template hinzu. Klicken Sie im Bildfeld auf Dynamische Quelle verbinden und verknüpfen Sie es mit Ihrem Metafeld.
Schritt 5. Speichern.
Jetzt kann jede Kategorie ihr eigenes, individuelles Bannerbild haben, das im Metafeld gespeichert ist. Sie aktualisieren diese im Kategorie-Editor, nicht im Theme-Editor.
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 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.“
