Den Homepage-Banner in Shopify ändern (2026)

Das Wichtigste in Kürze

Ändere dein Startseiten-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 ganz ohne Code aktualisieren.

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

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

Dein Startseiten-Banner ist der erste Eindruck deines Shops. Es für eine neue Kampagne, eine saisonale Aktion oder ein Brand-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 nativ. Suche nach einem Video-Abschnittstyp in der Abschnittsauswahl des Theme-Editors (klicke unten in der Seitenleiste auf Abschnitt hinzufügen).

Für einen Video-Hintergrund-Banner in voller Breite – ein Video, das lautlos hinter einem Overlay-Text abläuft – ist eine fortgeschrittenere Komponente erforderlich. Das Dawn-Theme enthält dies als Teil des Image-Banner-Abschnitts (suche nach einem „Video“-Tab neben der Bildauswahl). Andere Themes enthalten dies möglicherweise nicht.

Wenn dein Theme keine Video-Banner nativ unterstützt, hast du zwei Optionen:

Eine Shopify-App, die Video-Sektions-Funktionalität hinzufügt
Custom Code via Fudge: „Füge einen Video-Hintergrund-Banner in voller Breite zur Homepage hinzu, mit einer Headline und einem CTA-Button darüber.“

Du brauchst ein individuelles Layout für deinen Homepage-Banner? Beschreibe es Fudge.

Try Fudge for Free

Passend dazu: Baue deine Shopify-Homepage neu auf.

Best Practices für Bannerbilder

Nutzen Sie diese Spezifikationen, damit Ihr Banner schnell lädt und scharf aussieht:

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

Überprüfen Sie vor dem Speichern immer die mobile Vorschau im Theme-Editor. Bannerbilder werden auf kleineren Bildschirmen oft unerwartet beschnitten. Wenn Ihr Theme ein separates Feld für mobile Bilder unterstützt, nutzen Sie dieses.

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

“Design mein Homepage-Banner mit einem Split-Layout neu: Produktbild rechts, Headline und zwei Bullet Points links, mit einer vollflächigen Hintergrundfarbe statt eines statischen Bildes.”

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

FAQ

Sollte mein Startseiten-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 Shopper scrollen weiter, bevor sie den zweiten Slide sehen. Nutze eine Slideshow nur, wenn du wirklich mehrere gleich wichtige Kampagnen gleichzeitig am Laufen hast.

Welche Banner-Höhe konvertiert in Shopify am besten?

Ein mittelgroßes Banner (ca. 60–80 % der Viewport-Höhe) schlägt in der Regel ein Vollbild-Banner. Full-Screen-Banner verstecken den restlichen Content Below-the-fold, was der Scrolltiefe und der Produktentdeckung schadet. Teste Medium vs. Small für deine Kategorie – bei Bekleidung gewinnen oft größere Banner; bei SaaS-ähnlichen Produkten eher kleinere.

Kann ich ein Startseiten-Banner für ein bestimmtes Datum einplanen?

Nicht nativ im Theme-Editor. Der sauberste Ansatz: Beschreibe das Startdatum für Fudge und es generiert einen datumsbedingten Liquid-Wrapper, der das Banner zu deinem festgelegten Zeitpunkt aktiviert – ganz ohne manuellen Wechsel am Launch-Tag. Alternativen: Eine Shopify-Scheduling-App, die die Sichtbarkeit von Abschnitten nach Datum steuert, oder das Theme duplizieren und manuell veröffentlichen.

Warum ist der Button meines Startseiten-Banners auf dem Smartphone abgeschnitten?

Die Banner-Höhe reicht nicht aus, damit Überschrift + Unterüberschrift + Button hineinpassen. Reduziere entweder die Textlänge, wechsle mobil auf eine "Small" Banner-Höhe (einige Themes haben separate Höheneinstellungen für Desktop/Mobile) oder verschiebe den Button in einen separaten Abschnitt unter das Banner.

Sollten Videos im Startseiten-Banner automatisch abspielen (Autoplay)?

Ja, mit Einschränkungen. Browser verlangen, dass Videos stummgeschaltet sein müssen, um automatisch abzuspielen – designe dein Video also für eine Ansicht ohne Ton. Nutze es nur für stimmungsvolle Hintergründe, bei denen die Botschaft im Overlay-Text steht und nicht im Audio. Das automatische Abspielen langer Videos mit Ton wird von Browsern blockiert und das Video würde ohnehin nicht laden.