Share
Efectuarea magazinului Shopify mai intuitiv este o modalitate foarte bună de a converti mai multe vânzări și de a obține un număr mai mare de articole pe checkout. Combinându-vă cu afișarea produselor într-o listă simplă, putem face experiența adăugării în coș cât mai simplu decât o operație cu un singur clic, fără a fi nevoie să navigați la pagina cu înregistrări de produse.
Această modificare poate funcționa într-o listă de grilă sau pe listă și într-adevăr are nevoie doar de câteva modificări pentru ca aceasta să funcționeze și este ușor de extensibil. Deci, să începem și să maximizăm monetizarea magazinului dvs.!
Iată un exemplu despre ceea ce puteți crea cu această modificare. Avem un magazin care vinde monede comemorative, iar pentru ușurința utilizării, utilizatorul poate selecta cantitatea fiecărei monede și poate adăuga în coș fără a părăsi pagina.
Acest lucru este realizat printr-un apel AJAX scris în JavaScript, care trimite o cerere API-ului Shopify. În esență, browserul este capabil să trimită formularul printr-o solicitare de fond și să păstreze utilizatorul pe pagină.
Pentru a face acest lucru, trebuie să modificăm tema Shopify, deci conectați-vă la administratorul dvs. și intrați în Magazin online și apoi tematică (sau pentru o scurtătură, apăsați G W T).
Acum faceți clic pe ... buton pe tema și alegeți Editați HTML / CSS. În această secțiune, uitați-vă în partea stângă și faceți clic pe fragmente de cod și apoi adăugați un fragment nou.
Apelați-vă fragmentul ajaxify-Cart și faceți clic pe Creați un fragment.
Deschideți acum acest fișier, selectați toate și copiați conținutul în ajaxify-cart.liquid fragmentul care tocmai a fost creat.
Asigură-te că Salvați modificările înainte de a ieși. Dacă doriți să schimbați textul căruciorului ajaxify, vă puteți uita la schimbarea șirurilor din acest fișier, cum ar fi addToCartBtnLabel. Pentru mai multe informații despre configurație, citiți fișierul readme pentru căruciorul ajaxify.
Acum, în interiorul directorului de planuri, faceți clic pe fișierul theme.liquid. Găsiți sfârșitul
% include 'ajaxify-cart'%
Aceasta va include ajaxify-Cart fragmentul pe care tocmai l-ați adăugat la toate paginile, astfel încât codul să fie disponibil atunci când îl sunăm în etapa următoare.
Puteți include ajaxify-Cart și alte fragmente, de asemenea, în interiorul
Asigurați-vă că ați salvat dvs. theme.liquid înainte de a ieși din fereastră.
Acum, dacă aveți baza pentru ajax cart, puneți-vă la dispoziție câteva modificări pentru a utiliza mai multe caracteristici ale API-ului Shopify.
Să adăugăm un câmp de cantități la formular prin modificarea temei listei de produse. Consultați fișierele de fragment de temă pentru a găsi formularul de adăugat în coș; îl puteți modifica după cum urmează:
Acum salvați fișierul și aruncați o privire în browser și veți avea, de asemenea, un câmp cantitate pe formularul dvs..
Vizitați magazinul dvs. și mergeți la orice produs și, dacă totul a fost planificat, butonul de adăugare la coș cu câmpul cantitate va fi adăugat în coș, fără a reîmprospăta pagina.
Dacă aceasta nu funcționează, verificați pașii anteriori și căutați în consola de erori a instrumentelor de dezvoltare web a browserului dvs. pentru a vedea dacă există erori raportate.
Pentru a afișa colecția dvs. într-o listă, vom avea nevoie de un CSS pentru a face acest lucru. Modificați fișierul CSS al temei și adăugați următoarele pentru a realiza acest lucru.
Notă: Rețineți că unele teme pot să difere în mod diferit de tema pe care am folosit-o, tema Pacific, dar să adaptăm această cunoaștere la tema dvs., să știți că principiul de bază este adăugarea plutește la stânga; combinate cu setările de lățime.
.product-list-item-title font-size: 16px; linia-înălțime: 22px; margine: 5px 0 0; plutește la stânga; lățime: 50%; .product-list-item-price float: left; lățime: 10%; margin-top: 5px .product-list-item-details form float: left; lățime: 30%;
Pentru a face acest lucru receptiv pentru a lucra pe mobil și desktop, va trebui să utilizați interogări media, cum ar fi următoarele, pentru a șterge float:
@media (min-width: 1020px) .product-list-item-title-list font-size: 16px; linia-înălțime: 22px; margine: 5px 0 0; plutește la stânga; lățime: 50%; culoare: # 000 .product-list-item-price-list float: left; lățime: 10%; marginea superioară: 5px .product-list-item-details-list form float: left; lățime: 30%; numai în ecranul @media și (min-device-width: 320px) și (max-device-width: 480px) și -webkit-min-device-pixel-ratio: -list font-size: 16px; linia-înălțime: 22px; margine: 20px 0 0; float: none; .product-list-item .product-list-item-price-list float: none; padding-left: 90px;
Spuneți, de exemplu, că doriți doar să afișați butoanele din colecții, nu pe pagina dvs. de pornire. Acest lucru se poate face cu ușurință prin adăugarea unui fișier condițional la fișierul dvs. template lichid.
Deschideți șablonul și adăugați următoarea condiție în care doriți să apară butonul Adăugare în coș, de exemplu în interiorul listei de produse pe care am adăugat cantitatea. Adaugă % if collection.title% condiționată ca în următorul cod:
% if collection.title%% endif%
Puteți specifica orice criteriu vă place în loc de % if collection.title% dacă preferați să verificați o altă valoare, cum ar fi dacă produsul este în stoc sau ce categorie sau etichete a aplicat.
Puteți schimba CSS-ul temei pentru a modifica afișajul căruciorului ajax și pentru al regla în conținutul inimii. Unele clase utile de modificat sunt .cos-count și # cart-count a: primul.
Pentru a specifica valoarea adăugată în coș, puteți modifica și linkul pentru a vedea căruciorul cu clasele #gocart p a, #cart, și .checkout em.
Pentru a modifica numărul total de elemente, uitați-vă la .item-count clasă.
În plus, la sfârșitul anului ajaxify-cart.liquid fragment sunt următoarele culori pe care le puteți edita.
.ajaxified-cart-feedback afișare: bloc; linia-înălțime: 36px; font-size: 90%; vertical-aliniere: mijloc; .ajaxified-cart-feedback.success culoare: # 3D9970; .ajaxified-cart-feedback.error culoare: # FF4136; .ajaxificat-cart-feedback-ul border-bottom: 1px solid;
Schimbați alinierea, marginile și umplutura pentru a se potrivi cu tema dvs. și pentru a obține cel mai bun afișaj pe care îl puteți utiliza pentru utilizatorii finali.
Nu uitați să verificați rezoluțiile mobile pentru a vedea cum funcționează coșul ajax. Este posibil să fie necesar să adăugați anumite interogări media, astfel încât să se afișeze frumos pe toate afișajele.
Așa cum am menționat mai devreme, puteți utiliza următoarele condiționări media pentru a verifica acest lucru:
@media (min-width: 1020px) / * Clasele intră aici pentru ecranul cu ecran lat * / @media numai și (min-device-width: 320px) și (-webkit- min-device-pixel-ratio: 2) / * Clasele merg aici pentru dispozitivele mobile * /
Deci aveți acum o componentă de coș de cumpărături ajaxificată în magazinul dvs., ceea ce înseamnă că fluxul de lucru al achiziționării este oarecum raționalizat pentru utilizatorul final. Sperăm că acest lucru va duce la mai multe conversii. În combinație cu afișarea produselor dvs. într-o listă cu setarea cantității, probabilitatea unei comenzi mai mari a crescut într-o oarecare măsură.
Pentru site-urile care oferă consumabile deseori achiziționate și pentru cei care încearcă să ofere o gamă largă de achiziții multiple într-un singur checkout, carul ajaxify funcționează foarte bine.
Mergeți mai departe, puteți să adăugați mai multe elemente ajax pe site-ul dvs. Dacă da, primul dvs. punct de referință ar fi API Shopify și separarea sursei furnizate pentru coșul de cumpărături (ajaxify-cart.liquid) să se uite mai atent la modul în care sunt efectuate apelurile.
O înțelegere de bază a JavaScript și AJAX ar fi necesară pentru a face acest lucru, dar nu vă faceți griji dacă sunteți un nou-venit - într-adevăr lucruri de bază într-adevăr.
Toate procesarea pentru un apel AJAX poate fi găsită în $ .ajax secțiune a fișierului și mai multe informații despre cum funcționează acest lucru pe site-ul jQuery.
Sper că vă place să vă modificați magazinele și să creșteți vânzările cu aceste noi concepte!
Accentsconagua