So ändern Sie das Hero-Image in Shopify (2026)

Wichtige Erkenntnisse

• Ändern Sie Ihr Hero-Image im Theme-Editor: Onlineshop → Themes → Anpassen → Suchen Sie das Bild-Banner oder den Hero-Abschnitt → Klicken Sie auf das Bild, um es zu ersetzen.
• Empfohlene Größe: 2560 x 1440 px, unter 1 MB, im WebP- oder JPEG-Format.
• Die meisten Themes ermöglichen es, ein separates Bild für die mobile Ansicht festzulegen – prüfen und nutzen Sie diese Option immer.
• Fudge kann Ihr Hero-Image und das Layout gleichzeitig aktualisieren, wenn Sie neben dem Bildtausch auch Designänderungen wünschen.

Ihr Hero-Image ist das Erste, was Besucher sehen. Es zu ändern ist eines der wirkungsvollsten visuellen Updates, die Sie vornehmen können, und es dauert im Theme-Editor weniger als 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 Onlineshop → Themes → Anpassen.

Schritt 2. Die Startseite ist normalerweise die Standardansicht. Falls nicht, nutzen Sie die Seitenauswahl oben, um zur Startseite zu navigieren.

Schritt 3. Suchen Sie in der linken Seitenleiste nach einem Abschnitt namens Bild-Banner, Hero, Slideshow oder ähnlich. Der Name variiert je nach Theme.

Schritt 4. Klicken Sie auf diesen Abschnitt, um seine Einstellungen zu öffnen.

Schritt 5. Klicken Sie auf das aktuelle Vorschaubild (oder den Bereich zum Hochladen von Bildern). Es öffnet sich eine Dateiauswahl 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.

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.

Empfohlene Spezifikationen für Hero-Images

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 Sie das Hero-Image austauschen und gleichzeitig das Layout ändern möchten – etwa eine andere Overlay-Transparenz, neue Textpositionierung oder zusätzliche Elemente wie ein Review-Badge oder einen Countdown – beschreiben Sie es einfach Fudge:

“Aktualisiere den Hero auf 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 der Unterüberschrift hinzu.”

Fudge generiert die Änderungen als Entwurf in Ihrem Theme. Sie prüfen und bestätigen alles, bevor es live geht.