Come copiare i popup dei migliori marchi di e-commerce utilizzando OptiMonk

Se lavori nel settore dell'e-commerce, indossi sempre due cappelli mentre fai acquisti online.

Certo, stai cercando gli articoli che ami davvero e stai cercando ottime offerte proprio come tutti gli altri. Ma stai anche tenendo d'occhio cosa funziona e cosa no su altri siti di e-commerce. Stai raccogliendo ispirazione. Molte grandi idee iniziano così.

Cosa succede se vedi uno straordinario popup sul sito Web di una delle migliori marche?

Bene, se sei un utente OptiMonk, puoi facilmente modificare i nostri modelli di popup per far sembrare la tua messaggistica in loco proprio come i popup più sorprendenti di negozi come Adidas, American Eagle e Crocs!

In questo articolo, esamineremo esattamente come creare popup che assomiglino a quegli incredibili esempi che ti ispirano.

Adidas è uno dei più grandi marchi di lifestyle al mondo ed è un marchio ambizioso per molti.

L'azienda sfrutta questa immagine nel popup sottostante, offrendo ai visitatori del proprio sito Web la possibilità di "Unirsi ad AdiClub". Chi non vorrebbe essere in quel club?

Se il tuo negozio ha anche un club fedeltà, puoi utilizzare un design simile per promuoverlo.

Vediamo come funzionerebbe provando a copiare il popup. (Ricordati di utilizzare le tue immagini e di copiarle quando lo stai effettivamente facendo!)

Inizieremo scegliendo un modello, come quello qui sotto, che abbia caratteristiche simili a quello che stiamo copiando.

Innanzitutto, abbiamo aggiunto la copia dal popup di Adidas:

Ora regoliamo lo stile del popup.

Abbiamo cambiato il raggio dell'angolo del popup su 0, rendendolo un rettangolo perfetto:

Quindi, spostiamo il pulsante di chiusura sul bordo del popup modificando l'allineamento dell'elemento:

Successivamente, abbiamo modificato e ridimensionato l'immagine e aggiunto un bordo bianco:

E abbiamo ingrandito la colonna di sinistra:

Infine, abbiamo apportato alcune piccole modifiche come l'aggiunta di una nuova casella di controllo ("Sì, ho più di 13 anni") e la modifica dell'aspetto del pulsante. Dopo aver cambiato i caratteri con uno simile utilizzato da Adidas, ecco come appariva il nostro popup:

È quasi indistinguibile! Con poche piccole modifiche, siamo stati in grado di trasformare questo modello in un popup completamente diverso.

A differenza del popup di Adidas che abbiamo appena visto, Fashion Nova ha utilizzato un popup meravigliosamente minimalista per promuovere uno sconto del 10%. Non c'è immagine e non ci sono colori, solo testo in bianco e nero. Anche il font è un semplice sans-serif.

Ciò che fa questo approccio progettuale è costringere i visitatori a prestare attenzione all'offerta, poiché è tutto ciò che c'è sullo schermo!

Inoltre, Fashion Nova ti chiede di scegliere da un elenco di "preferenze" in merito ai tipi di prodotti che ti interessano. La raccolta di queste informazioni li aiuta a segmentare i propri clienti, assicurando che i loro messaggi di marketing siano pertinenti (puoi leggere di più su questo approccio qui ).

Se vuoi fare un tentativo, ecco come potresti farlo.

Ancora una volta, è meglio selezionare un modello che abbia elementi simili a quello che stiamo copiando. Abbiamo scelto di basare il nostro su questo modello in stile quiz:

Possiamo utilizzare la funzione Brand Kit di OptiMonk per cambiare tutti gli angoli, i colori e i caratteri contemporaneamente:

Già molto più vicino! Soprattutto dopo aver aggiunto il logo Fashion Nova in alto:

Quindi, abbiamo modificato la copia:

Successivamente, abbiamo aggiunto alcuni elementi nella parte inferiore che aveva il popup originale di Fashion Nova, ovvero un campo e-mail, un campo casella di controllo e due pulsanti:

A questo punto, avevamo tutti gli elementi di cui avevamo bisogno nel popup. Il passo successivo è stato personalizzarli in modo che assomigliassero al popup Fashion Nova con cui abbiamo iniziato.

Abbiamo iniziato con gli elementi di testo in alto, modificando la dimensione e il peso del carattere:

Abbiamo ridotto gli elementi del rilievo modificandone la larghezza e l'altezza e regolandone leggermente i bordi:

L'ultimo passaggio è stato quello di personalizzare il campo e-mail e la casella di controllo:

E i pulsanti:

Tutto fatto! Quanto è fantastico?

Piuttosto che utilizzare un popup lightbox per richiedere ai visitatori del sito Web di iscriversi alla loro lista di posta elettronica, American Eagle ha adottato un approccio diverso creando una barra adesiva che è apparsa nella parte inferiore della loro pagina Web.

Le barre adesive non attirano l'attenzione come i popup, ma ciò significa che non interrompono l'esperienza di navigazione dell'utente nella stessa misura dei popup.

Per alcuni negozi che non stanno attivamente cercando di far crescere la propria lista il più rapidamente possibile, una barra adesiva è una buona soluzione per raccogliere alcune e-mail fornendo al contempo l'esperienza più senza interruzioni possibile.

Se suona come te, puoi creare una barra adesiva proprio come quella di American Eagle iniziando con questo modello:

Il primo passo che abbiamo fatto è stato rimuovere l'immagine a sinistra:

Quindi, abbiamo modificato la copia e modificato la formattazione in modo che corrisponda ai caratteri e alle dimensioni utilizzate da American Eagle:

Dopo aver personalizzato il campo e il pulsante e-mail, abbiamo aggiunto le caselle di controllo per "Tutte le e-mail" e "E-mail Airee" (poiché non abbiamo accesso alle barre di commutazione):

E questo era quello!

L'ultimo popup che copieremo è un classico popup di iscrizione e-mail di Crocs.

Iniziamo con questo modello, che sembra già abbastanza simile:

Abbiamo rimosso gli elementi non necessari dal popup e aggiornato l'immagine:

Successivamente, abbiamo cambiato i colori dello sfondo e del testo:

Quindi, abbiamo aggiornato la copia e aggiunto un bordo bianco attorno all'intero popup:

E dopo aver spostato il pulsante di chiusura sul bordo del popup, abbiamo finito:

Identico, vero?

Come puoi vedere, la combinazione dell'ampia gamma di modelli di OptiMonk e del suo potente editor drag-and-drop significa che puoi copiare qualsiasi popup che vedi online. Si tratta solo di aggiungere gli elementi giusti e modificare le impostazioni giuste.

Con questo articolo, non stavamo certamente cercando di dirti di copiare semplicemente i popup di altri marchi. I tuoi popup dovrebbero corrispondere alla personalità, all'aspetto e all'atmosfera del tuo negozio. E si spera che tu abbia imparato con quanta facilità puoi rendere un modello completamente diverso per abbinarlo al tuo stile!

E, naturalmente, trarre ispirazione da marchi di successo non farà male! 😉

Ci sono dei popup che hai visto sul web che ti sono piaciuti? Fateci sapere nei commenti!