Das Wichtigste auf einen Blick

Ändern Sie Ihren Homepage-Banner im Theme-Editor: Onlineshop → Themes → Anpassen → Startseite → Klicken Sie auf den Banner-Bereich.

Sie können das Bild, den Overlay-Text, den Button-Text, den Button-Link und das Farbschema ohne Code aktualisieren.

Bei Slideshow-Bannern ist jeder Slide ein separater Block – bearbeiten Sie diese einzeln.

Video-Banner und animierte Abschnitte erfordern Code oder eine Shopify-App.

Ihr Homepage-Banner ist der erste Eindruck Ihres Shops. Die Aktualisierung für eine neue Kampagne, eine saisonale Aktion oder einen Marken-Refresh ist eine Routineaufgabe im Theme-Editor.

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-Storefront-Editor, der von Hunderten von Shopify-Stores genutzt wird und eine 5,0-Bewertung im Shopify App Store hat.

Schritt 1. Gehen Sie zu Shopify Admin → Onlineshop → Themes → Anpassen.

Schritt 2. Der Theme-Editor öffnet standardmäßig Ihre Startseite. Wenn er eine andere Seite öffnet, nutzen Sie das Seitenauswahl-Dropdown oben in der Mitte des Editors, um zur Startseite zu navigieren.

Schritt 3. Suchen Sie in der linken Seitenleiste den Banner-Abschnitt. Er kann Image banner, Hero, Slideshow oder Bild in voller Breite heißen. Der genaue Name hängt von Ihrem Theme ab.

Schritt 4. Klicken Sie auf den Namen des Abschnitts, um dessen Einstellungen zu öffnen.

Schritt 5. Aktualisieren Sie die gewünschten Elemente:

Bild – Klicken Sie auf das Vorschaubild, um es aus Ihrer Medienbibliothek zu ersetzen oder eine neue Datei hochzuladen.
Overlay – Passen Sie die Overlay-Farbe und Deckkraft an, damit der Text über dem Bild lesbar bleibt.
Textblöcke – Klicken Sie auf die Überschrift- oder Unterüberschrift-Blöcke, um den Text zu bearbeiten.
Button – Klicken Sie auf den Button-Block, um die Beschriftung und das Linkziel zu aktualisieren.
Farbschema – Wenn Ihr Theme Farbschemata verwendet, wählen Sie eines aus, das zum neuen Banner passt.

Schritt 6. Speichern.

Die häufigsten Anpassungen neben dem Bildwechsel:

Textfarbe ändern. Klicken Sie auf den Überschrift- oder Textblock → suchen Sie nach einer Textfarbeinstellung oder nutzen Sie die Option Farbschema des Abschnitts, um zu einem helleren oder dunkleren Schema zu wechseln.

Overlay anpassen. Die meisten Banner-Abschnitte haben einen Schieberegler für die Overlay-Deckkraft. Erhöhen Sie diese, um Text auf unruhigen Bildern lesbarer zu machen; verringern Sie sie, um das Bild deutlicher hervortreten zu lassen.

Button-Stil ändern. Suchen Sie in den Button-Block-Einstellungen nach einer Stil-Option – „Primär“, „Sekundär“, „Umrandet“. Dies steuert, ob der Button gefüllt oder nur umrandet ist.

Banner-Höhe ändern. Suchen Sie in den Abschnitteinstellungen (nicht im Block) nach einer Einstellung für die Banner-Höhe oder Abschnittshöhe. Die Optionen sind meist „Klein“, „Mittel“, „Groß“ oder ein benutzerdefinierter Pixelwert.

Wenn Ihr Banner eine Slideshow ist (mehrere rotierende Bilder), ist jeder Slide ein separater Block innerhalb des Abschnitts.

Erweitern Sie in der linken Seitenleiste den Slideshow-Abschnitt. Darunter aufgelistet sehen Sie die einzelnen Slide-Blöcke. Klicken Sie auf jeden Slide-Block, um Bild, Text und Button des jeweiligen Slides unabhängig voneinander zu bearbeiten.

Um einen neuen Slide hinzuzufügen: Klicken Sie unten in der Blockliste des Abschnitts auf Block hinzufügen und wählen Sie den Typ „Slide“.

Um Slides neu anzuordnen: Ziehen Sie die Blöcke in der Seitenleiste nach oben oder unten.

Standard-Shopify-Themes wie Dawn unterstützen Video-Abschnitte nativ. Suche nach einem Video-Abschnittstyp in der Abschnittsauswahl des Theme-Editors (klicke unten in der Seitenleiste auf Abschnitt hinzufügen).

Für einen Video-Hintergrund-Banner in voller Breite – ein Video, das lautlos hinter einem Overlay-Text abläuft – ist eine fortgeschrittenere Komponente erforderlich. Das Dawn-Theme enthält dies als Teil des Image-Banner-Abschnitts (suche nach einem „Video“-Tab neben der Bildauswahl). Andere Themes enthalten dies möglicherweise nicht.

Wenn dein Theme keine Video-Banner nativ unterstützt, hast du zwei Optionen:

Eine Shopify-App, die Video-Sektions-Funktionalität hinzufügt
Custom Code via Fudge: „Füge einen Video-Hintergrund-Banner in voller Breite zur Homepage hinzu, mit einer Headline und einem CTA-Button darüber.“

Du brauchst ein individuelles Layout für deinen Homepage-Banner? Beschreibe es Fudge.

Try Fudge for Free

Passend dazu: Baue deine Shopify-Homepage neu auf.

Best Practices für Bannerbilder

Nutzen Sie diese Spezifikationen, damit Ihr Banner schnell lädt und scharf aussieht:

Merkmal	Empfohlen
Maße	2560 x 1440px
Dateigröße	Unter 1MB
Format	WebP oder JPEG
Mobiles Bild	750 x 1000px (Hochformat-Zuschnitt)

Überprüfen Sie vor dem Speichern immer die mobile Vorschau im Theme-Editor. Bannerbilder werden auf kleineren Bildschirmen oft unerwartet beschnitten. Wenn Ihr Theme ein separates Feld für mobile Bilder unterstützt, nutzen Sie dieses.

Wenn du mehr als nur einen einfachen Bildaustausch möchtest – ein neues Layout, zusätzliche Conversion-Elemente, eine andere Struktur – beschreibe es Fudge:

„Gestalte meinen Homepage-Banner neu mit einem Split-Layout: Produktbild rechts, Headline und zwei Bullet Points links, mit einer vollflächigen Hintergrundfarbe anstelle eines Bildes.“

Fudge generiert den Code als Entwurf. Überprüfe ihn und veröffentliche ihn, wenn alles passt.