Cum să creșteți ratele de conversie mobile pentru magazinele online

Oamenii petrec mai mult timp pe telefoanele lor decât oricând. Îi folosim pentru aproape orice - bancar, investiții, verificarea vremii, monitorizarea antrenamentelor, ascultarea muzicii, navigarea și, bineînțeles, cumpărăturile.

Aproape 55% din traficul site-ului vine de pe dispozitive mobile, iar 60% dintre cumpărătorii online își folosesc telefonul pentru a găsi mai întâi un produs. Dacă magazinul dvs. nu oferă o experiență perfectă pentru utilizator pe mobil, riscați să pierdeți o mare parte din clienții potențiali.

Dar cum vă puteți optimiza magazinul online pentru a crește conversiile pe dispozitive mobile?

Începeți cu o temă WordPress receptivă

O temă WordPress de înaltă calitate este punctul de plecare perfect pentru un magazin online receptiv. Tema ta este fundamentul întregului tău site, așa că alege unul care oferă o experiență grozavă pe dispozitive de toate dimensiunile.

Iată câteva sfaturi pentru evaluarea unei teme:

• Testați demonstrația temei pe tablete și telefoane. Deoarece probabil că nu dețineți dispozitive în toate dimensiunile posibile de ecran, puteți utiliza un site precum Website Responsive Testing Tool pentru a simula experiența. Elementele demo ar trebui să arate bine pe toate dimensiunile de ecran - nimic nu trebuie tăiat, greu de citit sau greu de utilizat.
• În timp ce vă uitați la demonstrația temei, redimensionați fereastra browserului. Conținutul trebuie ajustat în consecință și nimic nu trebuie întrerupt.
• Căutați funcții receptive în descrierea temei. Ar trebui să menționeze în mod specific „designul responsiv” sau să discute modul în care tema se adaptează pentru dispozitivele mobile.
• Rulați demonstrația temei prin instrumentul de testare Google pentru dispozitive mobile.
• Verificați recenziile. Citiți evaluări și recenzii de la utilizatorii temei. Atenție la orice comentarii negative despre designul responsive.

De asemenea, este important ca tema dvs. să se integreze cu WooCommerce. Acest lucru va preveni problemele de receptivitate, împreună cu orice alte conflicte potențiale.

Tema Storefront satisface toate cele de mai sus și este flexibilă și ușor de personalizat. În plus, are o varietate de teme pentru copii concepute pentru anumite industrii - modă, jucării, produse digitale, rezervări și multe altele.

Țineți cont de utilizarea mobilă

Utilizabilitatea este cât de eficient și eficient pot interacționa cumpărătorii cu site-ul dvs. Utilizarea slabă afectează negativ vânzările, conversiile, percepția mărcii și SEO. Când vă revizuiți experiența mobilă, gradul de utilizare ar trebui să fie prioritatea dvs. principală. Luați în considerare următoarele:

• Gândește-te cu degetul mare. Utilizatorii de dispozitive mobile vor interacționa cu site-ul dvs. folosind doar degetele lor mari. Toate elementele pe care se poate face clic - linkuri, butoane, elemente de meniu, imagini - trebuie să fie suficient de mari pentru ca un vizitator al site-ului să poată atinge cu ușurință. Dacă sunt mici sau prea apropiați unul de celălalt, cineva ar putea face clic pe un lucru greșit din greșeală.
• Evitați ferestrele pop-up și alte distrageri. Deoarece ecranele mobile sunt atât de mici, este important să acordați prioritate ceea ce le arătați vizitatorilor. Ferestrele pop-up care acoperă întregul ecran mobil pot perturba experiența utilizatorilor și chiar pot avea efecte negative asupra clasamentului în motoarele de căutare; același lucru este valabil și pentru reclame și alte notificări. Dacă decideți să utilizați acest tip de conținut, asigurați-vă că ocupă doar o parte a ecranului și că este ușor de respins.
• Implementați filtre de produs . Dacă oferiți o mulțime de produse, este posibil ca un cumpărător online să fie nevoit să deruleze o perioadă pentru a găsi ceea ce caută. Acest lucru poate fi deosebit de dificil pe ecranele mobile care afișează doar câteva produse odată. Clienții tăi s-ar putea să fie frustrați și să renunțe înainte de a face o achiziție. Filtrele îi ajută să restrângă selecțiile în funcție de ceea ce caută. Încercați o extensie precum Filtrele de produse WooCommerce pentru a oferi funcționalitate de sortare.
• Utilizați fonturi suficient de mari . Dacă textul site-ului dvs. este prea mic, poate fi foarte dificil pentru utilizatorii de dispozitive mobile să citească ceva - nu ar trebui să fie nevoiți să ciupească și să mărească pentru a afla despre produsele dvs. În funcție de site-ul dvs. și de opțiunile de font, poate fi necesar să setați diferite dimensiuni de font pentru dispozitivele mobile.
• Despărțiți textul. Dacă aveți pagini cu multe informații, împărțiți-le în segmente mai mici, care sunt mai ușor de navigat pe ecranele mici. Puteți face acest lucru cu acordeoane, comutatoare sau puncte marcatoare. În postările lungi de blog, adăugați linkuri către subsecțiuni care permit utilizatorilor să treacă direct la subiecte interesante.

Simplificați pagina de plată

În timp ce cumpărăturile pe dispozitive mobile au crescut semnificativ de-a lungul anilor, conversiile nu sunt atât de mari. De fapt, rata medie de conversie a comerțului electronic pe mobil este de doar 2,03%, comparativ cu desktop-ul de 3,83%.

Procesul dvs. de plată joacă un rol esențial în realizarea vânzărilor. Faceți-l cât mai simplu posibil pe dispozitivele mobile pentru a îmbunătăți ratele de conversie. Dacă este nevoie de prea mult timp pentru clienții tăi să facă o achiziție, ei vor renunța și vor face cumpărături în altă parte.

Eliminați câmpurile inutile

Începeți prin a arunca o privire atentă asupra informațiilor de care aveți nevoie pentru finalizarea plății. Este totul necesar? Probabil veți descoperi că există câmpuri pe care le puteți elimina:

• Dacă nu vindeți companiilor, eliminați câmpul Nume companie.
• Dacă nu vă puteți gândi la un scenariu în care ar putea fi necesar să vă sunați clienții, eliminați câmpul Telefon.
• Dacă nu acceptați note, eliminați câmpul Note de comandă.

Cu cât sunt mai puține câmpuri, cu atât mai bine, mai ales pe mobil. Citiți mai multe despre cum să personalizați câmpurile de plată WooCommerce.

Permiteți checkout-ului oaspeților

Conturile de clienți sunt grozave și accelerează finalizarea achiziției pentru cumpărătorii care revin prin completarea automată a informațiilor lor și salvând datele cardului de credit. Dar cum rămâne cu clienții noi?

Nu toată lumea vrea să-și creeze un cont în magazinul tău, mai ales pe dispozitivele mobile pe care doresc să verifice cât mai repede posibil. De fapt, se consideră că solicitarea de conturi de clienți contribuie la 35% din cărucioarele abandonate.

Pentru a permite finalizarea plății oaspeților cu WooCommerce:

1. Navigați la WooCommerce → Setări → Conturi și confidențialitate.
2. Selectați Permiteți clienților să plaseze o comandă fără cont.
3. Faceți clic pe butonul Salvați modificările din partea de jos a paginii.

Aflați cum să determinați dacă achiziția de oaspeți este potrivită pentru magazinul dvs.

Acceptați autentificarea socială

Clienții dvs. sunt probabil conectați la conturi de rețele sociale de pe dispozitivele lor mobile. Activarea conectării sociale pe site-ul dvs. le permite acestora să se conecteze utilizând Facebook, Twitter, Google, Amazon și altele pentru a simplifica finalizarea plății și pentru a nu fi nevoiți să-și creeze un cont nou.

Activează WooCommerce Social Login.

Acceptați mai multe opțiuni de plată

Acceptarea mai multor forme de plată accelerează finalizarea plății. Deși este posibil să permiteți și tranzacțiile cu cardul de credit, activarea opțiunilor precum PayPal sau Amazon Pay le permite clienților să plătească folosind conturile existente, mai degrabă decât să scoată un card de credit și să introducă toate detaliile.

Vedeți integrările gateway-ului de plată WooCommerce

Faceți câmpurile de casă suficient de înalte

Este important ca clienții să poată completa cu ușurință câmpurile de plată de pe site-ul dvs. Asigurați-vă că câmpurile sunt suficient de înalte pentru ca aceștia să atingă și să completeze informații fără a fi nevoie să măriți. Puteți face acest lucru cu un simplu CSS.

Începeți prin a utiliza inspectorul browserului de pe pagina dvs. de plată. Acest lucru vă va ajuta să identificați clasa fiecărui câmp individual. Apoi, utilizați următorul cod pentru fiecare clasă specifică; câmpul E-mail este folosit în acest exemplu.

 /** Customize height of checkout fields **/ input[type='email'].input-text{ padding: 100px !important; }

Ajustați umplutura în funcție de site-ul dvs. specific și de setările curente; poate fi necesar să te joci puțin pentru a găsi ceea ce funcționează. De asemenea, puteți personaliza dispozitivele specifice pentru care se aplică acest cod, utilizând interogări media.

Notă: Dacă nu sunteți familiarizat cu codul și cu rezolvarea potențialelor conflicte, poate doriți să selectați un WooExpert sau un dezvoltator pentru asistență. Nu putem oferi asistență pentru personalizări conform Politicii noastre de asistență.

Editați paginile produselor

Este important ca și paginile individuale ale produselor să fie receptive. Clienții ar trebui să poată citi detaliile produsului, răsfoi prin fotografii și să adauge articole în coșul lor.

Faceți butonul Adaugă în coș lipicios

Un buton lipicios Adaugă în coș urmărește un cumpărător în jos pe pagină în timp ce citește informații despre produs. Dacă sunt convinși să cumpere, nu trebuie să deruleze până în sus pentru a face o achiziție. De fapt, s-a dovedit că un buton Adaugă în coș crește comenzile cu 7,9%! Adăugați acest CSS pentru ca butonul să fie lipicios pe dispozitivele mobile:

 /** Make the Add to Cart button sticky **/ @media only screen and (max-width: 900px) { .cart { position: fixed; bottom: 0; background: #ffffff; width: 100%; z-index: 3; } }

Poate fi necesar să vă jucați puțin cu CSS, în funcție de tema și designul site-ului dvs. Dar dacă nu doriți să editați codul, puteți utiliza și un plugin precum Sticky Add to Cart pentru WooCommerce.

Faceți imaginile intuitive

Atunci când cumpărătorii ajung pe pagina unui produs, se așteaptă să poată glisa galeria de imagini pentru a vedea mai multe fotografii și să-și folosească degetele pentru a mări un articol. Aceste gesturi mobile sunt atât de intuitive încât sunt făcute aproape subconștient. Asigurați-vă că site-ul dvs. le acceptă.

Adăugați săgeți sau puncte pentru a indica când există mai multe fotografii. În caz contrar, utilizatorii tăi s-ar putea să nu știe nici măcar că pot glisa!

Prioritizează informațiile importante

Asigurați-vă că clienții pot vizualiza informațiile esențiale despre produse fără a fi nevoie să derulați foarte departe. Prioritizează prețurile, variațiile (culoare, mărime etc.), reduceri, recenzii și alte detalii care sunt specifice produselor tale: dacă vinzi îmbrăcăminte, materialul ar putea fi important. Sau, dacă sunteți un magazin de electronice, poate doriți să evidențiați garanția care vine cu fiecare achiziție.

Informații suplimentare, cum ar fi descrierile și specificațiile complete ale produselor (instrucțiuni de spălare, SKU-uri, ingrediente etc.) pot fi găsite mai jos pe pagină. În acest fel, dacă clienții tăi doresc mai multe informații, le pot găsi cu ușurință, dar dacă sunt mulțumiți doar de elementele de bază, nu vor fi copleșiți.

Simplificați-vă meniul mobil

Păstrați meniul principal pe dispozitivele mobile cât mai simplu posibil. O listă lungă de pagini va copleși și deruta vizitatorii site-ului. Reduceți-l la elementele esențiale, apoi acordați prioritate ordinii în care sunt enumerate, cu paginile cele mai importante mai întâi.

Lotul bun își scurtează meniul mobil pentru a include doar cinci pagini, pe lângă link-urile Conectare și Coș. Este simplu și la obiect.

Dacă trebuie să includeți o mulțime de pagini, încercați să utilizați submeniuri cu comutatoare extensibile. Limitați elementele principale din meniu și afișați elementele din submeniu atunci când un utilizator le extinde pe fiecare. Asigurați-vă că utilizați simboluri precum săgeți pentru a indica faptul că un meniu se extinde!

Nuria oferă cinci elemente de meniu principale pe mobil cu săgeți lângă fiecare, indicând faptul că există mai multe opțiuni. Când un utilizator dă clic, meniul principal alunecă pentru a dezvălui un submeniu cu un buton clar „înapoi”. Acest lucru le permite să afișeze toate opțiunile necesare fără a-și copleși clienții.

Există mai multe moduri de a afișa meniurile mobile, așa că alege-l pe cel mai potrivit pentru publicul tău. Ei includ:

• Un meniu de hamburgeri . Simbolul hamburgerului este format din trei linii stivuite vertical una peste alta. Meniul este ascuns până când un utilizator dă clic pe simbol. Aceasta este o opțiune excelentă pentru site-urile cu multe pagini, dar poate fi mai greu de găsit pentru vizitatori.
• Un meniu cu file . Aceasta seamănă foarte mult cu navigarea tipică pe desktop și listează elementele de meniu pe orizontală în partea de sus a site-ului. Aceasta ar trebui folosită numai pentru meniuri cu linkuri minime; utilizatorii nu ar trebui să fie nevoiți să mărească sau să deruleze pentru a vedea toate elementele.
• Un buton de acțiune plutitor . Un buton cu o pictogramă de meniu plutește pe pagină și urmărește un utilizator atunci când acesta derulează. Când faceți clic, se extinde pentru a afișa meniul. Aceasta este o modalitate bună de a vă menține accesibil meniul principal, dar poate distra atenția sau ascunde conținutul.
• Un meniu drop-down . O bară de meniu din partea de sus a paginii se deschide când se face clic pentru a dezvălui opțiunile paginii. Ocupă puțin mai mult spațiu decât meniul de hamburger, dar poate fi văzut mai ușor de vizitatorii site-ului.

De obicei, tema dvs. va include stiluri de meniu receptive. Dacă nu, sau dacă doriți să alegeți o altă opțiune, verificați aceste plugin-uri:

• Meniul WP Mobile
• ShiftNav
• Meniu receptiv

Indiferent de opțiunea pe care o alegeți, asigurați-vă că este ușor de utilizat pentru clienții dvs. și se potrivește nevoilor acestora. Și amintiți-vă, asta poate însemna crearea unui meniu mobil complet separat!

Faceți caracteristicile importante ușor de găsit

Având în vedere spațiul limitat de pe ecran pe dispozitivele mobile, este ușor ca obiectele să se piardă. Asigurați-vă că vizitatorii pot găsi rapid funcționalitatea critică.

Faceți bara de căutare vizibilă

Multe site-uri web includ o casetă de căutare în bara lor laterală, dar de obicei este împinsă în partea de jos a paginii pe dispozitivele mobile. Este posibil ca funcționalitatea de căutare din antetul desktopului să nu încapă în același spațiu pe un telefon. Dar este o funcționalitate critică pentru cumpărătorii online, care pot beneficia de capacitatea de a căuta produsul pe care și-l doresc.

O soluție excelentă este să includeți bara de căutare în meniul mobil, unde este ușor vizibilă pentru cumpărători. Unele teme oferă o setare pentru această funcționalitate, dar dacă a dvs. nu oferă, puteți realiza același lucru folosind codul personalizat.

Deschideți fișierul header.php și adăugați următoarea funcție: <?php get_search_form(); ?> <?php get_search_form(); ?> . Apoi, îl puteți stila în funcție de nevoile dvs. folosind CSS.

Și dacă nu doriți să atingeți codul, un plugin precum Ivory Search atinge aceeași funcționalitate.

Afișați clar informațiile de contact

Dacă includeți informații de contact într-un subsol sau într-o bară laterală, utilizatorii de telefonie mobilă vor avea dificultăți în a le vizualiza, deoarece trebuie să deruleze în partea de jos a paginii. Contracarați asta cu un link vizibil către pagina dvs. de contact din meniu.

De asemenea, vă recomandăm să includeți un număr de telefon și/sau o adresă de e-mail pe care se poate face clic în meniul dvs. principal, astfel încât utilizatorii să poată contacta cu ușurință. Pentru a face acest lucru:

1. Navigați la Aspect → Meniu din tabloul de bord WordPress.
2. În meniul drop-down de lângă „Selectați un meniu de editat”, alegeți meniul corect. Acesta ar fi fie meniul dvs. principal, fie meniul mobil, în funcție de modul în care ați configurat lucrurile.
3. Extindeți Linkuri personalizate în coloana din stânga.
4. În caseta URL , adăugați linkul corespunzător. Pentru un număr de telefon, adăugați tel:+18005553927, înlocuind numerele cu numărul dvs. Asigurați-vă că nu există spații sau alte simboluri. Pentru o adresă de e-mail, adăugați mailto:[email protected].
5. În caseta Link Text , adăugați textul care va fi afișat în meniul dvs. De exemplu, ați putea spune „Apelați-ne” sau „Apelați 800-555-3927”.
6. Faceți clic pe butonul Adăugați în meniu și trageți în locația aleasă.
7. Faceți clic pe butonul albastru Meniu Salvare din colțul din dreapta jos.

Când un utilizator face clic pe numărul de telefon de pe dispozitivul său mobil, acesta vă va apela automat. Când fac clic pe adresa ta de e-mail, îți va deschide un nou e-mail în aplicația lor implicită de e-mail.

Faceți căruciorul ușor accesibil

Dacă un client dorește să continue cumpărăturile după ce a adăugat un produs în coșul său, este important ca acesta să poată edita acel coș și să verifice mai târziu.

Pluginul Mini Cart pentru WooCommerce adaugă o opțiune de coș atât pentru versiunile desktop, cât și pentru cele mobile ale site-ului dvs. Pe desktop, coșul include numele articolelor, fotografiile și prețurile și permite cumpărătorilor să editeze cantitățile fără a părăsi pagina. Pe mobil, arată numărul de articole din coșul lor și totalul comenzii. În plus, cumpărătorii pot ajunge la pagina Coș cu un singur clic.

Concentrați-vă pe viteza site-ului

În timp ce viteza site-ului este importantă pe orice dispozitiv, este probabil mai mult pentru dispozitivele mici. Cumpărătorii de pe dispozitive mobile folosesc adesea conexiuni la internet mai lente sau date celulare pentru a naviga, așa că ar trebui să faceți tot posibilul pentru a vă asigura că site-ul dvs. se încarcă cât mai repede posibil. 53% dintre utilizatorii de dispozitive mobile abandonează un site dacă durează mai mult de trei secunde pentru a se încărca, iar noua indexare Google pentru dispozitive mobile prioritizează versiunea mobilă a site-ului tău.

Începeți prin a înțelege timpul actual de încărcare a site-ului dvs. Testul de viteză a site-ului GTMetrix și Pingdom vă poate ajuta să înțelegeți viteza site-ului dvs. și să vă ofere recomandări de îmbunătățire. Google PageSpeed ​​Insights oferă chiar și un test special pentru dispozitivele mobile.

Apoi, utilizați următoarele resurse pentru a vă optimiza site-ul:

• Cum să optimizați imaginile pentru a vă accelera magazinul online
• Primele lucruri de luat în considerare cu WooCommerce și Speed
• De ce este lent site-ul meu WooCommerce și cum să-l remediez
• Cum să obțineți un scor de performanță ridicat pe Google PageSpeed ​​Insights pentru WooCommerce
• Accelerează-ți site-ul WooCommerce cu aceste caracteristici Jetpack

De asemenea, poate doriți să luați în considerare activarea AMP (Accelerated Mobile Pages), un cadru construit de Google pentru a crea experiențe mobile ușoare și simplificate. Este o modalitate grozavă de a accelera postările pe blog, în special pentru anumite magazine online. Aflați mai multe despre îmbunătățirea vitezei site-ului cu AMP.

Testează-ți magazinul online pe mobil

Este important să vă testați în mod regulat magazinul și să înțelegeți cum funcționează totul pe dispozitivele mobile. Procesul pentru site-ul dvs. este similar cu pașii enumerați mai sus pentru testarea demo-urilor teme - utilizați o combinație de instrumente precum testul Google pentru dispozitive mobile și metode manuale, cum ar fi redimensionarea ferestrei browserului.

Testează totul! Faceți clic pe fiecare link; derulați prin fiecare pagină; și verificați fiecare piesă de funcționalitate. Toate aspectele site-ului dvs. ar trebui să fie ușor de vizualizat, citit și navigat pe telefoane și tablete.

Câteva mici modificări pe mobil pot face o mare diferență în ceea ce privește satisfacția clienților și conversii. Cauți mai multe sfaturi? Citiți Cum să deblocați puterea WooCommerce pe mobil.