Avanserte tilpasninger av produkt- og samlingsvisning for Shopify-pluginen

Disse avanserte innstillingene hjelper deg med å tilpasse utstillingsvinduet på WordPress, tilpasse bedriftens merkevare og forbedre kundenes kjøpsopplevelse.

Shopify-plugin og Shopify-utstillingsvindu-komponenter

Shopify-pluginen er bygget med Shopify Storefront Web Components. Følgende komponenter brukes som byggeklosser for Shopify-utstillingsvinduet ditt:

• Produktkort-komponent: Denne komponenten viser individuell produktinformasjon, vanligvis vist på produktoppføringer eller samlingssider. Den inneholder ofte elementer som produktbilde, tittel, pris og en Legg i handlekurv-knapp.
• Modal komponent for hurtigvisning av produkt: Denne komponenten viser en modal over eksisterende innhold med produktdetaljer, en Legg i handlekurv-knapp og en kobling for å se alle produktdetaljene.
• Komponent for produktdetaljside: Denne komponenten viser ett enkelt produkt, med alle produktdetaljer. Hver komponent for produktdetaljside har en unik URL-adresse.
• Samlingskomponent: Denne komponenten viser samlinger med produkter som du har opprettet.

Tilpasning av visning for Shopify-produkter og -samlinger

Standard Shopify-utstillingsvindu-komponenter i pluginen din har verktøy som bidrar til å skape en sømløs handleopplevelse. Du har også fleksibiliteten til å tilpasse visningen av disse komponentene for å passe med din spesifikke merkevareidentitet og designkrav.

For å utføre slike tilpasninger, må du ha tilgang til å endre WordPress-temafiler og -kataloger. Prosessen innebærer å opprette en dedikert mappe i katalogen til det aktive WordPress-temaet ditt.

Trinn:

1. Opprett Shopify-mappen: Start med å opprette en ny mappe med navnet Shopify direkte i katalogen til det aktive temaet ditt. Denne mappen fungerer som den sentrale plasseringen for egendefinerte komponentoverstyringer.
2. Overstyr individuelle komponenter: For å endre en bestemt komponent, legger du til en PHP-fil med et angitt navn i den nyopprettede Shopify mappen. Navnekonvensjonen for disse overstyringsfilene er avgjørende for at pluginen skal gjenkjenne og bruke dine egendefinerte versjoner:
   • For å overstyre produktkort-komponenten, oppretter du en PHP-fil med navnet product-card.php i Shopify-mappen.
   • For å overstyre den modale komponenten for hurtigvisning av produkt, oppretter du en PHP-fil med navnet modal.php i Shopify-mappen.
   • For å overstyre komponenten for produktdetaljsiden oppretter du en PHP-fil med navnet pdp.php i Shopify-mappen.
   • For å overstyre samlingskomponenten oppretter du en PHP-fil med navnet component.php i Shopify-mappen.

Når den egendefinerte PHP-filen er opprettet, ignorerer programtillegget standardkomponentfilen for det spesifikke elementet. Du kan implementere hvilken som helst kode i disse overstyringsfilene, fra statiske HTML-blokker til kompleks PHP-logikk.

Selv om det på det sterkeste anbefales å bruke Shopify Storefront Web Components (som brukes i standardstrukturen til programtillegget) for konsekvens og tilgang til innebygde Shopify-funksjoner, er du ikke begrenset til dem. Du kan integrere andre metoder for å hente og vise produkt- og samlingsdata, noe som gir mulighet for avanserte tilpasninger.

For mer informasjon og beste praksis, se utviklerdokumentasjonen for WordPress-programtillegget.

Omskrivinger av Shopify-produkter og -samlinger

Når du publiserer et produkt eller en samling i Shopify, har hvert produkt og hver samling en unik URL-adresse. Disse URL-adressene opprettes som standard med Shopify-domenet ditt. Med omskrivingsfunksjonen kan du få tilgang til disse unike URL-adressene med det offentlige WordPress-domenet ditt.

Trinn:

1. Gå til Innstillinger i Shopify-programtillegget.
2. I fanen Avansert sørger du for at de to avmerkingsboksene i delen Omskrivinger av Shopify-lenker er aktivert.
3. Gå til Permalenker.
4. Klikk på Lagre for å ta i bruk den nye regelen.
5. Gå til Shopify-administrator, og gå deretter til produktdetaljsiden eller samlingsdetaljsiden du vil opprette en WordPress-lenke for.
6. På kortet for søkemotoroppføringen vises en URL-adresse som kobler kunder direkte til produktet eller samlingen din. For eksempel: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
7. Legg til products/huskee-reusable-cup på slutten av URL-adressen til WordPress-nettstedet ditt. For eksempel: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Tilpass atferden til produktkortet

Med Shopify-utstillingsvindu-komponenter finnes det to typer produktdetaljkort:

1. Hurtigvisning: Når en kunde holder pekeren over produktkortet, vises alternativet Hurtigkjøp. Når kunden klikker på det, vises produktdetaljene i en popup- eller modal stil over eksisterende innhold i bakgrunnen.
2. Detaljert produktside: Når en kunde klikker på produktkortet, for eksempel på bildet eller produktnavnet, vises produktdetaljene i en fullsidevisning med en unik URL-adresse.

Du kan endre denne innstillingen til å bare vise en hurtigvisning, bare en detaljert produktside eller begge deler.

Trinn:

1. I Shopify-programtillegget i WordPress går du til Innstillinger.
2. Fra Avansert-fanen går du til Produktvisning-delen.
3. Velg alternativet som passer best for butikken din.
4. Klikk på Lagre.