Das Wichtigste in Kürze
- Ändere dein Hero-Image im Theme-Editor: Onlineshop → Themes → Anpassen → finde den Abschnitt “Bild-Banner” oder “Hero” → klicke auf das Bild, um es zu ersetzen.
- Empfohlene Größe: 2560 x 1440px, unter 1 MB, im WebP- oder JPEG-Format.
- Bei den meisten Themes kannst du ein separates Bild für Mobile festlegen – prüfe das immer und richte es ebenfalls ein.
- Fudge kann dein Hero-Image und das Layout gleichzeitig aktualisieren, falls du neben dem Bildtausch auch Designänderungen möchtest.
Um das Hero-Image in Shopify zu ändern, gehe zu Onlineshop → Themes → Anpassen, klicke auf den Abschnitt “Bild-Banner” (oder Hero) auf der Startseite, ersetze das Bild und speichere. Das dauert etwa zwei Minuten.
Warum du uns vertrauen kannst
Jacques hat über 15 Jahre Entwicklungserfahrung und vielen Shopify-Marken bei ihren Storefronts geholfen. Wir bauen Fudge, den KI-Operator für Shopify-Shops, mit einer Bewertung von 4.9 im Shopify App Store.
So änderst du das Hero-Image in Shopify
Schritt 1. Gehe zu Onlineshop → Themes → Anpassen.
Schritt 2. Die Startseite ist normalerweise die Standardansicht. Wenn nicht, nutze die Seitenauswahl oben, um zur Startseite zu navigieren.
Schritt 3. Suche in der linken Seitenleiste nach einem Abschnitt namens Bild-Banner, Hero, Slideshow oder ähnlich. Der Name variiert je nach Theme.
Schritt 4. Klicke auf diesen Abschnitt, um seine Einstellungen zu öffnen.
Schritt 5. Klicke auf das aktuelle Vorschaubild (oder den Bild-Upload-Bereich). Es öffnet sich ein Dateiauswahlfenster mit deiner Medienbibliothek.
Schritt 6. Wähle ein bestehendes Bild aus deiner Bibliothek aus oder klicke auf Hochladen, um eine neue Datei hinzuzufügen.
Schritt 7. Speichern.
Dein neues Hero-Image ist jetzt live.
Einstellungen für Text, Buttons und Slideshows des Banners findest du unter So änderst du das Startseiten-Banner in Shopify.
Du findest den Hero-Abschnitt im Theme-Editor nicht?
Wenn du den Hero-Abschnitt in der Seitenleiste nicht finden kannst, klicke auf das Hero-Image in der Vorschau. Dadurch wird der Abschnitt ausgewählt und seine Einstellungen werden geöffnet.
In Themes mit einem Slideshow-Hero ist jeder Slide ein separater Block. Klicke auf den jeweiligen Slide-Block, um das Bild für diesen Slide zu ändern.
Empfohlene Hero-Image-Spezifikationen
| Spezifikation | Empfohlener Wert |
|---|---|
| Abmessungen | 2560 x 1440px |
| Dateigröße | Unter 1 MB |
| Format | Hochwertiges JPEG oder WebP |
| Farbprofil | sRGB |
Warum 2560 x 1440px? Das deckt die breitesten Standard-Desktop-Displays ab. Shopify liefert über sein CDN automatisch verkleinerte Versionen an kleinere Bildschirme aus – ein großes Quellbild deckt also alle Bildschirmgrößen ab.
Halte es unter 1 MB. Hero-Images sind fast immer das Element für den “Largest Contentful Paint” (LCP) auf der Seite. Eine große Datei schadet direkt deinem Page-Speed-Score und deiner Conversion-Rate.
JPEG oder WebP funktionieren beide. Das CDN von Shopify konvertiert und skaliert Uploads für jeden Browser. Lade also ein hochwertiges JPEG oder WebP hoch und halte es unter 1 MB.
Bist du dir noch unsicher, was im Hero stehen oder wie er aussehen soll? Unser kostenloses Shopify Website-Redesign-Tool generiert drei Startseiten-Entwürfe aus deinen echten Produkten, inklusive Hero-Abschnitt.
So legst du ein separates mobiles Hero-Image fest
Einige Themes unterstützen ein spezielles mobiles Bild für die Hero-Sektion – das Horizon-Theme von Shopify tut dies, Dawn jedoch nicht. Das ist wichtig, weil ein 2560 x 1440px großes Querformat-Bild auf hochformatigen mobilen Bildschirmen oft ungeschickt zugeschnitten wird. Unser Shopify Bildergrößen-Guide erklärt, warum das passiert und listet Größen für jeden Bildtyp auf.
Suche in den Einstellungen der Hero-Sektion nach dem Feld Mobiles Bild (Mobile image) unterhalb der Hauptbild-Auswahl. Lade einen hochformatigen Zuschnitt deines Hero-Images hoch – typischerweise etwa 750 x 1000px.
Wenn dein Theme kein separates Feld für mobile Bilder hat, wird das Hauptbild basierend auf der CSS-Einstellung object-position der Sektion zugeschnitten oder skaliert. Du kannst das per Code oder mit Fudge anpassen.
So änderst du Hero-Image Text und Button
Die Überschrift, die Unterüberschrift und der Button sind separate Blöcke innerhalb des Abschnitts.
Klicke auf den Abschnitt → suche in der linken Seitenleiste unter dem Abschnittsnamen nach den Blöcken Überschrift, Unterüberschrift und Button. Klicke auf jeden Block, um den Text und den Link zu bearbeiten.
Um die Textfarbe zu ändern (für eine bessere Lesbarkeit auf einem neuen Bild), suche in den Abschnittseinstellungen nach der Option Textfarbe oder Farbschema.
So nutzt du Fudge, um die Hero-Sektion zu aktualisieren
Wenn du ein Hero-Image austauschst und gleichzeitig das Layout ändern möchtest – eine andere Overlay-Deckkraft, neue Textpositionierung, zusätzliche Elemente wie ein Bewertungs-Badge oder ein Countdown –, beschreibe es einfach Fudge, dem KI-Operator für Shopify-Shops:
“Aktualisiere den Startseiten-Hero mit dem neuen Banner-Bild und verschiebe die Überschrift nach links. Füge eine Sternebewertung mit ‘4,8 aus 1.200 Bewertungen’ unter der Unterüberschrift hinzu.”
Fudge schreibt die Änderungen als Entwurf mit einer funktionierenden Vorschau in dein Theme, und nichts geht live, bis du es genehmigst. Sobald der neue Hero veröffentlicht ist, zeigt dir Fudge die Conversion-Rate deiner Startseite vor und nach der Änderung.
FAQ
Beeinflusst mein Hero-Image die Shopify-SEO?
Indirekt. Der Hero ist fast immer das Element für den Largest Contentful Paint (LCP), daher wirkt sich seine Dateigröße direkt auf die Core Web Vitals aus – die Google als weiches Ranking-Signal nutzt. Ein überladener Hero (mehrere MB) kann den LCP in den Bereich "schlecht" fallen lassen und das Ranking verschlechtern. Halte es unter 1 MB.
Warum wird mein Hero-Image auf mobilen Geräten ungünstig zugeschnitten?
Die meisten Heros sind im Querformat (z. B. 2560x1440), aber mobile Viewports sind im Hochformat. Der Zuschnitt entsteht durch die object-position-Einstellung des Abschnitts, die standardmäßig zentriert ist. Lade entweder ein separates Bild für Mobile hoch (einige Themes unterstützen das, einschließlich Horizon) oder beschreibe Fudge, was du möchtest ("zeige dieses Hero-Image auf mobilen Geräten auf das rechte Drittel zugeschnitten"), und es fügt das richtige object-position CSS spezifisch für Mobile hinzu.
Sollte ich JPEG oder WebP für meinen Shopify-Hero verwenden?
Beides geht. Das CDN von Shopify konvertiert und skaliert Uploads für jeden Browser. Lade also ein hochwertiges JPEG oder WebP hoch und halte es unter 1 MB. Shopify kodiert jede ausgelieferte Größe neu. Ein stark vorkomprimiertes WebP kann daher bei der zweiten Kodierung an Qualität verlieren.
Ist der Alt-Text bei einem Hero-Image wichtig?
Ja – für die Barrierefreiheit (Screenreader) und die Bilder-SEO. Verwende einen beschreibenden Satz, der ein Keyword natürlich, also nicht vollgestopft, enthält. Beispiel: "Frau trägt den Aurora-Wollmantel auf einem verschneiten Gebirgspass" statt "Hero-Image" oder "beste Wintermäntel Shopify".
Kann ich ein Video statt eines statischen Bildes als Hero verwenden?
Ja, wenn dein Theme über einen Video-Hero oder einen Hintergrundvideo-Abschnitt verfügt (Horizon und viele kostenpflichtige Themes haben das; der Video-Abschnitt von Dawn ist Click-to-Play). Video-Heros steigern das Engagement in den Bereichen Lifestyle und Bekleidung, fügen aber selbst komprimiert 1–3 MB an Gewicht hinzu – das macht sich bei langsameren Verbindungen bemerkbar. Setze sie sparsam ein, schalte sie standardmäßig stumm (Browser verlangen das für Autoplay) und greife bei langsamen Netzwerken auf ein statisches Poster-Bild zurück.
