Cum să creezi prima ta secțiune de teme Shopify

Oferirea clienților tăi control creativ este esențială, mai ales atunci când doresc posibilitatea de a-și personaliza vitrina. Funcția secțiuni Shopify este un instrument puternic pentru personalizarea temelor Shopify, astfel încât utilizarea lor eficientă și respectarea celor mai bune practici va debloca o serie de opțiuni pentru clienții dvs.

Dacă construiți o temă Shopify de la zero sau modificați o temă pentru un client, va trebui să creați câteva tipuri diferite de secțiuni, care vor varia în funcție de context. În plus, clienții se așteaptă la o experiență ușor de utilizat și intuitivă, ceea ce înseamnă că secțiunea potrivită, în locul potrivit, poate avea un impact enorm asupra conversiei.

În acest articol, vom aborda cum să începeți să creați diferite tipuri de secțiuni tematice și regulile de utilizare a acestora, astfel încât să vă puteți ajuta clienții să își personalizeze magazinul. Vom explora, de asemenea, câteva exemple de secțiuni specifice din tema noastră Dawn, disponibilă la sursă, pentru a demonstra exact cum le puteți utiliza în scenarii din lumea reală.

Care sunt secțiunile tematice?

La un nivel înalt, secțiunile sunt componente modulare ale unei teme Shopify pe care comercianții le pot personaliza. Secțiunile conțin conținut și setări pentru anumite zone ale unui magazin Shopify, cum ar fi elementele de bază ale unei pagini de produs sau o componentă de prezentare de diapozitive.

În cadrul acestor secțiuni, dezvoltatorii au acces la o serie de tipuri diferite de setări, de la introduceri de text și selectoare de imagini, la HTML personalizat și meniuri, pe care comercianții le pot personaliza din editorul de teme și le pot completa cu conținutul lor.

Secțiunile sunt conținute în directorul /sections al unei teme și pot fi incluse static în fișierele de aspect ale unei teme (cum ar fi antetul și subsolul) sau pot fi adăugate dinamic la orice șablon din Editorul de teme. Pentru a înțelege diferitele componente care pot fi reprezentate ca secțiuni, puteți explora directorul /sections al temei Dawn.

Odată cu lansarea Magazinului online 2.0, secțiunile pot fi acum utilizate ca modalitate principală de a organiza toate aspectele diferite ale temei dvs., de la pagini întregi la elemente individuale. Așa cum vom trata în acest articol, capacitatea de a adăuga secțiuni la orice șabloane JSON vă va permite să aranjați cu ușurință diferite pagini, care pot fi îmbunătățite atunci când comercianții își personalizează tema.

Șabloane și secțiuni

Una dintre condițiile prealabile pentru a învăța cum funcționează secțiunile pe temele Shopify este înțelegerea sistemului de șabloane de teme Shopify. Cu Online Store 2.0, fiecare tip de pagină poate fi reprezentat ca un fișier .json în directorul /templates al unei teme. Dezvoltatorii pot structura fiecare tip de pagină prin definirea ce secțiuni vor apărea implicit în aceste fișiere șablon JSON.

Aceste șabloane JSON nu includ nici un marcaj sau obiecte Liquid pentru afișarea conținutului magazinului, sunt pur și simplu fișiere de date care indică ce secțiuni vor apărea implicit pe o pagină și în ce ordine.

Un exemplu de bază despre cum ar putea arăta un fișier șablon product.json ar fi:

În acest caz, o pagină de produs ar fi redată cu o secțiune numită main-product.liquid și ar fi singura secțiune care apare implicit. Când un comerciant personalizează această pagină și adaugă mai multe secțiuni în pagină, fișierul șablon product.json va fi actualizat cu aceste informații. Vom explora mai mult acest proces în acest articol, când ne uităm la modul în care secțiunile sunt incluse în șabloane.

Bazele secțiunilor

Când vă dezvoltați tema folosind secțiuni și șabloane JSON, puteți lua în considerare construirea fișierelor de secțiuni în două categorii distincte: secțiuni de pagină „principale” și componente modulare individuale.

Secțiunile paginii principale

Într-o secțiune a paginii principale, ar trebui să includeți tot conținutul implicit pentru pagina respectivă. De exemplu, în secțiunea principală pentru pagina unui produs, veți include elementele importante pentru afișarea unui produs și proprietățile asociate acestuia, cum ar fi titlul produsului, descrierea, media, prețul și formularul de adăugare în coș.

Puteți accesa variabile sau obiecte Liquid într-o secțiune, în funcție de șablonul de pagină în care este inclusă o secțiune. Aceasta înseamnă că o secțiune care va fi redată într-un șablon product.json va putea accesa orice atribute ale product Liquid. obiect, reprezentând produsul a cărui pagină este redată.

În mod similar, o secțiune care este inclusă într-un fișier collection.json va putea accesa toate atributele obiectului de collection Liquid. Toate secțiunile, indiferent de locul în care apar, pot accesa oricare dintre obiectele globale Liquid.

Pe lângă marcajul și obiectele Liquid specifice paginii pe care le veți adăuga într-o secțiune a paginii principale, puteți crea și setări în cadrul etichetelor {% schema %} . Aceste setări pot face referire la elemente din secțiune și pot fi configurate de către comercianți în editorul de teme.

Deoarece o secțiune a paginii principale include un marcaj specific unui tip de pagină, veți dori să o includeți numai în șablonul asociat. Pentru a preveni adăugarea unei secțiuni a paginii principale la alte tipuri de pagini din editorul de teme, aceasta nu ar trebui să conțină presetări în schema secțiunii sale.

Pentru a vedea un exemplu de secțiune a paginii principale, puteți explora fișierul main-product.liquid din directorul /sections din Dawn sau oricare dintre secțiunile care sunt prefixate cu main în titlu. Ca regulă generală, ar trebui, de asemenea, să numiți secțiunile paginii principale cu main în titlu, pentru a vă ajuta să faceți distincția între diferitele tipuri de secțiuni.

Secțiuni modulare

Secțiunile modulare sunt secțiuni care pot fi reutilizate în diferite zone ale unui magazin online și completează elementele principale ale unei pagini. Exemple de aceste tipuri de secțiuni includ colecții prezentate, prezentări de diapozitive și formulare de înscriere la buletine informative.

Aceste secțiuni ar fi, în general, adăugate la pagini de către comercianți folosind editorul de teme, mai degrabă decât secțiunile să fie adăugate în mod implicit la un șablon de pagină. Pentru ca o secțiune să fie adăugată la o pagină prin intermediul editorului, secțiunea trebuie să conțină presetări în schema sa. Odată ce aceste presetări sunt adăugate, secțiunea va fi o opțiune disponibilă atunci când comerciantul face clic pe Adăugare secțiune în editorul de teme.

Spre deosebire de secțiunile de pagină „principale”, secțiunile modulare conțin de obicei conținut și markup care pot fi reutilizate în diferite tipuri de pagini și în contexte diferite, într-un magazin Shopify. Prin urmare, dezvoltatorii ar trebui să evite să se bazeze pe obiecte Liquid specifice paginii din aceste secțiuni.

Este posibil, totuși, să restricționați o secțiune pentru a fi disponibilă numai pe anumite tipuri de pagini, utilizând atributul templates din schema secțiunii. De exemplu, dacă doriți să limitați o secțiune la numai pagini de produse și de colecție, veți include această linie în etichetele de schema ale secțiunii:

 "templates": ["product", "collection"]

Atributul templates acceptă o listă de șiruri de caractere care reprezintă tipul paginii.

În funcție de funcționalitatea pe care doriți să le includeți în tema dvs. sau de cerințele specifice ale clientului dvs., veți crea probabil o serie de secțiuni diferite care să permită funcții unice. Pentru a vedea exemple de secțiuni modulare, puteți explora secțiunea de buletin informativ sau secțiunea de text îmbogățit utilizată în Dawn.

Setările secțiunii

Am analizat pe scurt modul în care setările unui fișier de secțiune pot fi folosite pentru a crea opțiuni de personalizare pe care comercianții le pot accesa, dar haideți să ne aprofundăm puțin în acestea, pentru a vedea cum sunt construite.

După cum am văzut, setările sunt incluse în fișierele secțiuni, în interiorul etichetelor {% schema %} , care denotă că acestea sunt setări care ar trebui să fie afișate în interfața de utilizare a editorului de teme. Un exemplu foarte simplu în acest sens ar putea fi văzut cu o secțiune de text personalizată care ar putea arăta ceva de genul:

În acest exemplu avem două elemente HTML: un element de titlu și un element de paragraf. Fiecare dintre aceste elemente conține conținut dinamic pe care l-am creat cu section.settings Obiectul lichid. Acest obiect secțiune ne permite să recuperăm valorile setărilor prin referire la ID-ul unic al setării.

Sub marcajul HTML și Liquid avem setările noastre de secțiune, conținute în etichetele noastre {% schema %} . Fiecare setare este reprezentată de un obiect, unde putem defini id -ul setarii, type acesteia și cum va apărea în editor. Pentru a accesa setarea unei secțiuni în Liquid, adăugați id -ul acesteia la obiectul lichid section.settings . De asemenea, definim tipul de setare și cum va apărea în editorul de teme.

În setările etichetelor noastre de schemă:

• id se referă la variabila Liquid care este definită
• type definește tipul de ieșire pe care îl creăm
• label oferă contextul afișat în editorul de teme
• default atribuie o valoare implicită

În acest exemplu, am creat o casetă de text pentru titlul nostru și o richtext de text îmbogățit pentru corpul nostru, dar puteți adăuga o gamă largă de tipuri de ieșiri, în funcție de cerințele clientului dumneavoastră. Alte tipuri de introducere valide includ image_picker , radio , video_url și font_picker .

Acest exemplu este acum o secțiune validă, totuși ne lipsește un aspect cheie: stabilirea unde exact va apărea secțiunea pe temă. Vom explora mai târziu câteva abordări diferite pentru includerea secțiunilor, dar deocamdată vom permite ca secțiunea să fie adăugată prin editorul de teme la orice pagină prin crearea de presetări în secțiune.

Presetările sunt configurații implicite ale secțiunilor și sunt adăugate în etichetele {% schema %} ale unei secțiuni. În exemplul nostru simplu, presetările ar putea arăta astfel:

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Odată adăugată la exemplul nostru, secțiunea casetă de text personalizată ar arăta astfel:

Acum, dacă navigăm la editorul de teme și selectăm Adăugare secțiune pe orice pagină, această secțiune va apărea ca o opțiune disponibilă. Setările secțiunii pe care le-am creat vor apărea în bara laterală din dreapta cu etichetele și textul implicit pe care le-am adăugat și putem completa setările de text de intrare, care vor fi afișate în secțiunea noastră.

Acesta este un exemplu simplu care arată relația dintre setările secțiunilor și variabilele pe care le puteți crea în cadrul secțiunilor, precum și modul în care acestea sunt redate în editorul de teme. Pentru un model mai avansat, puteți explora secțiunea de text îmbogățit a temei Dawn.

Inclusiv secțiuni pe pagini

După cum am atins deja, există o serie de metode pentru includerea secțiunilor pe paginile unei teme. Să explorăm fiecare dintre aceste abordări în mod individual și să dezvăluim unele dintre regulile care se aplică acestora.

1. Includerea secțiunilor în șabloanele JSON

Când ne-am uitat la secțiunile paginii principale, am văzut că fișierele șablon JSON acceptă o proprietate "main" , care devine secțiunea implicită pentru acel tip de pagină și ar trebui să includă toate elementele de conținut importante pentru pagina respectivă.

Pe lângă o secțiune "main" , este, de asemenea, posibil să includeți și alte secțiuni într-un șablon JSON care va apărea implicit pe acel tip de pagină. Dacă folosim un șablon JSON de produs ca exemplu, am putea include o secțiune de recomandări de produse pe pagină adăugând un nou obiect sub secțiunea "main" :

În acest caz, atribuim un nume secțiunii, recommendations și proprietatea type este folosită pentru a identifica ce fișier din directorul /sections dorim să includem.

Deoarece acest șablon JSON face referire la mai mult de o secțiune, trebuie să definim modul în care secțiunile apar secvenţial, în cadrul obiectului de order . Fiecare secțiune inclusă într-un șablon JSON va trebui să primească o comandă implicită, totuși comercianții pot încă rearanja secțiunile din editorul de teme.

Secțiunile fără setări prestabilite care sunt adăugate la șabloanele JSON nu pot fi eliminate în editorul de teme, dar pot fi ascunse dacă un comerciant nu le solicită. Pentru un exemplu real al modului în care secțiunile pot fi aranjate într-un șablon JSON, puteți explora șablonul de produs Dawn.

2. Includerea secțiunilor ca opțiuni pe toate paginile

După cum am văzut cu textul nostru personalizat, este posibil să faceți o secțiune disponibilă pe toate paginile unei teme atunci când sunt prezente presets în setările schema .

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Când sunt incluse folosind această abordare, aceste secțiuni pot fi adăugate, repoziționate și șterse din editorul de teme. Aceste secțiuni pot fi, de asemenea, limitate la anumite pagini cu proprietatea templates .

Această funcționalitate de glisare și plasare înseamnă că atunci când creați secțiuni dinamice personalizate, o gamă largă de opțiuni pentru personalizarea magazinelor vor fi deblocate. Puteți crea secțiuni mobile pentru videoclipuri, produse sau galerii de imagini. Un bun exemplu de secțiune care utilizează această metodă ar fi secțiunea de buletine informative a lui Dawn.

3. Utilizarea etichetelor {% section %} pentru a adăuga secțiuni statice

Eticheta de section Liquid vă permite să redați o secțiune din directorul /sections într-un aspect Liquid sau un fișier șablon. Această etichetă poate apărea ca:

 {% section 'header' %}

Secțiunile adăugate folosind această etichetă de section nu pot fi eliminate, repoziționate sau ascunse în editorul de teme. Poziția acestei secțiuni pe pagină este blocată, în funcție de locul în care a fost adăugată într-un fișier de aspect sau șablon.

Această abordare este folosită cel mai frecvent pentru conținut și componente care ar trebui să fie întotdeauna vizibile, cum ar fi anteturile, subsolurile și barele de anunțuri. Pentru a vedea un exemplu în acest sens pe Dawn, puteți verifica fișierul theme.liquid unde bara statică de anunț, secțiunea antet și secțiunile de subsol sunt adăugate cu eticheta de section .

Împuternicirea creativității

Acum că ați văzut cum să creați și să adăugați secțiuni la temele dvs., puteți crea opțiuni nesfârșite pentru magazinele clienților dvs.

Lucrul cu șabloanele JSON deblochează puterea secțiunilor pentru toate paginile unei teme, ceea ce va permite comercianților să-și construiască magazinul exact așa cum și-ar dori, cu o anumită direcție din partea dvs.