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. Suchen Sie in der Abschnittsauswahl des Theme-Editors nach einem Video-Abschnittstyp (klicken Sie unten in der Seitenleiste auf Abschnitt hinzufügen).

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

Wenn Ihr Theme keine Video-Banner nativ unterstützt, haben Sie zwei Möglichkeiten:

Eine Shopify-App, die Video-Abschnittsfunktionen hinzufügt.
Custom Code via Fudge: „Füge der Startseite einen Video-Hintergrund-Banner in voller Breite mit einer Headline und einem CTA-Button hinzu.“

Benötigen Sie ein individuelles Layout für Ihren Homepage-Banner? Beschreiben Sie es Fudge.

Try Fudge for Free

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 Sie mehr als nur einen einfachen Bildtausch möchten – ein neues Layout, zusätzliche Conversion-Elemente, eine andere Struktur – beschreiben Sie es Fudge:

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

Fudge erstellt den Code als Entwurf. Prüfen Sie ihn und veröffentlichen Sie ihn, wenn alles passt.