5 actualizări Shopify pe care trebuie să le cunoașteți pentru a vă îmbunătăți magazinul de comerț electronic
Publicat: 2023-05-12Dacă rulați un site de comerț electronic folosind Shopify, este esențial să țineți pasul cu cele mai recente actualizări Shopify pentru a rămâne în fața concurenței. În 2023, numărul magazinelor Shopify a depășit 6,3 milioane, acoperind 175 de țări din întreaga lume. În special, Shopify și-a stabilit dominația pe piața de comerț electronic din SUA, deținând o cotă de piață semnificativă de 19,8%.
Cu o bază de utilizatori atât de mare, Shopify lucrează mereu la noi caracteristici și funcționalități pentru a răspunde nevoilor utilizatorilor săi. În calitate de partener de dezvoltare Shopify cu etichetă albă, ne menținem la curent cu cele mai recente tendințe și actualizări.
Aceste actualizări recente Shopify vă vor ajuta să vă îmbunătățiți magazinul online și să țineți pasul cu peisajul comerțului electronic în continuă schimbare.
Cuprins
- I. Culegere automată cu Metafield
- Pasul 1: Crearea unui metacâmp pentru produs
- Pasul 2: Configurarea colecțiilor automate
- Pasul 3: Crearea unei colecții
- II. Extensibilitate la checkout
- III. Crearea de grupuri de secțiuni în temele Shopify
- IV. Funcția de câmp meta obiect de la Shopify
- Configurarea meta-obiectelor
- Crearea de referințe metacamp pentru anumite părți Shopify
- Afișarea metacâmpurilor în magazinul dvs. online Shopify.
- V. Optimizarea codului cu Pluginul Shopify Liquid Prettier
- A. Codul Visual Studio
- b. Vim
- c. WebStorm
I. Colectare automată cu Metafield
Colecțiile automate folosind metafield vă pot ajuta să creați colecții mai precise pentru produsele dvs. pe Shopify. Metacâmpurile sunt câmpuri personalizate care vă permit să adăugați informații suplimentare produselor dvs., cum ar fi culoarea, dimensiunea sau materialul.
Shopify vă permite acum să adăugați condiții metacamp la colecțiile automate. Aceasta înseamnă că puteți crea colecții automate mai precise pentru produsele dvs. pe baza metacâmpurilor produsului.
Odată ce adăugați metacâmpuri la un produs, produsul va fi adăugat automat la colecția automată corespunzătoare.
Pentru a adăuga condiții metacamp la o colecție, trebuie să urmați acești pași:
Pasul 1: Crearea unui metacâmp pentru produs
Mai întâi, trebuie să creați un metacâmp pentru produsul sau varianta dvs. Accesați secțiunea „Câmpuri personalizate” din setările Shopify și selectați „Adăugați un câmp personalizat”.
Cu actualizările recente Shopify, acum este mai ușor să adăugați informații importante despre produsele dvs. folosind metacâmpuri. Puteți alege dintre patru tipuri de metacâmpuri:
- Text cu o singură linie
- Întreg
- Zecimal
- Adevărat sau fals
Dacă doriți să creați valori predefinite pentru metacâmpul dvs., selectați „Lista de valori”.
Pasul 2: Configurarea colecțiilor automate
Odată ce ați creat metacâmpul, puteți configura colecții automate pe baza acelei valori ale metacâmpului. Accesați secțiunea „Colecții automate” a tabloului de bord Shopify și selectați „Creați o colecție automată”.
De acolo, puteți selecta metacâmpul pe care l-ați creat mai devreme și puteți stabili condițiile pentru colecția dvs. Această actualizare Shopify vă permite să organizați produsele în colecții personalizate, simplificând gestionarea inventarului.
Pasul 3: Crearea unei colecții
După configurarea colecțiilor automate, puteți crea o nouă colecție. Accesați secțiunea „Colecții” din tabloul de bord Shopify și selectați „Creează colecție”.
În secțiunea „Condiții”, selectați metacâmpul pe care doriți să îl utilizați pentru colecția dvs. și setați valoarea pentru acel metacâmp. Acest lucru va adăuga automat produse care se potrivesc cu condiția metacâmpului în colecția dvs.
Urmați acești pași pentru a crea colecții automate cu metacâmp pentru produsele sau variantele dvs. Acest lucru vă poate ajuta să vă organizați mai bine produsele și să le fie mai ușor pentru clienți să găsească ceea ce își doresc pentru magazinul dvs. online.
Pentru a afla mai multe despre colecțiile automate, faceți clic aici.
II. Extensibilitate la checkout
Începând cu 13 august 2024, checkout. lichidul nu va mai funcționa pentru paginile din casă. Aceasta înseamnă că, în prezent, personalizați paginile de încasare cu finalizarea plății. lichid trebuie să se actualizeze la extensibilitatea plății înainte de această dată.
Trebuie să utilizați API-ul Checkout pentru a vă personaliza paginile de expediere și plată. Personalizările efectuate în afara acestui API nu vor fi acceptate.
Când faceți upgrade la extensia de plată, puteți beneficia de experiențe îmbunătățite de plată și de o satisfacție îmbunătățită a clienților.
Iată cum:
- Pasul 1: navigați la secțiunea Shopify Checkout API a site-ului Shopify Developers.
- Pasul 2: Familiarizați-vă cu API-ul Checkout și cu capabilitățile sale.
- Pasul 3: personalizați-vă paginile de încasare folosind API-ul Checkout.
- Pasul 4: testați modificările pentru a vă asigura că funcționează corect.
Această actualizare vă va permite să vă personalizați experiențele de plată și să oferiți clienților mai multe informații pentru a lua decizii informate în timpul plății.
III. Crearea de grupuri de secțiuni în temele Shopify
Shopify a introdus o nouă funcție care vă permite să creați grupuri de secțiuni în aspectul temei dvs. Grupurile de secțiuni sunt containere JSON care îi vor permite proprietarului magazinului să adauge, să elimine și să reordoneze secțiuni în zone ale fișierului de aspect, cum ar fi antetul și subsolul.
Cu această actualizare Shopify , puteți personaliza și rearanja cu ușurință secțiunile din aspectul temei.Această caracteristică promite un flux de lucru mai eficient și mai eficient pentru magazinele online.
Pentru a adăuga un grup de secțiuni, urmați acești pași:
- Pasul 1: navigați la „Editați codul” în magazinul dvs. Shopify.
- Pasul 2: Accesați „Secțiuni” și faceți clic pe „Adăugați o secțiune nouă” pentru a adăuga o secțiune nouă.
- Pasul 3: Adăugați un nume de fișier și adăugați „.json” la acesta pentru a crea un nou fișier JSON.
- Pasul 4: În fișierul JSON, adăugați următoarele patru atribute: „Tip”, „Nume”, „Secțiuni” și „Comandă”.Aceste atribute sunt obligatorii, fără niciun element, fișierul JSON nu se va salva. dacă lipsește vreuna dintre ele, va da o eroare.
- Pasul 5: Putem avea una dintre următoarele valori: „header”, „footer”, „aside” sau „custom.<nume>” pentru atributul „Tip”.
- Pasul 6: Atributul „Nume” poate fi orice nume pe care trebuie să-l atribuiți grupului de secțiuni.
- Pasul 7: Atributul „Secțiune” are toate valorile pe care le-am adăugat din Shopify Customizer.Acesta va fi generat de Shopify automat pe baza conținutului pe care îl adăugam. Vă recomandăm insistent să NU EDIȚI manual acel fișier JSON.
- Pasul 8: Atributul „Comandă” definește numărul de blocuri pe care le-am adăugat la secțiunile specifice.Acesta va fi schimbat automat atunci când schimbăm comanda din personalizat. Atributele de ordine definesc ordonarea blocurilor.
- Pasul 9: Acum că ați creat fișierul JSON al grupului de secțiuni, apare întrebarea cum să-l conectați la personalizare și cum va apărea în personalizat.Pentru a face acest lucru, puteți adăuga următorul cod în fișierul lichid:
- {% secțiuni „Section_group_file_name” %}
- Pasul 10: Aceasta va lega fișierul grupului de secțiuni la personalizarea.Odată conectat, veți putea adăuga mai multe secțiuni la acel grup de secțiuni, așa cum se arată în imaginea de mai jos:
În general, această nouă caracteristică oferă proprietarilor de magazine Shopify ca tine o mare flexibilitate și opțiuni de personalizare pentru crearea și gestionarea secțiunilor din fișierul tău de aspect.
Notă:
- Grupurile de secțiuni create în Shopify nu vor apărea implicit în personalizarea. Dacă doriți să adăugați un grup de secțiuni, va trebui să faceți acest lucru manual în fișierul din codul lichid.
- Cu toate acestea, Shopify a introdus recent o nouă funcționalitate pe schema de secțiuni care vă permite să faceți secțiunea personalizată „.liquid” vizibilă în anumite grupuri de secțiuni.
- Atributele „enabled_on” și „disabled_on” din schemă pot fi utilizate pentru a îndeplini această sarcină. Puteți să vă organizați mai bine secțiunile „.liquid” personalizate și să le utilizați în anumite grupuri de secțiuni cu această actualizare Shopify.
- De exemplu, dacă aveți două grupuri de secțiuni numite „group1.json” și „group2.json” și un fișier de secțiune numit „section_file.liquid”, puteți utiliza atributul „enabled_on” din schemă pentru a crea „section_file.liquid”. ” secțiune vizibilă numai în „group1”.
- Pe de altă parte, puteți utiliza atributul „disabled_on” pentru a ascunde secțiunea „section_file.liquid” din „group1” și pentru a o afișa în toate celelalte grupuri.
- Atributele „enabled_on” și „disabled_on” acceptă două argumente: „șablon” și „grupuri”. Le puteți folosi pe ambele în același timp sau pe una dintre ele. Argumentul „șablon” permite toate tipurile de pagini, iar [“”] permite toate paginile.
- Argumentul „grupuri” vă permite să adăugați tipuri de grup de secțiuni, cum ar fi antet, subsol, deoparte și personalizat. <nume>. [“”] permite toate tipurile de secțiuni.
- Dacă utilizați „enabled_on” atât cu argumentele șablonului, cât și ale grupului, înseamnă că secțiunea dvs. va apărea numai în grupul de secțiuni al șablonului respectiv. Același lucru va funcționa în „disabled_on”, dar în sens invers.
Aflați mai multe despre „enabled_on” și „disabled_on” aici. Puteți citi și despre grupurile de secțiuni aici.
IV. Funcția de câmp meta obiect de la Shopify
Funcția Meta Object Field de la Shopify este o modalitate ușoară de a adăuga și de a stoca informații structurate pentru magazinul dvs. Vă permite să stocați informații despre un produs, cum ar fi caracteristicile, specificațiile și diagramele de mărimi ale acestuia, care pot fi apoi preluate și editate din Administratorul Shopify.
Această funcție poate fi utilizată pentru produse, colecții, clienți, comenzi și alte părți ale magazinului dvs. Această actualizare face gestionarea și actualizarea magazinului dvs. mai simplă și mai eficientă.
Meta Objects sunt accesibile prin Shopify Admin, precum și prin API-ul StoreFront și API-ul Meta Object. Această caracteristică permite aplicațiilor terțe să acceseze și să interacționeze cu Meta Objects.
Aceasta înseamnă că puteți utiliza Meta Objects pentru a crea o gamă largă de personalizări și integrări cu magazinul dvs.
Configurarea meta-obiectelor
Configurarea Meta Objects este un proces simplu. Există două elemente cheie pentru Meta Objects: grupul de câmpuri care descriu structura unui obiect și conținutul sau datele Meta Objects.
- Puteți gestiona structura meta-obiectelor din secțiunea Setări > Date personalizate din administratorul Shopify, unde puteți adăuga sau elimina câmpuri și defini tipurile de date ale acestora.
- Apoi, puteți gestiona conținutul sau datele meta-obiectelor din secțiunea Conținut > Meta-obiecte din administratorul Shopify, unde puteți adăuga sau edita informațiile stocate în fiecare meta-obiect.
Este important să păstrați actualizările cu cele mai recente actualizări Shopify pentru a vă asigura că Meta Objects funcționează corect.
Când creați Meta Objects în Shopify, este important să aveți în vedere câteva lucruri pentru a vă asigura că funcționează corect.
- În primul rând, ar trebui să dați fiecărui Meta Object un nume clar și concis pentru a vă ajuta să îl identificați în tabloul de bord Shopify Admin. Apoi, ar trebui să atribuiți un tip Meta Object, care va fi folosit pentru a-l identifica în API-uri.
- Pe lângă nume și tip, trebuie să definiți câmpurile care compun Meta Object. Aceste câmpuri vor determina tipul de conținut care poate fi adăugat la Meta Object.
- Fiecare câmp va avea propriile detalii, inclusiv un nume, descriere, tip și reguli de validare, limite de caractere, valori minime și maxime sau valori prezente.
- Odată ce Meta Object a fost creat, puteți începe să construiți intrări pentru acesta. Aceste intrări pot fi adăugate la produsele, colecțiile, clienții, comenzile și alte părți ale magazinului dvs. De asemenea, puteți face referire la Meta Objects în diferite zone ale magazinului dvs. sau prin aplicații terțe.
- Când vine vorba de afișarea Meta Objects în magazinul dvs. online, puteți adopta câteva abordări diferite. Puteți afișa meta obiecte direct pe paginile de produse, de exemplu, sau le puteți utiliza pentru a crea câmpuri personalizate în procesul de finalizare a achiziției.
În cele din urmă, Meta Objects își propune să ofere un instrument flexibil și puternic pentru gestionarea datelor structurate și a marcajului de schemă în magazinul dvs. Când urmați cele mai bune practici și vă proiectați cu atenție Meta Objects, o actualizare Shopify vă poate ajuta să creați o experiență de comerț electronic mai eficientă și mai eficientă pentru clientul dvs.
Crearea de referințe metacamp pentru anumite părți Shopify
Pentru a lucra cu anumite părți ale Shopify, cum ar fi produse, comenzi sau clienți, puteți utiliza Meta Objects creând o referință metacâmp.
De exemplu, dacă aveți un meta-obiect „Caracteristici ale produsului” pe care doriți să-l afișați pe paginile de produse, puteți crea un meta-câmp de produs care se referă la acest meta-obiect specific.
Această referință vă permite să prezentați „caracteristici ale produsului” unice pe anumite produse. De exemplu, puteți adăuga intrări de referință precum „Sustenabilitate” pe Produsul A și „Materiale” pe Produsul B.
Această actualizare Shopify este excelentă, deoarece crește eficiența și ajută la crearea unor experiențe mai bune pentru utilizatori.
Puteți afla mai multe despre Meta Objects de referință făcând clic aici:
Afișarea metacâmpurilor în magazinul dvs. online Shopify.
Pentru a afișa Meta Objects în magazinul dvs. online, aveți două opțiuni: conectați metacâmpurile la tema dvs. folosind editorul de teme sau editați codul temei pentru a adăuga Meta Objects.
Este esențial să fiți la curent cu cele mai recente actualizări Shopify pentru a vă asigura că utilizați cea mai eficientă metodă.
Iată pașii pentru fiecare opțiune:
Conectați metacâmpurile la tema dvs. utilizând Editorul de teme:
- Accesați administratorul Shopify și faceți clic pe Magazin online > Teme.
- Găsiți tema pe care doriți să o editați și faceți clic pe Personalizare.
- Navigați la partea din șablon unde doriți să apară referința Meta Object.
- Selectați o secțiune existentă cu blocuri sau adăugați una nouă cu blocuri.
- Faceți clic pe blocul pe care doriți să vă conectați la referința Meta Object.
- Lângă numele blocului, faceți clic pe pictograma Conectare sursă dinamică.
- Selectați referințele meta obiect pe care doriți să le afișați cu acest bloc.
Editați codul temei pentru a adăuga meta obiecte:
- Încercați această opțiune numai dacă aveți experiență în codare.
- Accesați administratorul Shopify și faceți clic pe Magazin online > Teme.
- Găsiți tema pe care doriți să o editați și faceți clic pe Acțiuni > Editați cod.
- În meniul din stânga, navigați la șablonul în care doriți să adăugați referința Meta Object.
- Utilizați Liquid pentru a face referire la metacâmpurile din șabloanele de pagină.
- Salvați modificările și previzualizați tema pentru a vă asigura că referința Meta Object apare așa cum vă așteptați.
Rețineți că, dacă tema dvs. este o temă vintage care nu acceptă metacâmpuri, va trebui să editați codul pentru a adăuga tipuri de metacâmpuri.
Această actualizare face mai ușoară personalizarea designului paginilor și crearea unui aspect unic pentru magazine.
V. Optimizarea codului cu Pluginul Shopify Liquid Prettier
Pluginul Shopify Liquid Prettier (1.0.0) le permite dezvoltatorilor să formateze instantaneu codul la un stil de cod consistent. Este un instrument valoros pentru actualizările Shopify, eliminând nevoia de a discuta despre regulile de stil.
Acest plugin este disponibil în browser, terminal sau în editorul de cod preferat. Cu el, puteți economisi timp și puteți menține fără efort codul de înaltă calitate.
Este disponibil cu câteva editoare de text populare, inclusiv Visual Studio Code, Vim și WebStorm.
Instalați și configurați pluginul în editorul dvs. preferat pentru a începe. Acest lucru vă va ajuta să creați un cod mai curat, mai ușor de citit și să simplificați sarcinile de depanare și întreținere.
A. Codul Visual Studio
Dezvoltatorii din întreaga lume folosesc Visual Studio Code. Să aflăm despre cele două extensii care pot ajuta la formatarea codului, Shopify Liquid Prettier Plugin și Prettier.
Pluginul Shopify Liquid Prettier
Shopify Liquid Prettier Plugin este o funcție încorporată în Shopify Liquid, care ajută la formatarea codului Liquid. Pentru a utiliza acest plugin, puteți adăuga următorul cod în fișierul settings.json al magazinului dvs.:
{
"[liquid]": {
"editor.defaultFormatter": "Shopify.theme-check-vscode",
"editor.formatOnSave": true
},
}
Adăugați această configurație pentru a aplica automat formatarea codului Liquid la salvare.
Mai frumos
Prettier este o extensie care poate fi descărcată din Visual Studio Code Marketplace. Pentru a utiliza Prettier cu Shopify Liquid, trebuie să instalați Pluginul Shopify Liquid Prettier local în depozitul dvs.
Pentru a instala pluginul, puteți folosi fie npm, fie Yarn:
npm install –save-dev prettier @shopify/prettier-plugin-liquid
yarn add –dev prettier @shopify/prettier-plugin-liquid
După instalarea pluginului, Prettier va formata automat codul dvs. pe baza regulilor stabilite în plugin. Acest lucru poate ajuta la economisirea de timp și la asigurarea coerenței în formatarea codului, făcându-l mai ușor de citit și de întreținut.
Fiind la curent cu actualizările Shopify, vă puteți asigura că aplicația sau tema rămâne compatibilă cu funcțiile sau modificările nou introduse.
b. Vim
Vim este, de asemenea, un editor de text popular. Să explorăm cum să folosiți Vim Prettier cu Shopify Liquid, un plugin care vă poate ajuta să formatați codul.
- Pasul 1: Instalați Vim
Pentru a începe, va trebui să instalați Vim pe computer. Puteți descărca cea mai recentă versiune de Vim din depozitul oficial Git, disponibil aici.
- Pasul 2: Instalați Vim Prettier
În continuare, va trebui să instalați Vim Prettier, un plugin care vă permite să formatați codul folosind Prettier din Vim. Puteți găsi pluginul în depozitul oficial Git aici.
- Pasul 3: Instalați pluginul Shopify Liquid Prettier
Pentru a utiliza Prettier cu Shopify Liquid, trebuie să instalați Pluginul Shopify Liquid Prettier local în depozitul dvs. Puteți face acest lucru folosind fie npm, fie Yarn. Rulați următoarea comandă pentru a instala pluginul folosind npm:
npm install –save-dev prettier @shopify/prettier-plugin-liquid
Alternativ, puteți utiliza Yarn pentru a instala pluginul:
yarn add –dev prettier @shopify/prettier-plugin-liquid
După instalarea pluginului, Prettier va formata automat codul dvs. pe baza regulilor stabilite în plugin. Acest lucru poate ajuta la economisirea de timp și la asigurarea coerenței în formatarea codului, făcându-l mai ușor de citit și de întreținut.
Mai mult, țineți pasul cu actualizările Shopify vă poate ajuta să vă asigurați că codul rămâne compatibil cu cele mai recente versiuni de Shopify și alte dependențe.
c. WebStorm
WebStorm este un mediu de dezvoltare integrat (IDE) pentru dezvoltarea web care oferă asistență avansată pentru codificare, instrumente de depanare și suport pentru tehnologiile web populare.
Pentru a utiliza pluginul Shopify Liquid Prettier în WebStorm, trebuie să urmați pașii de mai jos:
- Pasul 1 : Instalați pluginul Prettier din Piața de pluginuri JetBrains.Puteți găsi pluginul aici – https://plugins.jetbrains.com/plugin/10456-prettier.
- Pasul 2 : Instalați pluginul Shopify Liquid Prettier local în depozitul dvs.Îl puteți instala folosind fie npm, fie Yarn. Pentru a-l instala folosind npm, rulați următoarea comandă:
- npm install –save-dev prettier @shopify/prettier-plugin-liquid
- Alternativ, dacă preferați să utilizați Yarn, rulați următoarea comandă:
- yarn add –dev prettier @shopify/prettier-plugin-liquid
- Pasul 3 : Reporniți WebStorm.
- Pasul 4: În preferințele WebStorm, căutați Prettier și actualizați opțiunea „Run for files” pentru a include fișiere „lichide”.De asemenea, puteți bifa caseta de selectare „La salvare” pentru a formata automat fișierele la salvare.
- Pasul 5: Salvați setările pentru a activa pluginul.
Cu acești pași, puteți utiliza pluginul Shopify Liquid Prettier în WebStorm pentru a vă forma automat codul Liquid și pentru a îmbunătăți lizibilitatea codului.
Este important să țineți pasul cu actualizările Shopify, actualizând Pluginul Shopify Liquid Prettier în WebStorm. Când actualizați în mod regulat un plugin, puteți profita de noi funcții și îmbunătățiri, asigurându-vă că codul aplicației dvs. Shopify este formatat în mod constant corect și ușor de citit.
Concluzie
După cum puteți vedea, actualizările Shopify pot aduce o mulțime de îmbunătățiri modului în care funcționează magazinul dvs. online. Înarmat cu aceste actualizări, vă puteți lăsa concurenții în urmă. Și să profitați de aceste actualizări valoroase este acum mai ușor ca niciodată cu serviciile noastre de dezvoltare Shopify cu etichetă albă.
La E2M, ne angajăm în succesul dvs. și suntem mai mult decât bucuroși să vă ajutăm cu orice întrebări pe care le puteți avea despre aceste actualizări. Credem în afacerea ta și dorim să o vedem urcând la noi culmi. Contactați-ne dacă aveți nevoie de ajutor.
Profită de aceste actualizări valoroase și asigură-te că magazinul tău este la zi cu cele mai recente inovații Shopify.