Cum să copiați ferestrele pop-up ale mărcilor de comerț electronic de top folosind OptiMonk

Dacă lucrați în industria comerțului electronic, purtați întotdeauna două pălării în timp ce faceți cumpărături online.

Sigur, cauți articole pe care le iubești cu adevărat și cauți oferte grozave la fel ca toți ceilalți. Dar ești atent și la ceea ce funcționează și ce nu pe alte site-uri de comerț electronic. Culegeți inspirație. Multe idei grozave încep astfel.

Ce se întâmplă dacă vedeți o fereastră pop-up uimitoare pe site-ul web al unei mărci de top?

Ei bine, dacă sunteți utilizator OptiMonk, puteți ajusta cu ușurință șabloanele noastre pop-up pentru ca mesajele dvs. de la fața locului să arate la fel ca cele mai uimitoare ferestre pop-up din magazine precum Adidas, American Eagle și Crocs!

În acest articol, vom analiza exact cum să creați ferestre pop-up care arată ca acele exemple uimitoare care vă inspiră.

Adidas este unul dintre cele mai mari branduri de stil de viață din lume și este un brand care dorește pentru mulți.

Compania folosește această imagine în fereastra pop-up de mai jos, oferind vizitatorilor site-ului lor șansa de a „Alătura AdiClub”. Cine nu și-ar dori să fie în acel club?

Dacă magazinul tău are și un club de loialitate, poți folosi un design similar pentru a-l promova.

Să vedem cum ar funcționa asta încercând să copiem pop-up-ul. (Nu uitați să folosiți propriile imagini și să le copiați atunci când faceți acest lucru!)

Am începe prin a alege un șablon, ca cel de mai jos, care are caracteristici similare cu cel pe care îl copiem.

Mai întâi, am adăugat copia din fereastra pop-up Adidas:

Acum să ajustem stilul pop-up-ului.

Am schimbat raza colțului pop-up-ului la 0, făcându-l un dreptunghi perfect:

Apoi, mutăm butonul de închidere la marginea ferestrei pop-up schimbând alinierea elementului:

Apoi, am schimbat și redimensionat imaginea și am adăugat un chenar alb:

Și am mărit coloana din stânga:

În cele din urmă, am făcut câteva mici modificări, cum ar fi adăugarea unui nou câmp de casetă de selectare („Da, am peste 13 ani”) și schimbarea aspectului butonului. După ce am schimbat fonturile cu unul similar pe care l-a folosit Adidas, iată cum arăta pop-up-ul nostru:

Este aproape imposibil de distins! Cu doar câteva mici modificări, am reușit să transformăm acest șablon într-un pop-up complet diferit.

Spre deosebire de pop-up-ul de la Adidas pe care tocmai l-am văzut, Fashion Nova a folosit un pop-up frumos minimalist pentru a promova o reducere de 10%. Nu există nicio imagine și nu există culori, doar text alb-negru. Chiar și fontul este un simplu sans-serif.

Ceea ce face această abordare de design este să forțeze vizitatorii să acorde atenție ofertei, deoarece asta este tot ce există pe ecran!

În plus, Fashion Nova vă solicită să alegeți dintr-o listă de „preferințe” cu privire la tipurile de produse care vă interesează. Culegerea acestor informații îi ajută să-și segmenteze clienții, asigurându-se că mesajele lor de marketing sunt relevante (puteți citi mai multe despre această abordare ). aici ).

Dacă doriți să încercați, iată cum ați putea proceda.

Încă o dată, cel mai bine este să selectați un șablon care are elemente similare cu cel pe care îl copiem. Am ales să ne bazăm pe acest șablon în stil test:

Putem folosi caracteristica Brand Kit a OptiMonk pentru a schimba toate colțurile, culorile și fonturile simultan:

Deja mult mai aproape! Mai ales după ce am adăugat logo-ul Fashion Nova în partea de sus:

Apoi, am schimbat copia:

Apoi, am adăugat câteva elemente în partea de jos pe care le avea pop-up-ul original Fashion Nova, și anume un câmp de e-mail, un câmp de casetă de selectare și două butoane:

În acest moment, aveam toate elementele de care aveam nevoie pe pop-up. Următorul pas a fost să le personalizăm pentru a arăta ca pop-up-ul Fashion Nova cu care am început.

Am început cu elementele de text din partea de sus, modificând dimensiunea și greutatea fontului:

Am redus elementele de sondaj modificându-le lățimea și înălțimea și ajustându-le ușor marginile:

Ultimul pas a fost să personalizați câmpul de e-mail și caseta de selectare:

Si butoanele:

Totul este gata! Cât de uimitor arată asta?

În loc să folosească o casetă de tip pop-up lightbox pentru a solicita vizitatorilor site-ului web să se aboneze la lista lor de e-mail, American Eagle a adoptat o abordare diferită prin crearea unei bare lipicioase care apărea în partea de jos a paginii lor web.

Barele lipicioase nu atrag la fel de atenție precum ferestrele pop-up, dar asta înseamnă că nu întrerup experiența de navigare a utilizatorului în aceeași măsură ca ferestrele pop-up.

Pentru unele magazine care nu încearcă în mod activ să-și dezvolte lista cât mai repede posibil, o bară lipicioasă este o soluție bună pentru a aduna câteva e-mailuri, oferind în același timp cea mai bună experiență posibilă fără întreruperi.

Dacă sună ca dvs., puteți crea o bară lipicioasă la fel ca a lui American Eagle, începând cu acest șablon:

Primul pas pe care l-am făcut a fost eliminarea imaginii din stânga:

Apoi, am schimbat copia și am schimbat formatarea pentru a se potrivi cu fonturile și dimensiunea pe care American Eagle le-a folosit:

După personalizarea câmpului și butonului de e-mail, am adăugat casete de selectare pentru „Toate e-mailurile” și „Airee Emails” (din moment ce nu avem acces la barele de comutare):

Și asta a fost!

Ultimul pop-up pe care îl vom copia este un pop-up clasic de înscriere prin e-mail de la Crocs.

Să începem cu acest șablon, care arată deja destul de asemănător:

Am eliminat elementele inutile din pop-up și am actualizat imaginea:

Apoi, am schimbat culorile fundalului și ale textului:

Apoi, am actualizat copia și am adăugat un chenar alb în jurul întregului pop-up:

Și după ce am mutat butonul de închidere la marginea ferestrei pop-up, am terminat:

Identic, nu?

După cum puteți vedea, combinația dintre gama largă de șabloane OptiMonk și editorul său puternic drag-and-drop înseamnă că puteți copia orice pop-up pe care îl vedeți online. Este doar o chestiune de a adăuga elementele potrivite și de a schimba setările potrivite.

Cu acest articol, cu siguranță nu am încercat să vă spunem să copiați pur și simplu ferestrele pop-up ale altor mărci. Ferestrele pop-up ar trebui să se potrivească cu personalitatea, aspectul și senzația magazinului dvs. Și sperăm că ai învățat cât de ușor poți face un șablon să arate complet diferit pentru a se potrivi cu stilul tău!

Și, desigur, să te inspiri de mărci de succes nu va strica! 😉

Există ferestre pop-up pe care le-ați văzut pe web și care ți-au plăcut? Spune-ne în comentarii!