Homepage-Banner in Shopify ändern (2026)

Wichtigste Erkenntnisse

Ändere dein Homepage-Banner im Theme-Editor: Onlineshop → Themes → Anpassen → Homepage → 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.

Hintergrundvideo-Banner benötigen ein Theme, das sie unterstützt, eine App oder Custom Code.

Um das Homepage-Banner in Shopify zu ändern, gehe zu Onlineshop → Themes → Anpassen, klicke auf den Abschnitt „Bildbanner“ oder „Slideshow“, ersetze dann Bild, Text und Button und klicke auf Speichern.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung und vielen Shopify-Brands bei ihren Storefronts geholfen. Wir bauen Fudge, den KI-Operator für Shopify-Stores, mit einer 4.9-Bewertung im Shopify App Store.

Schritt 1. Gehe im Shopify-Adminbereich zu Onlineshop → Themes → Anpassen.

Schritt 2. Der Theme-Editor öffnet sich standardmäßig auf deiner Startseite. Wenn er sich auf einer anderen Seite öffnet, nutze das Dropdown-Menü der Seitenauswahl oben in der Mitte des Editors, um zur Startseite zu navigieren.

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

Schritt 4. Klicke auf den Namen des Abschnitts, um seine Einstellungen zu öffnen.

Schritt 5. Aktualisiere die gewünschten Elemente:

Bild – klicke auf die Bildvorschau, um es aus deiner Medienbibliothek zu ersetzen oder lade eine neue Datei hoch
Overlay – passe die Overlay-Farbe und Deckkraft an, damit der Text über dem Bild lesbar bleibt
Textblöcke – klicke auf die Überschriften- oder Unterüberschriften-Blöcke, um den Text zu bearbeiten
Button – klicke auf den Button-Block, um die Beschriftung und das Link-Ziel zu aktualisieren
Farbschema – wenn dein Theme Farbschemata verwendet, wähle eines aus, das zum neuen Banner passt

Schritt 6. Speichern.

Wenn du nur das Bild austauschen musst, schau dir an, wie du das Hero-Bild in Shopify änderst.

Die häufigsten Anpassungen neben dem simplen Bildwechsel:

Textfarbe ändern. Klicke auf den Heading- oder Text-Block → suche nach einer Einstellung für die Textfarbe oder nutze die Farbschema-Option des Abschnitts, um zu einem helleren oder dunkleren Schema zu wechseln.

Overlay anpassen. Die meisten Banner-Abschnitte haben einen Regler für die Overlay opacity (Deckkraft). Erhöhe sie, um Text auf unruhigen Bildern besser lesbar zu machen; verringere sie, um das Bild klarer durchscheinen zu lassen.

Button-Style ändern. Suche in den Button-Block-Einstellungen nach einer Style-Option – „Primary“, „Secondary“, „Outlined“. Das steuert, ob der Button ausgefüllt oder umrandet ist.

Bannerhöhe ändern. Suche in den Abschnittseinstellungen (nicht in einem Block) nach der Einstellung Banner height (Bannerhöhe) oder Section height (Abschnittshöhe). Die Optionen sind meistens „Small“, „Medium“, „Large“ oder ein eigener Pixelwert.

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

Klappe in der linken Seitenleiste den Slideshow-Abschnitt aus. Darunter siehst du die einzelnen Slide-Blöcke aufgelistet. Klicke auf jeden Slide-Block, um das Bild, den Text und den Button dieses Slides unabhängig voneinander zu bearbeiten.

Um einen neuen Slide hinzuzufügen: Klicke unten in der Blockliste des Abschnitts auf Add block (Block hinzufügen) und wähle den Slide-Block-Typ aus.

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

Viele Themes, einschließlich Dawn, haben einen Video-Abschnitt in der Abschnittsauswahl des Theme-Editors (klicke unten in der Seitenleiste auf Abschnitt hinzufügen). In Dawn ist es ein Click-to-Play-Embed, kein Hintergrundvideo.

Ein Video-Hintergrundbanner über die volle Breite – ein Video, das geräuschlos hinter dem Overlay-Text abgespielt wird – ist eine etwas anspruchsvollere Komponente. Ein Hintergrundvideo hinter Overlay-Text ist kein Teil von Dawn; einige neuere Themes wie Horizon und viele kostenpflichtige Themes enthalten es jedoch.

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

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

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

Kostenlose Testversion starten

Um die gesamte Seite zu überarbeiten, sieh dir an, wie du deine Shopify-Startseite neu aufbaust.

Best Practices für Bannerbilder

Nutze diese Spezifikationen, um dein Banner schnell und gestochen scharf zu halten:

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

Überprüfe im Theme Editor immer die mobile Vorschau, bevor du speicherst. Auf kleineren Bildschirmen werden Bannerbilder oft unerwartet beschnitten (gecroppt). Wenn dein Theme ein separates Feld für ein mobiles Bild unterstützt, nutze es. Warum Banner auf dem Handy beschnitten werden und was du tun kannst, wenn dein Theme kein Feld für mobile Bilder hat, erfährst du in unserem Shopify Bildgrößen-Guide.

Kostenloses Tool

Wenn das Banner nicht wirklich das Problem ist

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

Deinen Shop neu designen

Wenn du mehr als einen einfachen Bildtausch willst – ein neues Layout, zusätzliche Conversion-Elemente, eine andere Struktur – baut Fudge, der KI-Operator für Shopify-Stores, es anhand einer Beschreibung:

„Gestalte mein Homepage-Banner mit einem Split-Layout neu: Produktbild rechts, Überschrift und zwei Aufzählungspunkte links, mit einer Hintergrundfarbe in voller Breite anstelle eines Bildes.“

Fudge generiert den Code als Entwurf in deinem Theme. Überprüfe ihn in der Vorschau und veröffentliche ihn, wenn alles passt. Wenn du dir nicht sicher bist, ob das Banner das Problem ist, gib Fudge stattdessen ein Conversion-Ziel vor: Es sucht nach den Seiten, auf denen Käufer abspringen, und priorisiert die Fixes, bevor es etwas baut.

FAQ

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

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

Welche Bannerhöhe konvertiert in Shopify am besten?

Ein mittleres Banner (ca. 60–80 % der Viewport-Höhe) ist meist besser als ein Banner über den gesamten Viewport. Full-Screen-Banner verstecken den restlichen Content "below the fold", was der Scrolltiefe und der Produktentdeckung schadet. Bekleidungs- und Lifestyle-Brands nutzen oft größere Banner; Shops mit vielen Produkten verwenden oft kleinere.

Kann ich ein Homepage-Banner für ein bestimmtes Datum planen?

Nicht nativ im Theme-Editor. Der sauberste Ansatz: Beschreibe Fudge das Launch-Datum und es generiert einen datumsabhängigen Liquid-Wrapper, der das Banner zu deinem Zeitpunkt einschaltet — kein manueller Wechsel am Launch-Tag nötig. Alternative: 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 Homepage-Banners auf dem Handy abgeschnitten?

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

Sollten Videos in Homepage-Bannern automatisch abspielen (Autoplay)?

Ja, aber mit Einschränkungen. Browser verlangen, dass Videos stummgeschaltet sind, um automatisch abzuspielen — designe sie so, dass sie ohne Ton verständlich sind. Nutze sie nur für stimmungsvolle Hintergründe, bei denen die Botschaft im Overlay-Text und nicht im Ton liegt. Browser blockieren Autoplay mit Ton, also wird ein nicht stummgeschaltetes Video einfach nicht starten.