Das Wichtigste in Kürze
- Ändere dein Hero Image im Theme Editor: Onlineshop → Themes → Anpassen → suche den Abschnitt ‘Bildbanner’ (Image banner) oder ‘Hero’ → klicke auf das Bild, um es zu ersetzen.
- Empfohlene Größe: 2560 x 1440px, unter 1MB, im WebP- oder JPEG-Format.
- Die meisten Themes erlauben ein separates Bild für Mobile – überprüfe das immer und stelle es ebenfalls ein.
- Fudge kann dein Hero Image und Layout gleichzeitig aktualisieren, falls du neben dem Austausch auch Design-Anpassungen möchtest.
Dein Hero Image ist das Erste, was Besucher sehen. Es zu ändern ist eines der wirkungsvollsten visuellen Updates, die du machen kannst, und es dauert im Theme Editor keine zwei Minuten.
Warum Sie uns vertrauen können
Jacques hat über 15 Jahre Erfahrung in der Shopify-Entwicklung. Wir haben Fudge entwickelt – einen KI-Storefront-Editor, der von Hunderten von Shopify-Shops genutzt wird, mit einer 4.9-Bewertung im Shopify App Store.
So ändern Sie das Hero-Image in Shopify
Schritt 1. Gehen Sie zu Online-Shop → Themes → Anpassen.
Schritt 2. Die Startseite ist normalerweise die Standardansicht. Falls nicht, wählen Sie oben im Seitenauswahler den Punkt „Startseite“ aus.
Schritt 3. Suchen Sie in der Seitenleiste links nach einem Abschnitt namens Image banner, Hero, Slideshow oder ähnlich. Der Name variiert je nach Theme.
Schritt 4. Klicken Sie auf diesen Abschnitt, um die Einstellungen zu öffnen.
Schritt 5. Klicken Sie auf das aktuelle Vorschaubild (oder den Bereich für den Bildupload). Es öffnet sich ein Fenster mit Ihrer Medienbibliothek.
Schritt 6. Wählen Sie ein vorhandenes Bild aus Ihrer Bibliothek aus oder klicken Sie auf Hochladen, um eine neue Datei hinzuzufügen.
Schritt 7. Speichern.
Ihr neues Hero-Image ist nun live.
Ähnlich: Fudge Store Editor.
Ähnlich: Link zu einem Bild in Shopify hinzufügen.
Ähnlich: Bilder in Shopify komprimieren.
Einen ähnlichen Ansatz finden Sie unter Homepage-Banner in Shopify ändern.
Wie ändere ich mein Foto im Hero-Bereich?
Falls Sie den Hero-Abschnitt nicht in der Seitenleiste finden, klicken Sie direkt auf das Hero-Image in der Vorschau auf der rechten Seite. Dadurch wird der Abschnitt ausgewählt und seine Einstellungen im linken Bereich geöffnet.
In Themes mit einem Slideshow-Hero ist jeder Slide ein separater Block. Klicken Sie auf den einzelnen Slide-Block, um das Bild für diesen Slide zu ändern.
Verwandt: Add a Link to an Image in Shopify.
Verwandt: Change the Homepage Banner in Shopify.
Empfohlene Spezifikationen für Hero-Images
| Spezifikation | Empfohlener Wert |
|---|---|
| Abmessungen | 2560 x 1440px |
| Dateigröße | Unter 1MB |
| Format | WebP (bevorzugt) oder JPEG |
| Farbprofil | sRGB |
Warum 2560 x 1440px? Das deckt die breitesten Standard-Desktop-Displays ab. Shopify liefert über sein CDN automatisch herunterskalierte Versionen an kleinere Bildschirme aus – ein großes Quellbild deckt also alle Bildschirmgrößen ab.
Halte es unter 1MB. Hero Images sind fast immer das Largest Contentful Paint (LCP) Element auf der Seite. Eine große Datei schadet direkt deinem Page Speed Score und deiner Conversion Rate.
Nutze WebP. Shopify konvertiert hochgeladene Bilder für unterstützte Browser automatisch in WebP, aber mit einer WebP-Quelle zu starten, liefert die besten Ergebnisse.
Noch unsicher, was im Hero stehen oder wie er aussehen soll? Unser kostenloses Shopify Website Redesign Tool generiert aus deinen echten Produkten drei Entwürfe für deine Startseite, inklusive Hero Section.
So legen Sie ein separates mobiles Hero-Image fest
Viele Themes unterstützen ein spezielles mobiles Bild für den Hero-Abschnitt. Das ist wichtig, da ein Querformat-Bild von 2560 x 1440 px auf vertikalen Mobilbildschirmen oft unvorteilhaft beschnitten wird.
Suchen Sie in den Einstellungen des Hero-Abschnitts nach einem Feld Mobiles Bild unter der Hauptbildauswahl. Laden Sie dort einen Ausschnitt Ihres Hero-Images im Porträtformat hoch – typischerweise etwa 750 x 1000 px.
Wenn Ihr Theme kein separates Feld für ein mobiles Bild hat, wird das Hauptbild basierend auf der CSS-Einstellung object-position des Abschnitts beschnitten oder skaliert. Dies können Sie über Code oder Fudge anpassen.
So ändern Sie Text und Button des Hero-Images
Text auf dem Hero-Image (Überschrift, Unterüberschrift und Button) sind separate Blöcke innerhalb des Abschnitts.
Klicken Sie auf den Abschnitt → suchen Sie nach den Blöcken Überschrift, Untertitel und Button in der linken Seitenleiste unter dem Abschnittsnamen. Klicken Sie auf den jeweiligen Block, um Text und Link zu bearbeiten.
Um die Textfarbe zu ändern (für bessere Lesbarkeit vor einem neuen Hintergrund), suchen Sie in den Abschnittseinstellungen nach der Option Textfarbe oder Farbschema.
So nutzen Sie Fudge, um den Hero-Bereich zu aktualisieren
Wenn du ein Hero-Bild austauschst und auch das Layout ändern möchtest – eine andere Overlay-Deckkraft, eine neue Textpositionierung, zusätzliche Elemente wie ein Review-Badge oder ein Countdown – beschreibe es Fudge:
“Aktualisiere den Hero meiner Startseite mit dem neuen Banner-Bild und verschiebe die Überschrift nach links. Füge eine Sternebewertung mit ‘4.8 von 1.200 Bewertungen’ unter dem Untertitel hinzu.”
Fudge generiert die Änderungen als Entwurf in deinem Theme. Du kannst alles überprüfen und freigeben, bevor es live geht.
FAQ
Indirekt. Das Hero Image ist fast immer das Largest Contentful Paint (LCP) Element, weshalb seine Dateigröße direkten Einfluss auf die Core Web Vitals hat – die Google als weiches Ranking-Signal nutzt. Ein zu großes Hero Image (mehrere MB) kann den LCP-Wert in den Bereich "schlecht" ("poor") rutschen lassen und Rankings schaden. Halte es unter 1MB und nutze WebP.
Die meisten Heros sind im Querformat (z.B. 2560x1440), aber mobile Ansichten (Viewports) sind im Hochformat. Der Zuschnitt entsteht durch die object-position-Einstellung der Section, die standardmäßig auf zentriert steht. Entweder lädst du ein separates Bild für Mobile hoch (die meisten modernen Themes unterstützen das) oder du beschreibst Fudge was du möchtest (z.B. "zeige dieses Hero Image auf Mobile auf das rechte Drittel zugeschnitten") und es fügt das richtige object-position CSS gezielt für Mobile hinzu.
WebP. Es ist bei vergleichbarer Qualität typischerweise 25–35 % kleiner als JPEG und wird von jedem modernen Browser unterstützt. Shopify konvertiert Uploads für unterstützte Clients zwar automatisch in WebP, aber wenn du direkt mit einer WebP-Quelle startest, bleibt mehr Qualität erhalten und du sparst einen Konvertierungsschritt.
Ja – für die Barrierefreiheit (Screenreader) und die Bild-SEO. Nutze einen beschreibenden Satz, der ein Keyword auf natürliche Weise enthält, ohne Keyword-Stuffing. Beispiel: "Frau trägt den Aurora-Wollmantel auf einem verschneiten Gebirgspass" anstelle von "Hero Image" oder "beste Wintermäntel Shopify".
Ja, wenn dein Theme das unterstützt (Dawn, Sense und die meisten modernen Themes tun dies). Video-Heros steigern das Engagement in Kategorien wie Lifestyle und Bekleidung, bringen aber selbst komprimiert 1–3 MB an zusätzlichem Gewicht mit – was bei langsameren Verbindungen ins Gewicht fällt. Setze sie sparsam ein, schalte sie standardmäßig stumm (Browser verlangen dies für Autoplay) und nutze bei langsamen Netzwerken ein statisches Poster-Bild als Fallback.
