So ersetzen Sie Hero-Hintergrundbilder in Shopify (2026)

Das Wichtigste auf einen Blick

• Gehen Sie zu Onlineshop > Themes > Anpassen > klicken Sie auf den Hero- oder Banner-Bereich > aktualisieren Sie das Hintergrundbild.
• Der Hero-Bereich wird je nach Theme meist „Image banner“, „Hero“ oder „Slideshow“ genannt.
• Fügen Sie ein dunkles Overlay hinzu, wenn Sie Text auf dem Bild haben – das verbessert die Lesbarkeit erheblich.
• Empfohlene Bildgröße: 2000px breit, komprimiert auf unter 500KB.

Ihr Hero-Image ist das Erste, was die meisten Besucher sehen. Es über den Theme Editor zu ändern, dauert weniger als eine Minute. Hier erfahren Sie genau, wie es geht.

Warum Sie uns vertrauen können

Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Editor für Storefronts mit einer 5,0-Bewertung im Shopify App Store.

So ändern Sie das Hero-Hintergrundbild

Schritt 1. Gehen Sie zu Onlineshop > Themes > Anpassen.

Schritt 2. Im Standard landest du auf der Homepage. Falls sich der Hero auf einer anderen Seite befindet, navigiere mit der Seitenauswahl oben dorthin.

Schritt 3. Suche in der linken Seitenleiste den Hero-Abschnitt. Er könnte wie folgt beschriftet sein:

• Image banner
• Hero-Bild
• Slideshow
• Bild in voller Breite

Klicke darauf.

Ähnlich: Fudge Store Editor.

Ähnlich: So ändern Sie den Homepage-Banner in Shopify (2026).

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

Schritt 5. Wähle ein Bild aus deiner Shopify-Dateibibliothek aus 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

Siehe auch: Ein Banner zu einer Shopify-Kollektionsseite hinzufügen.