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:
Ähnlich: Compress Images in Shopify.
Breite: 2000-2400px ist der 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 Verhä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 sehr groß).
Dateigröße: Komprimiere auf unter 500 KB. Ein Hero-Bild, das langsam lädt, hinterlässt einen schlechten ersten Eindruck und schadet den Core Web Vitals.
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 oben genannten Schritte gelten für jede Seite mit einem Hero- oder Banner-Abschnitt – nicht nur für die Homepage. Navigiere zur entsprechenden Seite im Theme Editor (Kollektionen, Seiten, Landingpages) und folge dem gleichen Prozess, um das Hero-Bild dort zu aktualisieren.
Ähnlich: So fügen Sie ein Banner auf einer Shopify-Kategorieseite hinzu (2026).