Shopify-laajennuksen tuotteiden ja kokoelmien näytön tarkennetut mukautukset

Näiden tarkennettujen asetusten avulla voit mukauttaa myyntipaikkaasi WordPressissä, muokata yrityksesi brändiä ja parantaa asiakkaidesi ostokokemusta.

Shopify-laajennus ja Shopifyn myyntipaikan komponentit

Shopify-laajennus on rakennettu Shopify Storefront Web Components -komponenteilla. Seuraavia komponentteja käytetään Shopify-myyntipaikkasi rakennuspalikoina:

• Tuotekorttikomponentti: Tämä komponentti näyttää yksittäisen tuotteen tiedot, ja se näytetään yleensä tuotelistauksissa tai kokoelmasivuilla. Se sisältää usein elementtejä, kuten tuotekuvan, nimen, hinnan ja Lisää ostoskoriin -painikkeen.
• Tuotteen pikakatselun modaalinen komponentti: Tämä komponentti näyttää olemassa olevan sisällön päällä modaalisen ikkunan, joka sisältää tuotetiedot, Lisää ostoskoriin -painikkeen ja linkin tuotteen kaikkien tietojen tarkastelemiseen.
• Tuotetietosivun komponentti: Tämä komponentti näyttää yksittäisen tuotteen ja sen kaikki tiedot. Jokaisella tuotetietosivun komponentilla on yksilöllinen URL-osoite.
• Kokoelmakomponentti: Tämä komponentti näyttää luomiasi tuotekokoelmia.

Shopify-tuotteiden ja -kokoelmien näytön mukauttaminen

Laajennuksesi oletusarvoisissa Shopifyn myyntipaikan komponenteissa on työkaluja, jotka auttavat luomaan saumattoman ostokokemuksen. Sinulla on myös mahdollisuus mukauttaa näiden komponenttien näyttöä vastaamaan brändisi identiteettiä ja suunnitteluvaatimuksia.

Tällaisten mukautusten tekeminen edellyttää, että sinulla on pääsy muokata WordPress-teemasi tiedostoja ja hakemistoja. Prosessiin kuuluu erillisen kansion luominen aktiivisen WordPress-teemasi hakemistoon.

Vaiheet:

1. Luo Shopify-kansio: Aloita luomalla uusi Shopify-niminen kansio suoraan aktiivisen teemasi hakemistoon. Tämä kansio toimii mukautettujen komponenttien ohitusten keskeisenä sijaintina.
2. Yksittäisten komponenttien ohittaminen: Jos haluat muokata tiettyä komponenttia, lisää PHP-tiedosto tietyllä nimellä juuri luotuun Shopify -kansioon. Näiden ohitustiedostojen nimeämiskäytäntö on ratkaisevan tärkeä, jotta laajennus tunnistaa ja ottaa käyttöön mukautetut versiosi:
   • Jos haluat ohittaa tuotekorttikomponentin, luo Shopify-kansioon product-card.php-niminen PHP-tiedosto.
   • Jos haluat ohittaa tuotteen pikakatselun modaalisen komponentin, luo Shopify-kansioon modal.php-niminen PHP-tiedosto.
   • Voit korvata tuotetietosivun komponentin luomalla Shopify-kansioon PHP-tiedoston nimeltä pdp.php.
   • Voit korvata kokoelmakomponentin luomalla Shopify-kansioon PHP-tiedoston nimeltä component.php.

Kun mukautettu PHP-tiedosto on luotu, lisäosa ohittaa kyseisen elementin oletuskomponenttitiedoston. Voit toteuttaa näissä korvaavissa tiedostoissa mitä tahansa koodia staattisista HTML-lohkoista monimutkaiseen PHP-logiikkaan.

Vaikka on erittäin suositeltavaa käyttää Shopify Storefront Web Components -verkkokomponentteja (kuten lisäosan oletusrakenteessa on tehty) johdonmukaisuuden ja sisäänrakennettujen Shopify-toimintojen käyttöoikeuden vuoksi, käyttösi ei rajoitu niihin. Voit integroida muita menetelmiä tuote- ja kokoelmatietojen noutamiseen ja näyttämiseen, mikä mahdollistaa kehittyneet mukautukset.

Lisätietoja ja parhaita käytäntöjä löydät WordPress-lisäosan kehittäjädokumentaatiosta.

Shopify-tuotteiden ja -kokoelmien uudelleenkirjoitukset

Kun julkaiset tuotteen tai kokoelman Shopifyssa, jokaisella tuotteella ja kokoelmalla on yksilöllinen URL-osoite. Oletuksena nämä URL-osoitteet luodaan Shopify-verkkotunnuksellasi. Uudelleenkirjoitustoiminnolla voit käyttää näitä yksilöllisiä URL-osoitteita julkisella WordPress-verkkotunnuksellasi.

Vaiheet:

1. Siirry Shopify-lisäosassa kohtaan Asetukset.
2. Varmista Lisäasetukset-välilehdessä, että Shopify-linkkien uudelleenkirjoitukset -osion kaksi valintaruutua on aktivoitu.
3. Siirry kohtaan Osoiterakenne.
4. Ota uusi sääntö käyttöön klikkaamalla Tallenna.
5. Siirry Shopifyn ohjausnäkymään ja siirry sen tuotteen tai kokoelman tietosivulle, jolle haluat luoda WordPress-linkin.
6. Hakukonelistauksen kortissa on näkyvissä URL-osoite, joka linkittää asiakkaat suoraan tuotteeseesi tai kokoelmaasi. Esimerkki: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
7. Lisää products/huskee-reusable-cup WordPress-sivustosi URL-osoitteen loppuun. Esimerkki: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Tuotekortin toiminnan mukauttaminen

Shopifyn myyntipaikkakomponenteissa on kahdentyyppisiä tuotetietokortteja:

1. Pikanäkymä: Kun hiiren osoitin viedään tuotekortin päälle, asiakas voi valita Pikaosto-vaihtoehdon. Sitä klikattaessa tuotetiedot näytetään ponnahdusikkunana tai modaalisena ikkunana olemassa olevan sisällön päällä.
2. Yksityiskohtainen tuotesivu: Kun asiakas klikkaa tuotekorttia, esimerkiksi kuvaa tai tuotteen nimeä, tuotetiedot näytetään koko sivun näkymässä, jolla on yksilöllinen URL-osoite.

Voit muuttaa tätä asetusta niin, että näkyviin tulee vain pikanäkymä, vain yksityiskohtainen tuotesivu tai molemmat.

Vaiheet:

1. Siirry WordPressin Shopify-lisäosassa kohtaan Asetukset.
2. Siirry Lisäasetukset-välilehdellä Tuotenäkymä-osioon.
3. Valitse kaupallesi parhaiten sopiva vaihtoehto.
4. Klikkaa Tallenna.