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. Sie landen standardmäßig auf der Startseite. Wenn sich der Hero-Bereich auf einer anderen Seite befindet, navigieren Sie mit der Seitenauswahl oben dorthin.
Schritt 3. Suchen Sie in der linken Seitenleiste den Hero-Bereich. Er könnte so beschriftet sein:
- Image banner
- Hero image
- Slideshow
- Full-width image
Klicken Sie darauf.
Schritt 4. Suchen Sie im Einstellungsbereich das Feld Bild. Klicken Sie auf Bild auswählen oder Bild ändern.
Schritt 5. Wählen Sie ein Bild aus Ihrer Shopify-Dateibibliothek aus oder laden Sie direkt ein neues hoch.
Schritt 6. Klicken Sie auf Speichern.
Empfohlene Bildspezifikationen
Die richtigen technischen Daten machen einen echten Unterschied dabei, wie der Hero-Bereich aussieht und lädt:
Breite: 2000-2400px ist Standard für vollflächige Hero-Bilder. Das CDN von Shopify stellt responsive Versionen bereit, 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. Prüfen Sie die Aspect-Ratio-Einstellungen Ihres Themes und beschneiden Sie Ihr Bild vor dem Hochladen entsprechend.
Format: WebP oder JPEG für Fotos. Vermeiden Sie PNG für große fotografische Hintergründe (die Dateigrößen werden sehr groß).
Dateigröße: Komprimieren Sie auf unter 500KB. Ein Hero-Image, das langsam lädt, sorgt für einen schlechten ersten Eindruck und schadet den Core Web Vitals Werten.
Ein dunkles Overlay für die Textlesbarkeit hinzufügen
Wenn Sie Text (Überschrift, Unterüberschrift, CTA-Button) über dem Hero-Image haben, ist die Lesbarkeit entscheidend. Weißer Text auf hellem Hintergrund ist unlesbar.
Die meisten Shopify-Themes enthalten eine Overlay-Einstellung direkt im Image-Banner-Bereich:
- Suchen Sie nach den Feldern „Overlay color“ (Overlay-Farbe) und „Overlay opacity“ (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.
- Passen Sie dies an, je nachdem wie hell Ihr Bild ist.
Wenn Ihr Theme keine integrierte Overlay-Option hat, kann diese über CSS hinzugefügt werden. Sie können den genauen Stil bei Fudge beschreiben: „Füge dem Hero-Image-Bereich auf der Startseite ein 40 % dunkles Overlay hinzu.“ Fudge generiert den Code und zeigt einen Entwurf vor der Veröffentlichung.
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-Bereich – nicht nur für die Startseite. Navigieren Sie im Theme Editor zur entsprechenden Seite (Kollektionen, Seiten, Landingpages) und folgen Sie demselben Prozess, um dort das Hero-Image zu aktualisieren.
