So tauschst du Hero-Hintergrundbilder in Shopify aus (2026)

Wichtigste Erkenntnisse

• Gehe zu Onlineshop > Themes > Anpassen > klicke auf den Hero- oder Banner-Bereich > aktualisiere das Hintergrundbild.
• Der Hero-Bereich wird je nach Theme typischerweise “Bildbanner” (Image banner), “Hero” oder “Slideshow” genannt.
• Füge ein dunkles Overlay hinzu, wenn du Text über dem Bild hast – das verbessert die Lesbarkeit erheblich.
• Empfohlene Bildgröße: 2560 x 1440px, komprimiert auf unter 1MB.

Um das Hero-Hintergrundbild in Shopify zu ersetzen, öffne Onlineshop > Themes > Anpassen, klicke auf den Bereich Bildbanner (oder Hero), wähle Bild ändern, wähle oder lade das neue Bild hoch und speichere es.

Warum du uns vertrauen kannst

Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Wir entwickeln auch Fudge, den KI-Operator für Shopify-Shops, mit einer Bewertung von 4.9 im Shopify App Store.

So änderst du das Hero-Hintergrundbild

Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.

Schritt 2. Du landest standardmäßig auf der Startseite. Wenn sich der Hero auf einer anderen Seite befindet, navigiere mit der Seitenauswahl oben dorthin.

Schritt 3. Finde in der linken Seitenleiste den Hero-Bereich. Er könnte so heißen:

• Bildbanner (Image banner)
• Hero-Bild (Hero image)
• Slideshow
• Bild in voller Breite (Full-width image)

Klicke darauf.

Schritt 4. Suche im Einstellungsfenster das Feld Bild. Klicke auf Bild auswählen oder Bild ändern.

Schritt 5. Wähle ein Bild aus deiner Shopify-Dateibibliothek oder lade direkt ein neues hoch.

Schritt 6. Klicke auf Speichern.

Für die Text-, Button- und Slideshow-Einstellungen des Banners, sieh dir an, wie man das Startseiten-Banner in Shopify ändert.

Empfohlene Bildspezifikationen

Die richtigen technischen Spezifikationen machen einen echten Unterschied dabei, wie der Hero aussieht und lädt:

Breite: 2560px breit (2560 x 1440px für ein 16:9-Banner). Das CDN von Shopify liefert responsive Versionen aus, aber das Quellbild muss breit genug sein, um auf großen Bildschirmen scharf auszusehen.

Höhe: Die meisten Themes zeigen den Hero in einem festen Verhältnis an – üblicherweise 16:9, 2:1 oder 3:1 für Breitbild-Banner. Überprüfe die Seitenverhältnis-Einstellungen deines Themes und schneide dein Bild entsprechend zu, bevor du es hochlädst.

Format: WebP oder JPEG für Fotos. Vermeide PNG für große fotografische Hintergründe (die Dateigrößen werden sehr groß).

Dateigröße: Komprimiere sie auf unter 1MB. Ein Hero-Bild, das langsam lädt, sorgt für einen schlechten ersten Eindruck und verschlechtert deine Core Web Vitals-Werte. Wie du es komprimieren kannst, erfährst du unter Bilder in Shopify komprimieren.

Wenn dein Hero von deinem Theme per Lazy-Loading geladen wird (eine häufige Lighthouse-Warnung), sieh dir an, wie du das Eager-Loading des Hero-Banners in Shopify behebst.

Ein dunkles Overlay für eine bessere Lesbarkeit hinzufügen

Wenn du Text (Überschrift, Untertitel, CTA-Button) über das Hero-Bild legst, ist die Lesbarkeit entscheidend. Weißer Text auf hellem Hintergrund ist unlesbar.

Die meisten Shopify-Themes enthalten eine Overlay-Einstellung direkt im Bildbanner-Bereich:

• Suche nach den Feldern “Overlay-Farbe” und “Overlay-Deckkraft”
• Ein schwarzes Overlay mit 30-50% Deckkraft reicht normalerweise aus, um weißen Text lesbar zu machen, ohne das Bild zu sehr zu verdecken
• Passe es an, je nachdem, wie hell dein Bild ist

Wenn dein Theme keine integrierte Overlay-Option hat, kann es über CSS hinzugefügt werden. Du kannst Fudge, dem KI-Operator für Shopify-Shops, den genauen Stil beschreiben: “Füge dem Hero-Bild-Bereich auf der Startseite ein 40% dunkles Overlay hinzu.” Fudge schreibt das CSS in dein Theme und zeigt dir einen Entwurf, bevor es veröffentlicht wird.

Um mehr Bereiche um den Hero herum hinzuzufügen, erfährst du hier, wie du Startseiten-Bereiche in Shopify hinzufügst.

Slideshow vs. einzelnes Hero-Bild

Einige Themes verwenden eine Slideshow für den Hero, die automatisch durch mehrere Bilder wechselt. Wenn du einen Slideshow-Bereich siehst:

• Jeder Slide hat seine eigene Bildeinstellung – klicke auf den jeweiligen Slide, um das Bild zu ändern
• Du kannst Slides zum Bereich hinzufügen oder entfernen
• Die Autoplay-Geschwindigkeit und der Übergangsstil lassen sich normalerweise in den Abschnittseinstellungen konfigurieren

Für die meisten Shops funktioniert ein einzelnes, starkes Bild besser als eine Slideshow. Karussells lenken ab und das zweite oder dritte Bild wird von den meisten Besuchern ohnehin kaum gesehen. Wenn du eine Slideshow verwendest, solltest du überlegen, sie auf ein einziges Hero-Bild zu reduzieren.

Videos als Hero-Hintergrund verwenden

Einige Themes (Horizon und viele kostenpflichtige Themes) bieten eine Video-Hintergrund-Option im Hero-Bereich; das Bildbanner von Dawn bietet das nicht. Überprüfe die Bereichseinstellungen auf ein Video- oder Hintergrundvideo-Feld.

Wenn dein Theme das nicht nativ unterstützt, kann ein Video-Hero-Hintergrund per Code hinzugefügt werden. Beschreibe es Fudge: “Ersetze den Hero-Hintergrund der Startseite durch ein MP4-Video in Endlosschleife. Behalte die Überschrift und den CTA-Button oben. Greife auf Mobilgeräten auf das bestehende Bild zurück.” Ein Video macht deine meistbesuchte Seite schwerer, frage Fudge also vor der Veröffentlichung des Entwurfs auch nach einem Speed-Audit der Startseite.

Hero-Bilder auf Unterseiten

Die oben genannten Schritte gelten für jede Seite mit einem Hero- oder Bannerbereich – nicht nur für die Startseite. Navigiere im Theme-Editor zu der entsprechenden Seite (Kollektionen, Seiten, Landingpages) und folge demselben Prozess, um das Hero-Bild dort zu aktualisieren.

FAQ