Banner Revolution: Auffällige Aktionen ohne Designer erstellen

Zuletzt aktualisiert: Juni 2026.

Sie haben den Rabatt eingerichtet — eine Warenkorbregel, einen spezifischen Preis, vielleicht einen Gutscheincode, den Sie verteilen möchten. Der schwierige Teil ist erledigt. Aber ein Rabatt, den niemand sieht, verkauft nichts. Und wie die meisten Kunden von einer laufenden Aktion erfahren, ist das Banner oben auf Ihrer Startseite. Genau diese Lücke schließt dieser Leitfaden: nicht die Aktion selbst (das sind Warenkorbregeln und spezifische Preise), sondern das Banner, das sie ankündigt — sauber gestaltet, korrekt dimensioniert und so in PrestaShop eingebunden, dass Bild, Link und tatsächlicher Rabatt auf dasselbe Ziel zeigen. Dafür brauchen Sie keinen Designer und müssen auch nicht Photoshop lernen.

Beginnen Sie mit dem Rabatt, nicht mit dem Design

Ein Banner ist das Schaufenster für eine Aktion, die in Ihrem Back Office bereits existiert. Bevor Sie ein Design-Tool öffnen, sollte das Angebot live und getestet sein: eine Warenkorbregel unter Katalog → Rabatte → Warenkorbregeln (die genaue Bezeichnung kann je nach Version und Theme variieren) oder ein spezifischer Preis, der für das Produkt oder die Kategorie gesetzt ist. Der Grund, zuerst damit zu beginnen, ist einfach — das Banner muss ehrlich sein. Wenn das Banner "20 % Rabatt auf alles" sagt, Ihre Warenkorbregel aber nur für eine Kategorie gilt, lernen Kunden, Ihrer Überschrift nicht zu trauen. Und Sie verbringen die Aktion damit, E-Mails mit der Frage "Warum funktioniert mein Code nicht?" zu beantworten.

Legen Sie daher vor dem Gestalten drei Dinge fest, zu denen das Banner exakt passen muss:

• Der Betrag. Sind es 20 % Rabatt, 10 € Rabatt, kostenloser Versand oder "Kaufe eins, erhalte eins gratis"? Übernehmen Sie ihn direkt aus dem Tab Aktionen der Warenkorbregel, damit Überschrift und Berechnung übereinstimmen.
• Der Geltungsbereich. Der ganze Shop, eine Kategorie oder ausgewählte Produkte? Eine Warenkorbregel, die unter Bedingungen auf eine bestimmte Kategorie beschränkt ist, sollte zu einem Banner führen, das auf diese Kategorie verlinkt — nicht auf die Startseite.
• Die Frist. Wenn die Warenkorbregel ein gültig bis-Datum hat, darf das Banner das sagen. "Endet am Sonntag" ist einer der wenigen ehrlichen Dringlichkeitsimpulse, die Sie haben, und er ist nur deshalb ehrlich, weil das Back Office ihn durchsetzt. (Zum automatischen Timing von Aktionen siehe geplante Rabatte.)

Wenn Ihr Angebot einen Code erfordert, den Kunden an der Kasse eingeben, erstellen Sie ihn in derselben Warenkorbregel — im Feld Code im Tab Informationen — und setzen Sie genau diesen Code auf das Banner. Darauf, warum der sichtbar angezeigte Code auf dem Banner (statt ihn zu verstecken) für die Konversion wichtig ist, kommen wir gleich zurück.

Designprinzipien, die auch ohne Designer funktionieren

Die gute Nachricht für Nicht-Designer: Ein wirksames Aktionsbanner ist vor allem Zurückhaltung, nicht Talent. Vier Regeln tragen fast das gesamte Ergebnis.

Eine Botschaft pro Banner

Der häufigste Fehler ist Überladung. "20 % auf die Sommerkollektion + kostenloser Versand + Neuheiten + Treueprogramm beitreten" auf einem Banner bedeutet, dass der Kunde nichts davon liest. Ein Banner, ein Angebot, eine Handlungsaufforderung. Wenn Sie tatsächlich zwei Aktionen parallel laufen haben, ist das ein Fall für zwei separate Banner oder einen Slider — aber auch jede Slide braucht einen einzigen Fokus. Ein Banner, das eins zu eins zu einer einzelnen Warenkorbregel passt, lässt sich leicht schreiben und kaum missverstehen.

In zwei Sekunden lesbar

Bannertext muss auf einen Blick ankommen, denn mehr Aufmerksamkeit bekommt er nicht:

• Große Überschrift: mindestens 32px auf dem Desktop, 24px auf Mobilgeräten. Die Rabattzahl ist der Star — machen Sie sie zum größten Element auf dem Banner.
• Hoher Kontrast: heller Text auf dunklem Hintergrund oder dunkler Text auf hellem Hintergrund. Text über einem unruhigen Foto braucht eine farbige Überlagerung oder eine abgedunkelte Fläche dahinter, sonst verschwindet er.
• Wenige Wörter: 5-8 für die Überschrift, 10-15 für Zusatztext. "Sommeraktion — 20 % Rabatt auf alles" plus Code reicht.
• Klare Hierarchie: zuerst das Angebot, dann der Anlass, danach Code oder Frist.

Eine Handlungsaufforderung, die klickbar aussieht

Jedes Aktionsbanner braucht einen Button oder einen offensichtlichen Link, der dem Besucher sagt, was er tun soll: "Rabattaktion ansehen", "Kollektion entdecken", "Code SUMMER20 verwenden". Er sollte sich vom Rest des Banners abheben und wie etwas wirken, das man anklickt. Vage Formulierungen verschwenden Wirkung — "Mehr erfahren" unter einer 20-%-Rabatt-Überschrift nimmt dem Schwung, den die Zahl gerade aufgebaut hat, die Kraft.

Bilder, die Sie nicht selbst fotografieren müssen

Verwenden Sie ein echtes Produktfoto oder ein sauberes Lifestyle-Bild, wenn Sie eines haben. Wenn nicht, ist ein einfarbiger Hintergrund oder ein einfacher Verlauf mit kräftigem Text jedes Mal besser als ein unscharfes oder verpixeltes Foto. Ein aufgeräumtes reines Textbanner wirkt bewusst gestaltet; ein verzerrtes Stockfoto wirkt wie ein Fehler. Lassen Sie sich von "Ich habe keine Fotos" nicht aufhalten — die meisten starken Rabattbanner sind Schrift auf Farbe.

Kostenlose Tools, die das Design für Sie erledigen

Sie brauchen keine kostenpflichtige Software. Drei kostenlose Tools decken praktisch jedes Banner ab, das ein PrestaShop-Shop braucht.

Für die meisten Händler lautet die Antwort Canva: mit einer Vorlage starten, den Text durch Ihr Angebot ersetzen, ein Produktfoto einsetzen oder eine Hintergrundfarbe wählen und exportieren. Die eigentliche Fähigkeit besteht darin, eine Vorlage auszuwählen und sie nicht zu überarbeiten.

Bannergrößen für PrestaShop

Die exakten Abmessungen hängen von Ihrem Theme ab, aber dies sind die üblichen Größen und die, die die meisten Banner-Module erwarten:

• Hero-Banner auf der Startseite: 1920 × 600-800px, volle Breite, im sofort sichtbaren Bereich.
• Kategoriebanner: 1200 × 300-400px.
• Sidebar-Banner: 300 × 250px oder 300 × 600px.
• Banner für Mobilgeräte: 750 × 750px oder 750 × 500px — eine separate Version für Mobilgeräte, keine verkleinerte Desktop-Version.

Erstellen Sie immer eine separate mobile Version. Ein Banner, das bei 1920px sauber lesbar ist, wird auf einem 375px breiten Smartphone zu einem unlesbaren Fleck. Und in einem typischen PrestaShop-Shop kommt ein großer Teil des Traffics — oft mehr als die Hälfte — über das Smartphone. Mobile Banner brauchen relativ größere Schrift, einfachere Layouts und eine kürzere Botschaft.

Zur Datei selbst: Exportieren Sie Fotobanner als WebP oder als optimiertes JPEG und versuchen Sie, ungefähr unter 200KB zu bleiben. Verwenden Sie PNG nur, wenn Sie wirklich Transparenz brauchen. Zu große Bannerbilder gehören zu den häufigsten Ursachen für eine langsame Startseite — und eine langsame Startseite kostet genau die Besucher, die das Banner eigentlich konvertieren soll. PrestaShops Erweiterte Einstellungen → Leistung und die Bildeinstellungen Ihres Themes retten kein 3MB großes Hero-Bild; bringen Sie es vor dem Hochladen auf die richtige Größe.

Das Banner in PrestaShop einfügen

PrestaShop liefert keine einzelne Funktion namens "Aktionsbanner" mit, daher gibt es mehrere ehrliche Wege — wählen Sie danach, wie oft Sie Banner wechseln und wie viel Kontrolle Sie brauchen.

• Der native Bildslider. Die meisten Standard-Themes werden mit dem Modul ps_imageslider ausgeliefert. Gehen Sie zu Module → Modul-Manager, suchen Sie den Slider, klicken Sie auf Konfigurieren, und Sie können Slide-Bilder hochladen, die Link-URL setzen und Titel/Beschriftung schreiben. Das ist kostenlos und integriert — gut für ein gelegentliches Aktionsbanner, das Sie einmal setzen und dann laufen lassen.
• Theme-Einstellungen. Viele kommerzielle Themes haben einen eigenen Banner-Manager unter Design → Theme & Logo oder ein eigenes Theme-Konfigurator-Modul, oft mit mehr Kontrolle über die Platzierung (Kategorieseiten, Sidebars) als der Standard-Slider.
• Ein statischer Block / HTML. Für ein Banner an einer festen Stelle können Sie mit einem CMS-artigen HTML-Block (über ein "Custom HTML"-Modul oder die Positionen Ihres Themes) ein Bild in einem Link überall dort platzieren, wo ein Hook vorhanden ist.
• Ein dediziertes Banner-Modul. Wenn Sie häufig Aktionen fahren und mehr brauchen, als der Standard-Slider bietet — separate Bilder für Mobilgeräte, echte Textüberlagerungen und Handlungsaufforderungsbuttons über dem Bild sowie mehrere unabhängige Bannergruppen für Startseite, CMS-Seiten und Widget-Bereiche — spart ein dafür gebautes Modul wiederkehrende Arbeit im Back Office und ermöglicht nicht-technischen Mitarbeitern, ein Banner in wenigen Minuten auszutauschen. Unser eigenes Banner Revolution ist genau dafür gebaut: Hero-Karussells in voller Breite mit Text-über-Bild-Overlays und Handlungsaufforderungen, je Slide ein eigenes Desktop- und Mobilbild (damit Sie kein 1920px-Banner auf ein Smartphone quetschen) und mehrere Slider-Gruppen, die Sie dort platzieren können, wo Sie sie benötigen — alles aus dem Back Office verwaltet, ohne ein Template anzufassen.

Welchen Weg Sie auch wählen, eine Regel zählt: Der Link des Banners muss auf die richtige Stelle zeigen. Eine shopweite Rabattaktion verlinkt auf die Startseite oder eine Aktionskategorie; eine Kategorieaktion verlinkt auf diese Kategorie; ein Einzelproduktangebot verlinkt auf dieses Produkt. Ein Banner "20 % auf Kleider" auf die Startseite zu schicken, lässt Kunden nach den Kleidern suchen — und beim Suchen springen sie ab.

Banner und Rabatt müssen übereinstimmen

Das ist der Teil, den allgemeine Banner-Ratgeber überspringen, und genau der Teil, der entscheidet, ob die Aktion in einem PrestaShop-Shop tatsächlich konvertiert. Das Banner ist ein Versprechen; Warenkorbregel, spezifischer Preis oder Gutschein zeigen, ob Sie es halten.

• Automatische Rabatte brauchen keinen Code auf dem Banner. Wenn Ihre Warenkorbregel automatisch greift (kein Code, "Hervorheben" deaktiviert), kündigt das Banner nur das Angebot an und verlinkt weiter — der Preis ist bereits reduziert, wenn der Kunde ankommt. Die sauberste Erfahrung: nichts eingeben.
• Codebasierte Angebote müssen den Code zeigen. Wenn die Warenkorbregel einen Code verlangt, setzen Sie genau diesen Code auf das Banner — "Code SUMMER20 verwenden". Ein Gutscheinfeld ohne sichtbaren Code ist eine Einladung an den Kunden, Google zu öffnen, nach einem funktionierenden Code zu suchen und manchmal nicht zurückzukommen. Zeigen Sie den Code und erwägen Sie, ihn für Besucher, die über den Banner-Link kommen, vorab anzuwenden (das Hervorheben einer Warenkorbregel hilft, ihn sichtbar zu machen; manche Module oder benutzerdefinierten Links können einen Gutschein vorab anwenden, andernfalls zeigen Sie den Code einfach klar an).
• Der Geltungsbereich muss exakt passen. Wenn die Warenkorbregel unter Bedingungen auf eine Kategorie beschränkt ist, müssen Bannertext und Link das widerspiegeln. "Alles" auf dem Banner und "nur ausgewählte Kategorien" im Back Office ist der schnellste Weg zu Support-Tickets während Ihrer geschäftigsten Aktion.
• Lassen Sie die Frist aus der Regel kommen. Wenn Sie "Endet am Sonntag" auf das Banner setzen, stellen Sie das gültig-bis-Datum der Warenkorbregel entsprechend ein, damit der Rabatt tatsächlich endet, wenn das Banner es sagt. Ehrliche Dringlichkeit funktioniert nur, wenn das Back Office sie durchsetzt — siehe Dringlichkeit erzeugen, ohne manipulativ zu sein.

Speziell bei Geschenkkarten- und Gutscheinaktionen — "10 € Geschenkkarte zu jeder Bestellung" — bewirbt das Banner das Angebot, und die Einrichtung von Geschenkkarten / Gutscheinen liefert es aus. Behalten Sie eine Sache im Blick, die leicht vergessen wird: Manche Produkte sollten die große Rabattbotschaft überhaupt nie tragen. Wenn Sie bestimmte Artikel in den Bedingungen der Warenkorbregel ausschließen, darf ein Banner "20 % Rabatt auf alles" nichts anderes suggerieren — siehe warum manche Produkte nie reduziert werden sollten.

Halten Sie Banner aktuell — und übertreiben Sie es nicht mit Slides

Ein Banner, das seit drei Monaten auf Ihrer Startseite steht, ist für wiederkehrende Besucher unsichtbar; sie nehmen es nicht mehr wahr. Rotieren Sie nach Plan:

• Aktionsbanner: exakt an die Laufzeit der Aktion koppeln — online, wenn die Warenkorbregel live geht, offline, wenn sie abläuft.
• Saisonale Banner: mit jeder Saison oder jedem großen Ereignis austauschen. Ein saisonaler Sales-Kalender zeigt, was bevorsteht, damit das Banner vor dem Termin fertig ist, nicht danach.
• Allgemeine Markenbanner: alle vier bis sechs Wochen auffrischen, damit Stammkunden sie nicht ausblenden.

Setzen Sie Slider sparsam ein. Die meisten Besucher sehen nur die erste Slide, daher begräbt ein Karussell mit fünf Slides vor allem vier Botschaften. Wenn Sie Slides verwenden, setzen Sie das wichtigste Angebot nach vorn und begrenzen Sie sie auf drei oder vier Slides. Für eine einzelne Aktion schlägt ein statisches Banner mit klarer Botschaft einen Slider meist deutlich.

Prüfen Sie, ob das Banner tatsächlich funktioniert hat

Sie brauchen keine teuren Tools, um zu wissen, ob ein Banner seine Aufgabe erfüllt. Ergänzen Sie den Banner-Link um UTM-Parameter (zum Beispiel ?utm_source=homepage&utm_campaign=summer-sale), damit die Klicks in Ihrer Analyse als benannte Quelle erscheinen, und beobachten Sie einige Werte:

• Klickrate: Wie viele der Besucher, die das Banner gesehen haben, haben darauf geklickt? Wenige Klicks bedeuten, dass Botschaft oder Design Arbeit brauchen.
• Conversion nach dem Klick: Kaufen Banner-Klicker tatsächlich? Klicks ohne Bestellungen deuten auf die Zielseite oder auf eine Diskrepanz zwischen Banner und Rabatt hin — nicht auf die Bannergrafik.
• Umsatz aus der Kampagne: Wenn Sie einen eindeutigen Gutscheincode verwendet haben, zeigen Ihnen die Nutzung des Gutscheins auf seinem Warenkorbregel-Bildschirm und Ihre Bestellliste (gefiltert oder durchsucht nach Gutscheincode) oder ein Analyse-/Berichtsmodul genau, wie viel diese Aktion eingebracht hat.

Der letzte Punkt ist ein stiller Vorteil, wenn Sie das Banner mit einer codierten Warenkorbregel verknüpfen: Der Code ist Ihr eigener Tracking-Pixel. Jede Bestellung, die ihn verwendet hat, ist ein Banner-Klick, den Sie direkt im Back Office als realen Umsatz zählen können.

Gute Aktionsbanner sind einfach, klar und ehrlich. Sie brauchen kein Designtalent — Sie brauchen einen Rabatt, der in Ihrem Back Office bereits live ist, eine klare Botschaft, die dazu passt, eine lesbare Überschrift, einen Button, der sagt, was zu tun ist, und einen Link, der auf der richtigen Seite landet. Die Design-Tools sind kostenlos, die Größen sind bekannt, und PrestaShop bietet bereits Stellen, an denen Sie das Banner platzieren können. Die Arbeit, die wirklich etwas bewegt, ist nicht die Grafik; sie besteht darin, Banner und Warenkorbregel dem Kunden exakt dieselbe wahre Aussage zu vermitteln.

Häufig gestellte Fragen

Brauche ich Designkenntnisse, um ein Aktionsbanner zu erstellen?

Nein. Ein starkes Rabattbanner ist vor allem Zurückhaltung — ein Angebot, eine große lesbare Überschrift, hoher Kontrast und ein klarer Button. Die kostenlose Canva-Version bietet Vorlagen in Webgrößen, in die Sie Ihren Text einsetzen; viele der am besten konvertierenden Banner sind einfach fette Schrift auf einer einfarbigen Fläche, ganz ohne Foto. Die Fähigkeit liegt darin, eine Vorlage auszuwählen und sie nicht zu überarbeiten.

Welche Größe sollte ein Startseitenbanner in PrestaShop haben?

Das hängt von Ihrem Theme ab, aber ein Hero-Banner über die volle Breite der Startseite liegt häufig bei etwa 1920 × 600-800px, ein Kategoriebanner bei etwa 1200 × 300-400px und ein Sidebar-Banner bei 300 × 250 oder 300 × 600px. Erstellen Sie immer eine separate mobile Version (etwa 750 × 750 oder 750 × 500px) mit relativ größerer Schrift — ein auf ein Smartphone gequetschtes Desktop-Banner wird unlesbar, und in den meisten Shops kommt mehr als die Hälfte des Traffics von Mobilgeräten.

Wo füge ich das Banner ein — im nativen Slider oder in einem Modul?

Für eine gelegentliche Rabattaktion, die Sie einmal einrichten und dann laufen lassen, ist der integrierte ps_imageslider (Module → Modul-Manager → Konfigurieren) kostenlos und ausreichend — Bild hochladen, Link setzen. Wenn Sie häufig Aktionen fahren und separate mobile Bilder, Text- und Overlays für Handlungsaufforderungen oder mehrere Bannergruppen auf der Website brauchen, nimmt Ihnen ein dediziertes Modul wie Banner Revolution die wiederkehrende Back-Office-Arbeit ab. Vermeiden Sie es, das Theme-Template direkt zu bearbeiten, sofern es keine andere Option gibt, denn ein Update kann diese Änderung überschreiben.

Soll ich den Rabattcode auf dem Banner zeigen oder verstecken?

Zeigen Sie ihn. Wenn die Warenkorbregel einen Code benötigt, setzen Sie genau diesen Code auf das Banner ("Code SUMMER20 verwenden"). Ein Gutscheinfeld ohne sichtbaren Code schickt Kunden zu Google, um nach einem zu suchen — und manchmal kommen sie nicht zurück. Wenn die Warenkorbregel automatisch ohne Code greift, kündigt das Banner nur das Angebot an und verlinkt weiter; der Preis ist bereits reduziert, wenn der Kunde ankommt.

Wie weiß ich, ob ein Banner tatsächlich funktioniert hat?

Fügen Sie dem Banner-Link UTM-Parameter hinzu (zum Beispiel ?utm_source=homepage&utm_campaign=summer-sale), damit die Klicks in Ihrer Analyse als benannte Quelle erscheinen, und beobachten Sie Klickrate, Konversion nach dem Klick und Umsatz. Wenn Sie das Banner mit einem eindeutigen Gutscheincode verknüpft haben, zeigen Warenkorbregel-Bildschirm und Bestellliste genau, wie viele Bestellungen ihn genutzt haben — der Code dient gleichzeitig als Tracking-Pixel, den Sie als realen Umsatz auswerten können.