So ersetzen Sie Hero-Hintergrundbilder in Shopify (2026)

Das Wichtigste in Kürze

• Gehe zu Onlineshop > Themes > Anpassen > klicke auf den Hero- oder Banner-Bereich > aktualisiere das Hintergrundbild.
• Der Hero-Bereich wird je nach Theme meist „Bildbanner“, „Hero“ oder „Slideshow“ genannt.
• Füge ein dunkles Overlay hinzu, wenn du Text auf dem Bild hast – das verbessert die Lesbarkeit enorm.
• Empfohlene Bildgröße: 2000px Breite, komprimiert auf unter 500KB.

Dein Hero-Bild ist das Erste, was die meisten Besucher sehen. Es über den Theme-Editor zu ändern, dauert keine Minute. Hier zeigen wir dir genau, wie das geht.

Warum Sie uns vertrauen können

Wir haben bereits Hunderte von Shopify-Storefronts aufgebaut und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store.

So ändern Sie das Hero-Hintergrundbild

Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.

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

Schritt 3. Suche in der linken Seitenleiste nach der Hero Section. Sie könnte folgendermaßen benannt sein:

• Bildbanner
• Hero-Bild
• Slideshow
• Bild in voller Breite

Klicke darauf.

Passend dazu: Fudge Store Editor.

Passend dazu: Das Startseiten-Banner in Shopify ändern.

Schritt 4. Suche in den Einstellungen nach dem 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.

Empfohlene Bildspezifikationen

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

Siehe auch: Bilder in Shopify komprimieren.

Breite: 2000-2400px ist Standard für Hero-Bilder in voller Breite. 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 Seitenverhältnis an – üblicherweise 16:9, 2:1 oder 3:1 für Widescreen-Banner. Überprüfe die Einstellungen für das Seitenverhältnis deines Themes und schneide dein Bild vor dem Hochladen entsprechend zu.

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

Dateigröße: Auf unter 500 KB komprimieren. Ein Hero-Bild, das langsam lädt, hinterlässt einen schlechten ersten Eindruck und verschlechtert deine Core Web Vitals-Werte.

Wenn dein Hero vom Theme per Lazy Loading geladen wird (eine häufige Lighthouse-Warnung), siehe Eager Loading für Hero-Banner in Shopify fixen.

Ein dunkles Overlay für die Textlesbarkeit hinzufügen

Wenn du Text (Headline, Unterüberschrift, 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 Bereich Image Banner:

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

Wenn dein Theme keine integrierte Overlay-Option hat, kann diese über CSS hinzugefügt werden. Du kannst den genauen Stil bei Fudge beschreiben: „Füge einen 40 % dunklen Overlay zum Hero-Bild-Abschnitt auf der Homepage hinzu.“ Fudge generiert den Code und zeigt einen Entwurf vor der Veröffentlichung.

Ähnlich: So fügst du Homepage-Abschnitte in Shopify hinzu (2026).

Slideshow vs. einzelnes Hero-Image

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

• Jede Slide hat ihre eigene Bildeinstellung – klicken Sie auf die einzelne Slide, um deren Bild zu ändern.
• Sie können Slides zum Bereich hinzufügen oder daraus entfernen.
• Die Autoplay-Geschwindigkeit und der Übergangsstil sind normalerweise in den Bereichseinstellungen konfigurierbar.

Für die meisten Stores performt ein einzelnes, starkes Bild besser als eine Slideshow. Karussells mindern die Aufmerksamkeit, und die zweite oder dritte Slide wird von den meisten Besuchern selten gesehen. Wenn Sie eine Slideshow verwenden, sollten Sie in Erwägung ziehen, diese auf ein einziges Hero-Image zu vereinfachen.

Video als Hero-Hintergrund verwenden

Einige Themes unterstützen einen Video-Hintergrund für den Hero-Bereich anstelle eines statischen Bildes. Suchen Sie nach einem Reiter „Video“ oder einer Option „Hintergrundvideo“ in denselben Bereichseinstellungen.

Wenn Ihr Theme dies nicht nativ unterstützt, kann ein Video-Hero-Hintergrund per Code hinzugefügt werden. Beschreiben Sie es Fudge: „Ersetze den Homepage-Hero-Hintergrund durch ein loopendes MP4-Video. Behalte Überschrift und CTA-Button obenauf. Nutze das vorhandene Bild als Fallback für Mobilgeräte.“

Hero-Bilder auf Unterseiten

Die obigen Schritte gelten für jede Seite mit einem Hero- oder Banner-Abschnitt – nicht nur für die Startseite. Navigiere im Theme-Editor zur jeweiligen Seite (Kollektionen, Seiten, Landing Pages) und folge demselben Prozess, um das Hero-Bild dort zu aktualisieren.

FAQ

Passend dazu: Ein Banner zu einer Shopify-Kategorieseite hinzufügen.