So kopieren Sie die Popups der Top-E-Commerce-Marken mit OptiMonk

Wenn Sie in der E-Commerce-Branche arbeiten, tragen Sie beim Online-Shopping immer zwei Hüte auf.

Sicher, Sie suchen nach Artikeln, die Sie wirklich lieben, und suchen nach tollen Angeboten, genau wie alle anderen auch. Aber Sie achten auch darauf, was auf anderen E-Commerce-Websites funktioniert und was nicht. Sie sammeln Inspiration. Viele großartige Ideen nehmen so ihren Anfang.

Was passiert, wenn Sie ein beeindruckendes Popup auf der Website einer Top-Marke sehen?

Nun, wenn Sie ein OptiMonk-Benutzer sind, können Sie unsere Popup-Vorlagen einfach anpassen, damit Ihre Nachrichten auf der Website genauso aussehen wie die erstaunlichsten Popups von Geschäften wie Adidas, American Eagle und Crocs!

In diesem Artikel gehen wir genau darauf ein, wie Sie Popups erstellen, die wie diese erstaunlichen Beispiele aussehen, die Sie inspirieren.

Adidas ist eine der größten Lifestyle-Marken der Welt und für viele eine aufstrebende Marke.

Das Unternehmen nutzt dieses Bild im Popup unten und bietet seinen Website-Besuchern die Möglichkeit, „AdiClub beizutreten“. Wer möchte nicht in diesem Club sein?

Wenn Ihr Geschäft auch einen Treueclub hat, können Sie ein ähnliches Design verwenden, um dafür zu werben.

Mal sehen, wie das funktionieren würde, indem wir versuchen, das Popup zu kopieren. (Denken Sie daran, Ihre eigenen Bilder zu verwenden und zu kopieren, wenn Sie dies tatsächlich tun!)

Wir würden damit beginnen, eine Vorlage wie die untenstehende auszuwählen, die ähnliche Funktionen wie die hat, die wir kopieren.

Zuerst haben wir die Kopie aus dem Adidas-Popup hinzugefügt:

Lassen Sie uns nun den Stil des Popups anpassen.

Wir haben den Eckradius des Popups auf 0 geändert, wodurch es ein perfektes Rechteck wird:

Dann verschieben wir die Schließen-Schaltfläche an den Rand des Popups, indem wir die Ausrichtung des Elements ändern:

Als Nächstes haben wir das Bild geändert, seine Größe angepasst und einen weißen Rand hinzugefügt:

Und wir haben die linke Spalte größer gemacht:

Schließlich haben wir einige kleine Änderungen vorgenommen, wie das Hinzufügen eines neuen Kontrollkästchens („Ja, ich bin über 13 Jahre“) und das Ändern des Aussehens der Schaltfläche. Nachdem wir die Schriftarten in eine ähnliche Schriftart geändert hatten, die Adidas verwendet hat, sah unser Popup so aus:

Es ist fast nicht zu unterscheiden! Mit nur ein paar kleinen Änderungen konnten wir diese Vorlage in ein völlig anderes Popup verwandeln.

Im Gegensatz zu dem Popup von Adidas, das wir gerade gesehen haben, hat Fashion Nova ein wunderschön minimalistisches Popup verwendet, um für einen Rabatt von 10 % zu werben. Es gibt kein Bild und keine Farben, nur schwarz-weißen Text. Sogar die Schriftart ist eine einfache serifenlose Schrift.

Dieser Designansatz zwingt Besucher dazu, auf das Angebot zu achten – denn das ist alles, was auf dem Bildschirm zu sehen ist!

Darüber hinaus bittet Fashion Nova Sie, aus einer Liste mit „Präferenzen“ auszuwählen, an welchen Arten von Produkten Sie interessiert sind. Das Sammeln dieser Informationen hilft ihnen, ihre Kunden zu segmentieren und sicherzustellen, dass ihre Marketingbotschaften relevant sind (Sie können mehr über diesen Ansatz lesen ). hier ).

Wenn Sie es versuchen möchten, erfahren Sie hier, wie Sie vorgehen können.

Auch hier ist es am besten, eine Vorlage auszuwählen, die ähnliche Elemente wie diejenige hat, die wir kopieren. Wir haben uns entschieden, unsere auf dieser Vorlage im Quiz-Stil zu basieren:

Wir können die Brand Kit-Funktion von OptiMonk verwenden, um alle Ecken, Farben und Schriftarten auf einmal zu ändern:

Schon viel näher! Besonders nachdem wir das Fashion Nova-Logo oben hinzugefügt haben:

Dann haben wir die Kopie geändert:

Als nächstes haben wir unten ein paar Elemente hinzugefügt, die das ursprüngliche Fashion Nova-Popup hatte, nämlich ein E-Mail-Feld, ein Kontrollkästchen-Feld und zwei Schaltflächen:

An diesem Punkt hatten wir alle Elemente, die wir brauchten, im Popup. Der nächste Schritt bestand darin, sie so anzupassen, dass sie wie das Fashion Nova-Popup aussehen, mit dem wir begonnen haben.

Wir haben mit den Textelementen oben begonnen und die Schriftgröße und -stärke geändert:

Wir haben die Umfrageelemente verkleinert, indem wir ihre Breite und Höhe geändert und ihre Ränder leicht angepasst haben:

Der letzte Schritt bestand darin, das E-Mail-Feld und das Kontrollkästchen anzupassen:

Und die Knöpfe:

Alles erledigt! Wie toll sieht das aus?

Anstatt ein Lightbox-Popup zu verwenden, um Website-Besucher aufzufordern, ihre E-Mail-Liste zu abonnieren, verfolgte American Eagle einen anderen Ansatz, indem es eine klebrige Leiste erstellte, die am Ende ihrer Webseite erschien.

Sticky Bars sind nicht so aufmerksamkeitsstark wie Popups, aber das bedeutet, dass sie das Surferlebnis des Benutzers nicht im gleichen Maße wie Popups unterbrechen.

Für einige Geschäfte, die nicht aktiv versuchen, ihre Liste so schnell wie möglich zu erweitern, ist eine Sticky Bar eine gute Lösung, um einige E-Mails zu sammeln und gleichzeitig ein möglichst unterbrechungsfreies Erlebnis zu bieten.

Wenn das nach Ihnen klingt, können Sie eine Klebeleiste wie die von American Eagle erstellen, indem Sie mit dieser Vorlage beginnen:

Der erste Schritt, den wir unternommen haben, war das Entfernen des Bildes auf der linken Seite:

Dann haben wir die Kopie geändert und die Formatierung geändert, um sie an die von American Eagle verwendeten Schriftarten und Größen anzupassen:

Nach dem Anpassen des E-Mail-Felds und der Schaltfläche haben wir Kontrollkästchen für „Alle E-Mails“ und „Airee-E-Mails“ hinzugefügt (da wir keinen Zugriff auf Umschaltleisten haben):

Und das war’s!

Das letzte Popup, das wir kopieren, ist ein klassisches E-Mail-Anmelde-Popup von Crocs.

Beginnen wir mit dieser Vorlage, die bereits ziemlich ähnlich aussieht:

Wir haben die unnötigen Elemente aus dem Popup entfernt und das Bild aktualisiert:

Als nächstes haben wir die Farben des Hintergrunds und des Textes geändert:

Dann haben wir die Kopie aktualisiert und einen weißen Rahmen um das gesamte Popup hinzugefügt:

Und nachdem wir die Schließen-Schaltfläche an den Rand des Popups verschoben hatten, waren wir fertig:

Identisch, oder?

Wie Sie sehen können, bedeutet die Kombination aus der großen Auswahl an Vorlagen von OptiMonk und seinem leistungsstarken Drag-and-Drop-Editor, dass Sie jedes Popup kopieren können, das Sie online sehen. Es geht nur darum, die richtigen Elemente hinzuzufügen und die richtigen Einstellungen zu ändern.

Mit diesem Artikel wollten wir Ihnen sicherlich nicht sagen, dass Sie einfach die Popups anderer Marken kopieren sollen. Ihre Popups sollten der Persönlichkeit, dem Aussehen und der Atmosphäre Ihres Shops entsprechen. Und hoffentlich haben Sie gelernt, wie einfach Sie eine Vorlage ganz anders aussehen lassen können, um sie Ihrem Stil anzupassen!

Und natürlich kann es nicht schaden, sich von erfolgreichen Marken inspirieren zu lassen! 😉

Gibt es Popups, die Sie im Internet gesehen haben und die Ihnen gefallen haben? Lass es uns in den Kommentaren wissen!