Share
Am folosit pentru prima oară Shopify nu după mult timp după ce am lansat în 2006. Mi-a plăcut că era o platformă de găzduire e-commerce ușor accesibilă și competitivă. Dar, mai presus de toate, caracteristica lor tematică este ceea ce mi-a plăcut cel mai mult. Să ne uităm la câteva tehnici simple care vă oferă control asupra tematicii Shopify și a oferi clienților dvs. o experiență și mai amplă.
Sugestiile tematice (denumite în continuare subiecte simple) sunt ușor de construit. În plus față de instrumentele noastre de zi cu zi de HTML, CSS, JavaScript, temele folosesc o limbă de șablon denumită Liquid. Vreau să treceți dincolo de elementele de bază ale acestui articol pentru a vă arăta câteva tehnici pe care le-am angajat recent pentru a vă încărca super-tema dezvoltării temei Shopify. Dacă nu cunoașteți teme, puteți afla mai multe despre Wikibook Shopify.
Toate comenzile Shopify sunt găzduite în mod sigur pe domeniul Shopify.
Temele vă permit să vă controlați casele, colecțiile și paginile individuale ale produselor. Iată o adresă tipică Shopify care afișează un singur produs:
http://store.theheadsofstate.com/products/chicago-travel-poster
"Șefii de stat" este un magazin cu plăcere produs Shopify care își prezintă produsele foarte bine. URL-ul de mai sus vă duce la posterul de călătorie din Chicago, dar dacă, ca mine, sunteți un pic pedant de adresă URL, atunci ar putea fi tentat să renunțați la:
http://store.theheadsofstate.com/products/
Această adresă URL vă duce la o pagină care arată nedesemnată în comparație cu restul site-ului. Mă îndoiesc foarte mult că acest lucru se datorează lipsei de gândire din partea designerilor. Este de fapt vina lui Shopify; teme în prezent nu acceptă un șablon nativ pentru pagina disponibilă la /produse (sau / colecții - cele două sunt interschimbabile în acest context). În schimb, fișierul de aspect implicit face o listă a colecțiilor disponibile.
Din fericire, se poate recâștiga repede controlul acestei pagini și o puteți folosi în avantajul lor. În temă layout.liquid fișier, puteți înlocui content_for_layout cu următorul fragment de cod:
% if template == 'lista-colecții'% % includ 'listarea colecției'% % else% content_for_layout % endif%
Apoi, creați un fișier numit colectare-listing.liquid și salvați-l în folderul cu fragmente. Dacă cineva vizitează / colecții sau /produse pagina noastră, redimensionează fișierul de aspect și include fragmentul propriu în loc de listare implicită.
Iată un exemplu rapid despre modul în care puteți restabili lista de colecții utilizând propriul dvs. markup. Rețineți că avem acces la Shopify colecții identificator pe această pagină:
Colecții de produse
% pentru colectarea în colecții% % cu excepția cazului în care collection.handle == 'frontpage'%
- collection.title % fără sfârșit% % endfor%
Puteți găsi mai multe informații despre variabilele disponibile în colecții colectare pe excelentul Shopify cheat foaie. Rețineți modul în care folosim logica lichidului pentru a exclude colecția cu ajutorul unui mâner de fronptage. Aceasta este o colecție frecvent utilizată în teme pentru afișarea elementelor de pe pagina de pornire, dar o excludem deoarece este folosită mai mult în scopuri administrative decât o grupare logică de produse conexe. Această tehnică vă permite să păstrați coerența stilului și să adăugați date suplimentare sau elemente de proiectare după cum doriți.
... cuvintele sunt cunoscute sub numele de mânere.
Când începeți mai întâi temele, sunteți prezentat conceptului de aspecte. În mod implicit, Shopify caută un fișier de aspect implicit numit layout.liquid, care trăiește în numele corespunzător schemă pliant.
S-ar putea să existe ocazii în care proiectul dvs. necesită un aspect alternativ. O abordare este utilizarea declarațiilor condiționale pentru a afișa / ascunde conținutul în funcție de o variabilă, cum ar fi un anumit produs sau o pagină de colecție. Dar o altă alternativă este să folosiți un fișier de aspect complet diferit. Aceasta poate fi o soluție mult mai simplă în cazul în care aveți nevoie de o marcare diferită. Tot ceea ce aveți nevoie pentru a impune un aspect alternativ este să adăugați următorul cod în partea de sus a șablonului:
% layout "product"%
Acest lucru obligă șablonul dvs. să utilizeze un fișier de aspect denumit product.liquid localizat în tema ta aspecte pliant.
De asemenea, puteți specifica că nu se utilizează niciun aspect prin specificarea nici unul, asa:
% layout "none"%
Dacă ați folosit WordPress, probabil veți fi familiarizat cu ideea de a melc. Este un nume unic acordat unei anumite postări sau unei pagini care este utilizată într-o adresă URL. De exemplu: "prima mea pagină". În Shopify, cuvântul slugs este cunoscut sub numele de mânere. Acestea sunt generate automat atunci când creați un produs, dar, desigur, le puteți modifica dacă doriți să faceți acest lucru. Manerele noastre de produse sunt, de asemenea, disponibile în noi product.liquid șablon. Putem folosi mânere să dicteze șablonul de produs. Iată un mod în care putem face acest lucru:
% if product.handle == 'my-new-t-shirt'% % include 'my-new-t-shirt'% % else% // Codul dvs. standard productliquid merge aici endif%
În acest exemplu, verificăm dacă produsul care se ocupă de cererea curentă este "noul meu tricou" și include un fragment numit "noul meu tricou" dacă este adevărat. Aceasta presupune includerea unui fișier numit -mea-t-shirt.liquid care se află în dosarul cu fragmente.
Pentru a face acest lucru cu un pas mai departe, puteți transforma standardul product.liquid într-un fragment. Îmi place această abordare deoarece păstrează șablonul principal ca controler logic, izolând frumos markupul de prezentare în propriile fișiere.
Acest model poate fi ușor modificat pentru a putea utiliza atribui și caz metode, cum ar fi:
% assign handle = product.handle% % case handle% % atunci când 'big-t-shirt'% % include 'big-t-shirt' % % includ "tricou mic"% % else% % include 'standard de produs'% % endcase%
De asemenea, puteți utiliza mânerul produsului pentru a atribui diferite clase CSS la în fișierele de aspect. De exemplu:
% template case% % atunci când 'product'% % else% % endcase%
S-ar putea, desigur, să extindeți această tehnică pentru a personaliza etichetă pe baza oricăror criterii.
Toate comenzile Shopify sunt găzduite în mod sigur pe domeniul Shopify. Pentru unii, direcționarea către o pagină generică de checkout poate fi un pic jignitoare în ceea ce privește experiența utilizatorului. Puteți, totuși, stilul dvs. de plată utilizând CSS. Iată ce trebuie să faceți:
Accentsconagua
checkout.css în dosarul pentru materiale al temei.!important pentru obținerea rezultatelor dorite.
Asigurați-vă că verificați wiki pentru exemple complete.
Puteți utiliza, de asemenea, lichid în dvs. checkout.css fişier. Mai întâi, redenumiți fișierul CSS la checkout.css.liquid. Apoi puteți începe să utilizați filtrele lichide. Iată un exemplu:
/ * Introduceți propriul logo (încărcați separat în folderul de materiale) * / #logo height: 65px; background: url ('logo-checkout.png' | asset_url | înlocuiți: 'http: //', 'https: //') center no-repeat; Este uimitor modul în care câteva modificări ale CSS de bază pot alinia comanda generică cu propriul design. Asigurați-vă că verificați toate șabloanele procesului de plată; CSS se va aplica unui număr de ecrane.
Setările temei ne permit să utilizăm funcția Shopify Admin pentru a controla datele pe care le putem folosi în temele noastre. Cazurile obișnuite de utilizare sunt linii de curea, scheme de culori la nivel de site și selectarea imaginilor personalizate pentru a apărea în galeriile glisante în jurul site-ului. Pentru a activa setările din tema, creați pur și simplu a settings.html fișier (notați extensia nr. lichidă) și începeți să adăugați elementele de formă relevante. De exemplu, aveți posibilitatea să includeți următoarele în settings.html fișierul permite editarea liniei curelei site-ului:
Observați cum am setat valoarea implicită. Acest lucru este important, mai ales atunci când se ocupă de valorile CSS. Pentru a accesa această valoare în tema noastră, o menționăm simplu în "Liquid" după cum urmează:
settings.site_strapline
De asemenea, putem utiliza setările temelor în fișierele noastre CSS principale prin adăugarea .lichid extinderea la fișierul CSS principal. De exemplu:
corp culoare: settings.text_color; fundal-culoare: settings.ro_color;
Este foarte important să furnizați valori implicite pentru aceste culori în settings.html fişier. Dacă nu faceți acest lucru, fișierul CSS standard va fi creat fără o valoare. Citiți mai multe la wiki: http://wiki.shopify.com/Theme_Settings
Shopify oferă, de asemenea, un API JavaScript, iar informațiile despre "cos" pentru utilizatorul curent sunt direct accesibile prin intermediul unei adrese URL foarte simple. Pur și simplu adăugați .js extinderea la adresa URL a cartului pentru a obține o reprezentare JSON a căruciorului. Iată un exemplu:
"token": "7b0f09aca710a4ce688325a8add36c6b", "notă": null, "atribute": null, "total_price": 0, "total_weight": 229848636 , "titlu": "Insites: Tour Coasters", "preț": 0, "line_price": 0, "quantity": 1, "sku" Industrii "," proprietăți ": null," variant_id ": 229848636," url ":" / products / insites-the-tour "," imagine ":" http://cdn.shopify.com/s/files/1 /0151/6407/products/png_1.png?783 "," mâner ":" insites-the-tour "," requ_shipping ": true]," requ_shipping ": true
Acest lucru vă oferă o cantitate extremă de flexibilitate și putere creativă. Ați putea crea un pop-up JavaScript care să afișeze conținutul coșului de cumpărături sau să injectați o expunere de diapozitive evidențiind produsele alese. Desigur, puteți face aceste lucruri în șabloanele dvs., dar acest lucru vă oferă mai multe opțiuni pentru a oferi o experiență mai bună pentru utilizatori.
Ca și în cazul tuturor platformelor, există multe modalități diferite de abordare a aceleiași probleme, dar sper că aceste șase sfaturi se dovedesc utile și utile pentru dvs. atunci când dezvoltați următoarea temă Shopify.
