Den Homepage-Banner in Shopify ändern (2026)

Wichtigste Erkenntnisse

Ändere dein Homepage-Banner im Theme-Editor: Onlineshop → Themes → Anpassen → Startseite → klicke auf den Banner-Abschnitt.

Du kannst das Bild, den Overlay-Text, den Button-Text, den Button-Link und das Farbschema ohne Code anpassen.

Bei Slideshow-Bannern ist jede Slide ein separater Block – bearbeite sie einzeln.

Video-Banner und animierte Abschnitte erfordern Code oder eine Shopify-App.

Dein Homepage-Banner ist der erste Eindruck deines Shops. Es für eine neue Kampagne, eine saisonale Aktion oder einen Marken-Refresh zu aktualisieren, ist eine Routineaufgabe im Theme-Editor.

Warum Sie uns vertrauen können

Jacques verfügt über mehr als 15 Jahre Erfahrung in der Shopify-Entwicklung. Wir haben Fudge entwickelt – einen KI-Storefront-Editor, der von Hunderten von Shopify-Stores genutzt wird und eine 5,0-Bewertung im Shopify App Store hat.

Schritt 1. Gehen Sie zu Shopify Admin → Onlineshop → Themes → Anpassen.

Schritt 2. Der Theme-Editor öffnet standardmäßig Ihre Startseite. Wenn er eine andere Seite öffnet, nutzen Sie das Seitenauswahl-Dropdown oben in der Mitte des Editors, um zur Startseite zu navigieren.

Schritt 3. Suchen Sie in der linken Seitenleiste den Banner-Abschnitt. Er kann Image banner, Hero, Slideshow oder Bild in voller Breite heißen. Der genaue Name hängt von Ihrem Theme ab.

Schritt 4. Klicken Sie auf den Namen des Abschnitts, um dessen Einstellungen zu öffnen.

Schritt 5. Aktualisieren Sie die gewünschten Elemente:

Bild – Klicken Sie auf das Vorschaubild, um es aus Ihrer Medienbibliothek zu ersetzen oder eine neue Datei hochzuladen.
Overlay – Passen Sie die Overlay-Farbe und Deckkraft an, damit der Text über dem Bild lesbar bleibt.
Textblöcke – Klicken Sie auf die Überschrift- oder Unterüberschrift-Blöcke, um den Text zu bearbeiten.
Button – Klicken Sie auf den Button-Block, um die Beschriftung und das Linkziel zu aktualisieren.
Farbschema – Wenn Ihr Theme Farbschemata verwendet, wählen Sie eines aus, das zum neuen Banner passt.

Schritt 6. Speichern.

Die häufigsten Anpassungen neben dem Bildwechsel:

Textfarbe ändern. Klicken Sie auf den Überschrift- oder Textblock → suchen Sie nach einer Textfarbeinstellung oder nutzen Sie die Option Farbschema des Abschnitts, um zu einem helleren oder dunkleren Schema zu wechseln.

Overlay anpassen. Die meisten Banner-Abschnitte haben einen Schieberegler für die Overlay-Deckkraft. Erhöhen Sie diese, um Text auf unruhigen Bildern lesbarer zu machen; verringern Sie sie, um das Bild deutlicher hervortreten zu lassen.

Button-Stil ändern. Suchen Sie in den Button-Block-Einstellungen nach einer Stil-Option – „Primär“, „Sekundär“, „Umrandet“. Dies steuert, ob der Button gefüllt oder nur umrandet ist.

Banner-Höhe ändern. Suchen Sie in den Abschnitteinstellungen (nicht im Block) nach einer Einstellung für die Banner-Höhe oder Abschnittshöhe. Die Optionen sind meist „Klein“, „Mittel“, „Groß“ oder ein benutzerdefinierter Pixelwert.

Wenn Ihr Banner eine Slideshow ist (mehrere rotierende Bilder), ist jeder Slide ein separater Block innerhalb des Abschnitts.

Erweitern Sie in der linken Seitenleiste den Slideshow-Abschnitt. Darunter aufgelistet sehen Sie die einzelnen Slide-Blöcke. Klicken Sie auf jeden Slide-Block, um Bild, Text und Button des jeweiligen Slides unabhängig voneinander zu bearbeiten.

Um einen neuen Slide hinzuzufügen: Klicken Sie unten in der Blockliste des Abschnitts auf Block hinzufügen und wählen Sie den Typ „Slide“.

Um Slides neu anzuordnen: Ziehen Sie die Blöcke in der Seitenleiste nach oben oder unten.

Standard-Shopify-Themes wie Dawn unterstützen Video-Abschnitte von Haus aus. Suche nach dem Abschnittstyp Video in der Abschnittsauswahl des Theme-Editors (klicke unten in der Seitenleiste auf Abschnitt hinzufügen).

Ein Video-Hintergrund-Banner in voller Breite – ein Video, das lautlos hinter einem Overlay-Text abgespielt wird – ist eine etwas fortgeschrittenere Komponente. Das Dawn-Theme enthält dies als Teil des Bildbanner-Abschnitts (suche nach einem „Video“-Tab neben der Bildauswahl). Andere Themes enthalten dies möglicherweise nicht.

Wenn dein Theme keine Video-Banner von Haus aus unterstützt, hast du zwei Möglichkeiten:

Eine Shopify-App, die Video-Abschnitt-Funktionen hinzufügt
Custom Code über Fudge: „Füge der Startseite ein Video-Hintergrund-Banner in voller Breite mit einer Überschrift und einem CTA-Button darüber hinzu.“

Brauchst du ein individuelles Startseiten-Banner-Layout? Beschreibe es Fudge.

Try Fudge for Free

Passend dazu: Baue deine Shopify-Startseite neu auf.

Best Practices für Bannerbilder

Nutze diese Spezifikationen, damit dein Banner schnell lädt und scharf aussieht:

Spezifikation	Empfohlen
Abmessungen	2560 x 1440px
Dateigröße	Unter 1 MB
Format	WebP oder JPEG
Mobiles Bild	750 x 1000px (Hochformat-Zuschnitt)

Überprüfe vor dem Speichern immer die Mobile-Vorschau im Theme-Editor. Banner-Bilder werden auf kleineren Bildschirmen oft unerwartet zugeschnitten. Wenn dein Theme ein separates Feld für das Mobile-Bild unterstützt, nutze es.

Kostenloses Tool

Wenn das Banner nicht wirklich das Problem ist

Das kostenlose Redesign-Tool erstellt drei Homepage-Konzepte aus deinen eigenen Produkten, Banner inklusive.

Deinen Shop neu designen

Wenn du mehr willst als nur einen einfachen Bildertausch – ein neues Layout, zusätzliche Conversion-Elemente, eine andere Struktur –, beschreibe es Fudge:

„Gestalte mein Homepage-Banner mit einem Split-Layout neu: Produktbild rechts, Überschrift und zwei Bullet-Points links, mit einer vollflächigen Hintergrundfarbe statt eines Bildes.“

Fudge generiert den Code als Entwurf. Überprüfe ihn und veröffentliche ihn, wenn alles passt.

FAQ

Sollte mein Homepage-Banner eine Slideshow oder ein einzelnes Bild sein?

Ein einzelnes, statisches Bild gewinnt meistens bei der Conversion. Slideshows teilen die Aufmerksamkeit auf mehrere Botschaften auf, verlangsamen den First Paint und die meisten Käufer sehen nicht mehr als die erste Slide, bevor sie scrollen. Verwende eine Slideshow nur, wenn du wirklich mehrere gleich wichtige Kampagnen gleichzeitig laufen hast.

Welche Bannerhöhe konvertiert in Shopify am besten?

Ein mittelgroßes Banner (etwa 60–80 % der Viewport-Höhe) schlägt in der Regel ein Banner, das den gesamten Viewport einnimmt. Vollbild-Banner verstecken den restlichen Inhalt "below the fold", was der Scrolltiefe und der Produktentdeckung schadet. Teste mittel vs. klein für deine Kategorie — Bekleidung gewinnt oft mit größeren Bannern; SaaS-ähnliche Produkte mit kleineren.

Kann ich ein Homepage-Banner so planen, dass es an einem bestimmten Datum erscheint?

Nicht nativ im Theme-Editor. Der sauberste Ansatz: Beschreibe das Startdatum für Fudge und es generiert einen datumsabhängigen Liquid-Wrapper, der das Banner zu deinem Zeitpunkt einschaltet — kein manuelles Austauschen am Launch-Tag nötig. Alternative: Eine Shopify-Planungs-App, die die Sichtbarkeit von Abschnitten nach Datum steuert, oder das Theme duplizieren und manuell veröffentlichen.

Warum ist der Button meines Homepage-Banners auf dem Handy abgeschnitten?

Die Bannerhöhe reicht nicht aus, damit Überschrift + Untertitel + Button hineinpassen. Reduziere entweder die Textlänge, wechsle auf dem Handy zu einer Bannerhöhe von "Klein" (einige Themes haben separate Höheneinstellungen für Desktop/Mobile) oder verschiebe den Button mit einem separaten Abschnitt unter das Banner.

Sollten Homepage-Banner-Videos automatisch abgespielt werden (Autoplay)?

Ja, mit Einschränkungen. Browser verlangen, dass Videos für Autoplay stummgeschaltet sind — gestalte sie also so, dass sie ohne Ton funktionieren. Verwende sie nur als atmosphärischen Hintergrund, bei dem die Botschaft im Overlay-Text und nicht im Audio liegt. Das automatische Abspielen langer Videos mit Ton wird von Browsern blockiert und würde ohnehin nicht geladen werden.