Shoupapp
Wer nach Bannergrößen im E-Commerce sucht, landet bei endlosen Pixel-Listen, die sich gegenseitig widersprechen. Der Grund ist einfach: Die Pixelmaße hängen von Ihrem Shop-Theme und vom Bildschirm ab – ob ein Banner funktioniert, entscheidet dagegen sein Seitenverhältnis. Dieser Leitfaden startet deshalb bei den fünf Formaten, die praktisch jedes Banner im Onlinehandel abdecken, und zeigt dann, wie Sie aus einem Seitenverhältnis Pixel machen, wie viel Text jedes Format verträgt und wie Sie eine Kampagne über alle Formate hinweg ausspielen.
| Format | Seitenverhältnis | Wo es eingesetzt wird |
|---|---|---|
| Website-Hero | 16:9 | Ganz oben auf der Startseite oder einer Landingpage |
| Breit | 2:1 | Kategorie-Header und E-Mail-Header |
| Schmal | 3:1 | Aktionsleisten und schmale Header |
| Quadratisch | 1:1 | Feed-Posts und Aktionskacheln auf Marktplätzen |
| Story | 9:16 | Instagram- und Facebook-Stories, vertikale Anzeigen |
Warum sich Pixel-Listen widersprechen
Jedes Theme stellt seine Banner-Bereiche in einer eigenen Breite dar, und jeder Bildschirm zeigt sie in einer anderen Größe. Deshalb empfiehlt ein Ratgeber für ein Hero-Banner dieses Pixelmaß und der nächste ein anderes. Manche Listen verpassen einer Größe sogar das falsche Seitenverhältnis: 2.048 × 1.024 Pixel werden oft als 16:9 bezeichnet, tatsächlich sind es 2:1. Ein Banner, das für das eine Format gestaltet und im anderen hochgeladen wird, landet im Beschnitt.
Gehen Sie deshalb in dieser Reihenfolge vor: Ermitteln Sie das Seitenverhältnis des jeweiligen Theme-Bereichs, gestalten Sie in diesem Verhältnis und exportieren Sie anschließend in der Breite, die Ihr Theme empfiehlt.
Vom Seitenverhältnis zu Pixeln
Wenn Sie Seitenverhältnis und Breite kennen, ergibt sich die Höhe von selbst. Teilen Sie die Breite durch die erste Zahl des Verhältnisses und multiplizieren Sie das Ergebnis mit der zweiten.
| Seitenverhältnis | Beispielbreite | Höhe |
|---|---|---|
| 16:9 | 1.920 px | 1.080 px |
| 2:1 | 2.048 px | 1.024 px |
| 3:1 | 1.800 px | 600 px |
| 1:1 | 1.080 px | 1.080 px |
| 9:16 | 1.080 px | 1.920 px |
Die Dokumentation Ihres Themes nennt die empfohlene Breite für jeden Bereich. Die Hinweise von Shopify halten zum Beispiel fest, dass Bilder bis zu 5.000 × 5.000 px groß sein dürfen und unter 20 MB bleiben müssen – reichlich Spielraum für gestochen scharfe Banner.
Für das Format gestalten, nicht hineinschneiden
Ein 16:9-Hero und eine 9:16-Story sind dieselbe Kampagne in zwei völlig verschiedenen Rahmen. Wer nur eines gestaltet und es ins andere schneidet, kappt fast immer die Headline, das Produkt oder den Button. Pixelmaße lassen sich skalieren, ein Seitenverhältnis dagegen nicht ändern, ohne dass etwas verloren geht. Bauen Sie jedes Format einzeln auf – mit Produkt und Text passend zu diesem Rahmen.
Ein Textbudget für jedes Banner
Banner scheitern häufiger an zu viel Text als an zu wenig. Ein praktikables Budget:
| Element | Richtwert |
|---|---|
| Headline | 60 Zeichen |
| Subheadline | 100 Zeichen |
| Fließtext | 180 Zeichen |
| Button-Beschriftung | 30 Zeichen |
Bei den kurzen Formaten sollte es weniger sein. In eine 3:1-Leiste passen meist nur eine Headline und ein Button, sonst nichts. Eine Headline, die im Desktop-Hero funktioniert, kann in einem schmalen Banner auf dem Smartphone unlesbar werden.
Sicherheitsbereiche je Format
- 16:9-Hero: Halten Sie Text von den Außenkanten fern – dort platzieren viele Themes Navigation, Pfeile oder Overlays – und prüfen Sie, wie der Bereich auf dem Smartphone beschnitten wird.
- 2:1 und 3:1: Produkt und Text gehören in das mittlere Band; diese Banner werden oft in sehr geringer Höhe ausgespielt.
- 1:1: Zentrierte Kompositionen sind am sichersten, weil Feeds und Kacheln die Vorschau abgerundet oder beschnitten anzeigen können.
- 9:16-Story: Lassen Sie oben und unten Platz für Profilname, Buttons und Antwortleiste der Plattform und setzen Sie das Produkt ins mittlere Drittel.
Stil nach Ziel
| Ziel | Passender Stil | Textschwerpunkt |
|---|---|---|
| Produkt einführen | Clean oder Premium | Produktname und ein Vorteil |
| Aktion bewerben | Bold | Das Angebot in der Headline |
| Vorteil hervorheben | Lifestyle | Der Vorteil, in der Anwendung gezeigt |
| Bekanntheit aufbauen | Premium | Wenig Text, oft ohne Button |
Warum KI-Text auf Bannern schiefgeht
Banner, die komplett als Bild erzeugt werden, scheitern oft am Text: Buchstabenfolgen, die ein Wort fast ergeben, oder ein Markenname mit einem falschen Zeichen. Zuverlässiger ist es, das Bild ohne Text zu erzeugen und Headline, Subheadline und Button anschließend als echten Text darüberzulegen. Dann steht dort genau das, was Sie eingetippt haben – in jedem Format.
Eine Kampagne über fünf Formate
Eine Produkteinführung lässt sich in der Regel aus einem einzigen Produktfoto abdecken:
- Schreiben Sie die Headline einmal, innerhalb des oben genannten Budgets.
- Erstellen Sie den 16:9-Hero für die Startseite.
- Erstellen Sie den 2:1-Header für die Launch-E-Mail.
- Erstellen Sie den 1:1-Post und die 9:16-Story für Social Media.
- Nutzen Sie die 3:1-Leiste für die Kategorieseite oder eine shopweite Aktionsleiste.
Behalten Sie überall dieselbe Headline und dieselbe Button-Farbe bei, damit Ihre Kundinnen und Kunden die Kampagne wiedererkennen, wo immer sie ihr begegnen.
Das Set aus einem Produktfoto erstellen
Der Produktbanner-Generator von Shoupapp arbeitet mit einem Foto, das bereits in Ihrer Bibliothek liegt. Sie wählen das Ziel (Produkt einführen, Aktion bewerben, Vorteil hervorheben, Bekanntheit aufbauen), das Format und den Stil (Clean, Lifestyle, Premium oder Bold – oder Sie überlassen die Wahl dem Tool). Tippen Sie Ihre eigene Headline ein oder lassen Sie das Feld leer, dann wird sie für Sie geschrieben: auf Englisch, Spanisch, Deutsch, Französisch, Italienisch, Portugiesisch, Niederländisch, Türkisch oder Polnisch.
Jedes Format wird eigenständig für sein Seitenverhältnis komponiert, und der Text liegt als echter Text über dem Bild – also immer korrekt geschrieben. Der Button ist optional und übernimmt Ihre Markenfarbe; die Farbe der Beschriftung wird automatisch so gewählt, dass sie lesbar bleibt. Lassen Sie dasselbe Foto einmal pro benötigtem Format durchlaufen. Jedes Banner wird als neue Datei neben dem Original gespeichert, bereit zum Download oder zur Feinarbeit im Fotoeditor. Banner können außerdem ein Schritt in einer Automatisierung sein, sodass neue Produkte eines bekommen, sobald ihr Foto eintrifft.
Bannertypen im ganzen Shop
| Banner | Typisches Format | Was es braucht |
|---|---|---|
| Startseiten-Hero | 16:9 auf dem Desktop, mobil oft höher | Produkt, Headline, Button |
| Kollektions- oder Kategorie-Header | 2:1 oder 3:1 | Name der Kollektion, ein Produkt oder eine Textur |
| E-Mail-Header | 2:1 | Angebot und ein Produkt; muss in der Vorschau lesbar sein |
| Aktionskachel | 1:1 | Das Angebot, groß |
| Story oder vertikale Anzeige | 9:16 | Produkt in der Mitte, Text im Sicherheitsbereich |
Hero für Desktop und Mobil
Viele Themes zeigen den Startseiten-Hero auf dem Smartphone in einem anderen Format, oft höher als 16:9, und beschneiden das Desktop-Bild entsprechend. Prüfen Sie, ob Ihr Theme ein separates Mobilbild zulässt. Wenn ja, erstellen Sie eines: dieselbe Botschaft, komponiert für den hohen Rahmen. Wenn nicht, halten Sie Produkt und Headline in der Mitte des 16:9-Banners – dort überstehen sie den Beschnitt.
Dateiformat und Dateigröße
Banner sind meist die größten Bilder einer Seite und beeinflussen daher die Ladezeit am stärksten. Fotografische Banner speichern Sie als JPG oder WebP; PNG-Dateien desselben Banners sind deutlich größer. Exportieren Sie in der Breite, in der Ihr Theme das Banner anzeigt, nicht größer. Prüfen Sie die Seite anschließend über eine Mobilfunkverbindung: Erscheint der Hero merklich nach dem Rest der Seite, ist die Datei zu schwer.
Häufige Fragen zu Bannern
Welche Bannergröße ist für einen Shopify-Shop die beste?
Das hängt vom Theme und vom jeweiligen Bereich ab. Schlagen Sie die Breite in der Theme-Dokumentation nach und gestalten Sie im Seitenverhältnis, das der Bereich nutzt.
Soll ich JPG, PNG oder WebP verwenden?
Bei fotografischen Bannern halten JPG oder WebP die Dateien klein. PNG nur dann, wenn Sie Transparenz brauchen.
Kann ich dasselbe Banner in allen Größen wiederverwenden?
Verwenden Sie die Botschaft wieder, nicht die Datei. Bauen Sie jedes Format einzeln auf – so bleiben die Bannergrößen im E-Commerce beherrschbar.