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
Einige Themes unterstützen ein spezielles mobiles Bild für die Hero-Section – Horizon von Shopify tut dies, Dawn nicht. Das ist wichtig, da ein Querformat-Bild mit 2560 x 1440px auf hochformatigen mobilen Bildschirmen oft unschön abgeschnitten wird. Unser Ratgeber zu Shopify-Bildgrößen erklärt, warum dieser Zuschnitt passiert, und listet die Größen für jeden Bildtyp auf.
Suche in den Einstellungen der Hero-Section nach dem Feld Mobile image unter der Hauptbild-Auswahl. Lade dort einen hochformatigen Zuschnitt deines Hero-Bildes 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 dies per Code oder mit 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
Wirkt sich mein Hero-Bild auf die Shopify-SEO aus?
Indirekt. Das Hero-Bild ist fast immer das Largest Contentful Paint (LCP) Element. Seine Dateigröße wirkt sich also direkt auf die Core Web Vitals aus — die Google als weiches Ranking-Signal nutzt. Ein aufgeblähtes Hero-Bild (mehrere MB) kann das LCP in den Bereich "poor" (schlecht) rutschen lassen und dem Ranking schaden. Halte es unter 1 MB und nutze WebP.
Warum wird mein Hero-Bild auf dem Smartphone so unschön abgeschnitten?
Die meisten Hero-Bilder sind im Querformat (z. B. 2560x1440), aber mobile Displays sind im Hochformat. Der Beschnitt entsteht durch die object-position-Einstellung der Sektion, die standardmäßig auf zentriert (center) steht. Lade entweder ein separates Mobile-Bild hoch (einige Themes wie Horizon unterstützen das), oder beschreibe Fudge einfach, was du möchtest ("zeige dieses Hero-Bild auf dem Smartphone auf das rechte Drittel zugeschnitten") und es fügt das richtige object-position-CSS speziell für Mobile hinzu.
Sollte ich JPEG oder WebP für mein Shopify Hero-Bild verwenden?
WebP. Es ist bei gleicher 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 dir einen Transkodierungsschritt.
Ist der Alt-Text bei einem Hero-Bild wichtig?
Ja — für die Barrierefreiheit (Screenreader) und die Bilder-SEO. Verwende einen beschreibenden Satz, der ein Keyword natürlich einbindet, ohne Keyword-Stuffing. Beispiel: "Frau trägt den Aurora-Wollmantel auf einem verschneiten Bergpass" statt "Hero-Bild" oder "Beste Wintermäntel Shopify".
Kann ich anstelle eines statischen Bildes auch ein Video als Hero verwenden?
Ja, wenn dein Theme es unterstützt (Dawn, Sense und die meisten modernen Themes tun das). Video-Heroes steigern das Engagement in den Bereichen Lifestyle und Bekleidung, bringen aber selbst komprimiert 1–3 MB auf die Waage — was bei langsameren Verbindungen durchaus ins Gewicht fällt. Setze sie sparsam ein, schalte sie standardmäßig stumm (Browser verlangen dies für Autoplay) und nutze ein statisches Poster-Bild als Fallback für langsame Netzwerke.
