Das Wichtigste in Kürze
- Ändere dein Hero-Image im Theme-Editor: Onlineshop → Themes → Anpassen → suche nach dem Bildbanner oder der Hero-Section → klicke auf das Bild, um es zu ersetzen.
- Empfohlene Größe: 2560 x 1440px, unter 1 MB, im WebP- oder JPEG-Format.
- Die meisten Themes ermöglichen es dir, ein separates Bild für Mobilgeräte festzulegen — prüfe das immer und stelle es ebenfalls ein.
- Fudge kann dein Hero-Image und Layout zusammen aktualisieren, wenn du neben dem Bildtausch auch Designänderungen 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 verfügt über mehr als 15 Jahre Erfahrung in der Shopify-Entwicklung. Wir haben Fudge entwickelt – einen KI-gestützten Storefront-Editor, der von Hunderten von Shopify-Stores genutzt wird und eine 5,0-Bewertung im Shopify App Store hat.
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 |
|---|---|
| Maße | 2560 x 1440 px |
| Dateigröße | Unter 1 MB |
| Format | WebP (bevorzugt) oder JPEG |
| Farbprofil | sRGB |
Warum 2560 x 1440 px? Dies deckt die gängigsten Desktop-Displays ab. Shopify liefert automatisch herunterskalierte Versionen für kleinere Bildschirme über sein CDN aus – ein großes Quellbild deckt also alle Bildschirmgrößen ab.
Bleiben Sie unter 1 MB. Hero-Images sind fast immer das Largest Contentful Paint (LCP)-Element auf der Seite. Eine große Datei schadet direkt Ihrem Page Speed Score und Ihrer Conversion-Rate.
Nutzen Sie WebP. Shopify konvertiert hochgeladene Bilder für unterstützte Browser automatisch in WebP, aber der Start mit einer WebP-Quelldatei liefert die besten Ergebnisse.
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 Element für den Largest Contentful Paint (LCP). Seine Dateigröße wirkt sich also direkt auf die Core Web Vitals aus – die Google als weiches Ranking-Signal nutzt. Ein aufgeblähtes Hero-Image (mehrere MB) kann den LCP in den "schlecht"-Bereich drücken und dem Ranking schaden. Halte es unter 1 MB und nutze WebP.
Die meisten Hero-Images sind im Querformat (z. B. 2560x1440), aber mobile Viewports sind im Hochformat. Der Zuschnitt kommt von der object-position-Einstellung der Section, die standardmäßig zentriert ist. Lade entweder ein separates Mobile-Bild hoch (die meisten modernen Themes unterstützen das) oder beschreibe Fudge was du möchtest ("zeige dieses Hero-Image auf Mobilgeräten aufs rechte Drittel zugeschnitten") und es fügt das passende object-position-CSS speziell für Mobile hinzu.
WebP. Es ist bei gleicher Qualität typischerweise 25–35 % kleiner als ein JPEG und wird von jedem modernen Browser unterstützt. Shopify konvertiert Uploads automatisch in WebP für unterstützte Clients, aber wenn du direkt mit einer WebP-Datei startest, bleibt mehr Qualität erhalten und du sparst einen Transkodierungsschritt.
Ja – für die Barrierefreiheit (Screenreader) und Bild-SEO. Verwende einen beschreibenden Satz, der ein Keyword auf natürliche Weise enthält (kein Keyword-Stuffing). Beispiel: "Frau trägt den Aurora-Wollmantel auf einem verschneiten Gebirgspass" anstatt "Hero-Image" oder "Beste Wintermäntel Shopify".
Ja, wenn dein Theme es unterstützt (Dawn, Sense und die meisten modernen Themes tun das). Video-Heros steigern das Engagement in Lifestyle- und Mode-Kategorien, fügen aber selbst komprimiert 1–3 MB an Gewicht hinzu – was bei langsameren Verbindungen spürbar ist. Nutze sie sparsam, schalte sie standardmäßig stumm (Browser verlangen das für Autoplay) und hinterlege ein statisches Poster-Bild als Fallback für langsame Netzwerke.
