Den Homepage-Banner in Shopify ändern (2026)

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 einen einfachen Bildwechsel willst – ein neues Layout, zusätzliche Conversion-Elemente, eine andere Struktur – beschreibe es Fudge:

“Design mein Homepage-Banner mit einem Split-Layout neu: Produktbild rechts, Headline und zwei Bullet Points links, mit einer vollflächigen Hintergrundfarbe statt eines statischen Bildes.”

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

FAQ

Sollte mein Homepage-Banner eine Slideshow oder ein einzelnes Bild sein?

Ein einzelnes statisches Bild gewinnt meistens bei der Conversion. Slideshows teilen die Aufmerksamkeit auf mehrere Botschaften auf, verzögern den First Paint und die meisten Kunden sehen ohnehin nicht mehr als den ersten Slide, bevor sie weiterscrollen. Nutze eine Slideshow nur, wenn du wirklich mehrere, gleich wichtige Kampagnen gleichzeitig laufen hast.

Welche Banner-Höhe konvertiert in Shopify am besten?

Ein mittleres Banner (ca. 60–80 % der Viewport-Höhe) schlägt in der Regel ein Full-Viewport-Banner. Full-Screen-Banner verstecken den restlichen Content Below-the-Fold, was sich negativ auf die Scroll-Tiefe und die Produktentdeckung auswirkt. Teste mittel vs. klein für deine Kategorie – bei Mode gewinnen oft größere Banner; bei SaaS-ähnlichen Produkten eher kleinere.

Kann ich ein Homepage-Banner für ein bestimmtes Datum einplanen?

Nicht von Haus aus im Theme Editor. Der sauberste Ansatz: Beschreibe Fudge das Launch-Datum und das Tool generiert einen datumsabhängigen Liquid-Wrapper, der das Banner zu deinem gewünschten Zeitpunkt einblendet – so ist kein manueller Wechsel am Launch-Tag nötig. Alternative: Eine Shopify Scheduling-App, die die Sichtbarkeit der Section nach Datum steuert, oder das Theme duplizieren und manuell veröffentlichen.

Warum wird der Button meines Homepage-Banners auf Mobile abgeschnitten?

Die Banner-Höhe reicht nicht aus, damit Heading, Subheading und Button zusammenpassen. Reduziere entweder die Textlänge, wechsle auf Mobile auf eine „kleine“ Banner-Höhe (einige Themes haben separate Höheneinstellungen für Desktop/Mobile) oder verschiebe den Button mit einer separaten Section unter das Banner.

Sollten Homepage-Banner-Videos auf Autoplay stehen?

Ja, mit Einschränkungen. Browser verlangen, dass Videos stummgeschaltet sind, damit Autoplay funktioniert – gestalte sie also so, dass sie ohne Ton wirken. Nutze sie nur als atmosphärische Hintergründe, bei denen die eigentliche Botschaft im Overlay-Text steht und nicht in der Tonspur. Das automatische Abspielen langer Videos mit Ton wird von Browsern ohnehin blockiert und würde gar nicht erst laden.