Personalizări avansate pentru afișarea produselor și colecțiilor pentru pluginul Shopify

Aceste setări avansate vă ajută să vă personalizați magazinul online pe WordPress, să vă personalizați brandul afacerii și să îmbunătățiți experiența de cumpărare a clienților dvs.

Pluginul Shopify și componentele magazinului online Shopify

Pluginul Shopify este creat cu Shopify Storefront Web Components. Următoarele componente sunt utilizate ca elemente de bază ale magazinului dvs. online Shopify:

  • Componenta Card de produs: această componentă afișează informații individuale despre produs, de obicei afișate pe listările de produse sau pe paginile de colecție. Aceasta include adesea elemente precum imaginea produsului, titlul, prețul și un buton Adăugare în coș.
  • Componenta fereastră modală de vizualizare rapidă a produsului: această componentă afișează o fereastră modală peste conținutul existent, cu detalii despre produs, un buton Adăugare în coș și un link pentru a vizualiza detaliile complete ale produsului.
  • Componenta Pagină cu detalii despre produs: această componentă afișează un singur produs, cu detalii complete despre produs. Fiecare componentă de pagină cu detalii despre produs are un URL unic.
  • Componenta Colecție: această componentă afișează colecții de produse pe care le-ați creat.

Personalizarea afișării produselor și colecțiilor Shopify

Componentele implicite ale magazinului online Shopify din pluginul dvs. au instrumente care vă ajută să creați o experiență de cumpărare fluidă. De asemenea, aveți flexibilitatea de a personaliza afișarea acestor componente pentru a se alinia cu identitatea specifică a brandului dvs. și cu cerințele de design.

Pentru a realiza astfel de personalizări, trebuie să aveți acces pentru a modifica fișierele și directoarele temei dvs. WordPress. Procesul implică crearea unui folder dedicat în directorul temei dvs. WordPress active.

Pași:

  1. Creați folderul Shopify: începeți prin a crea un folder nou, denumit Shopify, direct în directorul temei dvs. active. Acest folder servește ca locație centrală pentru suprascrierile componentelor dvs. personalizate.
  2. Suprascrierea componentelor individuale: pentru a modifica o anumită componentă, adăugați un fișier PHP cu un nume desemnat în interiorul folderului „ Shopify ” nou creat. Convenția de denumire pentru aceste fișiere de suprascriere este esențială pentru ca pluginul să recunoască și să aplice versiunile dvs. personalizate:
    • Pentru a suprascrie Componenta Card de produs, creați un fișier PHP denumit product-card.php în folderul Shopify.
    • Pentru a suprascrie Componenta fereastră modală de vizualizare rapidă a produsului, creați un fișier PHP denumit modal.php în folderul Shopify.
    • Pentru a suprascrie Componenta Pagină de detalii despre produs, creați un fișier PHP denumit pdp.php în folderul Shopify.
    • Pentru a suprascrie Componenta Colecție, creați un fișier PHP denumit component.php în folderul Shopify.

După crearea fișierului PHP personalizat, pluginul ignoră fișierul său de componentă implicit pentru acel element specific. Puteți implementa orice cod în aceste fișiere de suprascriere, de la blocuri HTML statice la logică PHP complexă.

Deși este foarte recomandat să utilizați Componentele web ale magazinului online Shopify (așa cum sunt utilizate în structura implicită a pluginului) pentru consecvență și acces la funcționalitățile Shopify integrate, nu sunteți limitat la acestea. Puteți integra alte metode pentru preluarea și afișarea datelor despre produse și colecții, permițând personalizări avansate.

Pentru mai multe informații și cele mai bune practici, consultați documentația pentru dezvoltatorii pluginului WordPress.

Rescrieri ale produselor și colecțiilor Shopify

Când publicați un produs sau o colecție pe Shopify, fiecare produs și fiecare colecție are un URL unic. În mod implicit, aceste URL-uri sunt create cu domeniul dvs. Shopify. Cu funcția de rescriere, puteți accesa acele URL-uri unice cu domeniul dvs. public WordPress.

Pași:

  1. Din pluginul Shopify, accesați Setări.
  2. În fila Avansat, asigurați-vă că cele două casete de selectare din secțiunea Rescrieri linkuri Shopify sunt activate.
  3. Accesați Permalink.
  4. Faceți clic pe Salvare pentru a aplica această regulă nouă.
  5. Accesați panoul de administrare Shopify, apoi navigați la pagina de detalii a produsului sau a colecției pentru care doriți să creați un link WordPress.
  6. În cardul listării pentru motoarele de căutare, este afișat un URL care direcționează clienții direct către produsul sau colecția dvs. De exemplu: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
  7. Adăugați products/huskee-reusable-cup la sfârșitul URL-ului site-ului dvs. WordPress. De exemplu: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Personalizarea comportamentului cardului de produs

Cu componentele magazinului online Shopify, există două tipuri de carduri cu detalii despre produs:

  1. Vizualizare rapidă: atunci când plasează cursorul pe cardul de produs, clientul are opțiunea Quick Shop. La clic, detaliile produsului sunt afișate într-un stil pop-up sau modal peste conținutul existent din fundal.
  2. Pagină de produs detaliată: când un client face clic pe cardul de produs, cum ar fi pe imagine sau pe numele produsului, detaliile produsului se afișează într-o vizualizare pe pagină completă cu un URL unic.

Puteți modifica această setare pentru a afișa fie doar o vizualizare rapidă, fie doar o pagină de produs detaliată, fie ambele.

Pași:

  1. Din pluginul Shopify în WordPress, accesați Setări.
  2. Din fila Avansat, accesați secțiunea Vizualizare produs.
  3. Alegeți opțiunea care se potrivește cel mai bine magazinului dvs.
  4. Faceți clic pe Salvare.