Pomoć
Prijavi se

Napredne prilagodbe prikaza proizvoda i kolekcija za dodatak za Shopify

Ove vam napredne postavke pomažu prilagoditi internetsku trgovinu na WordPressu, personalizirati vašu poslovnu marku i poboljšati iskustvo kupnje vaših korisnika.

Na ovoj stranici

Dodatak za Shopify i komponente internetske trgovine na platformi Shopify

Dodatak za Shopify izrađen je uz pomoć komponenti Shopify Storefront Web Components. Sljedeće se komponente upotrebljavaju kao sastavni blokovi vaše internetske trgovine na platformi Shopify:

  • Komponenta kartice proizvoda (Product Card Component): ova komponenta prikazuje informacije o pojedinačnom proizvodu koje se obično prikazuju u oglasima proizvoda ili na stranicama kolekcija. Često uključuje elemente kao što su slika proizvoda, naslov, cijena i gumb Dodaj u košaricu.
  • Modalna komponenta brzog pregleda proizvoda (Product Quick View Modal Component): ova komponenta prikazuje modalni prozor preko postojećeg sadržaja s pojedinostima o proizvodu, gumbom Dodaj u košaricu i poveznicom za pregled svih pojedinosti o proizvodu.
  • Komponenta stranice s pojedinostima proizvoda (Product Detail Page Component): ova komponenta prikazuje jedan proizvod sa svim pojedinostima. Svaka komponenta stranice s pojedinostima proizvoda ima jedinstveni URL.
  • Komponenta kolekcije (Collection Component): ova komponenta prikazuje kolekcije proizvoda koje ste izradili.

Prilagodba prikaza Shopify proizvoda i kolekcija

Zadane komponente internetske trgovine na platformi Shopify u vašem dodatku imaju alate koji pomažu u stvaranju besprijekornog iskustva kupnje. Također imate fleksibilnost prilagodbe prikaza tih komponenti kako biste ih uskladili sa specifičnim identitetom svoje marke i zahtjevima dizajna.

Da biste poduzeli takve prilagodbe, morate imati pristup izmjenama datoteka i direktorija u svojoj WordPress temi. Postupak uključuje izradu namjenske mape unutar direktorija vaše aktivne WordPress teme.

Koraci:

  1. Izradite mapu Shopify: započnite izradom nove mape pod nazivom Shopify izravno unutar direktorija aktivne teme. Ova mapa služi kao središnja lokacija za vaša prilagođena nadjačavanja (overrides) komponenti.
  2. Nadjačavanje pojedinačnih komponenti: da biste izmijenili određenu komponentu, dodajte PHP datoteku s određenim nazivom unutar novostvorene Shopify mape. Konvencija imenovanja tih datoteka za nadjačavanje ključna je kako bi dodatak prepoznao i primijenio vaše prilagođene verzije:
    • Kako biste nadjačali komponentu kartice proizvoda (Product Card Component), izradite PHP datoteku pod nazivom product-card.php unutar mape Shopify.
    • Kako biste nadjačali modalnu komponentu brzog pregleda proizvoda (Product Quick View Modal Component), izradite PHP datoteku pod nazivom modal.php unutar mape Shopify.
    • Kako biste nadjačali komponentu stranice s pojedinostima proizvoda (Product Detail Page Component), izradite PHP datoteku pod nazivom pdp.php unutar mape Shopify.
    • Kako biste nadjačali komponentu kolekcije (Collection Component), izradite PHP datoteku pod nazivom component.php unutar mape Shopify.

Nakon izrade prilagođene PHP datoteke, dodatak zanemaruje zadanu datoteku komponente za taj specifični element. Unutar tih datoteka za nadjačavanje možete primijeniti bilo kakav kôd, od statičnih HTML blokova do složene PHP logike.

Iako se za dosljednost i pristup ugrađenim Shopify funkcijama preporučuje korištenje komponenti Shopify Storefront Web Components (kako se upotrebljavaju u zadanoj strukturi dodatka), niste ograničeni na njih. Možete integrirati i druge načine za dohvaćanje i prikaz podataka o proizvodima i kolekcijama, što omogućuje napredne prilagodbe.

Za više informacija i najbolje prakse pogledajte dokumentaciju za razvojne programere WordPress dodataka.

Prepisivanje URL-ova za Shopify proizvode i kolekcije

Kada na platformi Shopify objavite proizvod ili kolekciju, svaki proizvod i kolekcija imaju jedinstveni URL. Prema zadanim postavkama ovi se URL-ovi kreiraju s vašom Shopify domenom. Putem funkcije prepisivanja (rewrites) možete pristupiti tim jedinstvenim URL-ovima sa svoje javne WordPress domene.

Koraci:

  1. U dodatku za Shopify idite na Postavke.
  2. Na kartici Napredno provjerite jesu li označena dva potvrdna okvira u odjeljku Prepisivanje Shopify poveznica.
  3. Idite na Stalne veze.
  4. Kliknite na Spremi da biste primijenili to novo pravilo.
  5. Idite u administratorski alat za Shopify, a zatim idite na stranicu s pojedinostima proizvoda ili kolekcije za koje želite izraditi WordPress poveznicu.
  6. Na kartici oglasa na tražilici prikazan je URL koji usmjerava korisnike izravno na vaš proizvod ili kolekciju. Na primjer: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
  7. Dodajte products/huskee-reusable-cup na kraj URL-a vašeg WordPress web-mjesta. Na primjer: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Prilagodba ponašanja kartice proizvoda

Uz komponente internetske trgovine na platformi Shopify dostupne su dvije vrste kartica s pojedinostima o proizvodu:

  1. Brzi pregled: kada zadržite pokazivač miša iznad kartice proizvoda, korisnik ima opciju brzog pregleda (Quick Shop). Nakon klika pojedinosti proizvoda prikazuju se kao skočni ili modalni prozor iznad postojećeg sadržaja u pozadini.
  2. Detaljna stranica proizvoda: kada korisnik klikne na karticu proizvoda, kao što je slika ili naziv proizvoda, pojedinosti proizvoda prikazuju se na cijeloj stranici uz jedinstveni URL.

Ovu postavku možete promijeniti kako bi se prikazivao samo brzi pregled, samo detaljna stranica proizvoda ili oboje.

Koraci:

  1. U dodatku za Shopify u WordPressu idite na Postavke.
  2. Na kartici Napredno idite na odjeljak Prikaz proizvoda.
  3. Odaberite opciju koja najbolje odgovara vašoj trgovini.
  4. Kliknite Spremi.