A Shopify beépülő modul termék- és kollekciómegjelenítésének speciális testreszabásai

Ezek a speciális beállítások segítenek Önnek testre szabni a WordPress-kirakatát, személyre szabni az üzleti márkáját, és javítani a vásárlói élményt.

Shopify beépülő modul és Shopify kirakatkomponensek

A Shopify beépülő modulja a Shopify Storefront Web Components használatával készült. A következő komponensek szolgálnak a Shopify-kirakat építőelemeiként:

• Termékkártya-komponens: Ez a komponens az egyes termékek adatait jeleníti meg, jellemzően a termékoldalakon vagy a kollekcióoldalakon. Gyakran tartalmaz olyan elemeket, mint a termékkép, a név, az ár és a „Kosárba” gomb.
• Termék-gyorsnézet modális komponens: Ez a komponens egy modális ablakot jelenít meg a meglévő tartalom felett, amely termékrészleteket, egy „Kosárba” gombot és egy, a teljes termékadatok megtekintésére szolgáló hivatkozást tartalmaz.
• Termékadatlap-komponens: Ez a komponens egyetlen terméket jelenít meg a teljes termékadatokkal. Minden termékadatlap-komponens egyedi URL-címmel rendelkezik.
• Kollekciókomponens: Ez a komponens az Ön által létrehozott termékkollekciókat jeleníti meg.

A Shopify-termékek és -kollekciók megjelenítésének testreszabása

A beépülő modul alapértelmezett Shopify kirakatkomponensei eszközöket biztosítanak a zökkenőmentes vásárlási élmény megteremtéséhez. Lehetősége van arra is, hogy rugalmasan testre szabja ezen komponensek megjelenítését, hogy azok igazodjanak az Ön egyedi márkaidentitásához és tervezési követelményeihez.

Az ilyen testreszabások elvégzéséhez hozzáféréssel kell rendelkeznie a WordPress-téma fájljainak és könyvtárainak módosításához. A folyamat során egy dedikált mappát kell létrehoznia az aktív WordPress-téma könyvtárában.

Lépések:

1. A Shopify mappa létrehozása: Első lépésként hozzon létre egy új, Shopify nevű mappát közvetlenül az aktív téma könyvtárában. Ez a mappa szolgál majd az egyéni komponens-felülírások központi helyéül.
2. Egyes komponensek felülírása: Egy adott komponens módosításához adjon hozzá egy meghatározott nevű PHP-fájlt az újonnan létrehozott Shopify mappához. A felülíró fájlok elnevezési konvenciója kulcsfontosságú ahhoz, hogy a beépülő modul felismerje és alkalmazza az egyéni verziókat:
   • A Termékkártya-komponens felülírásához hozzon létre egy product-card.php nevű PHP-fájlt a Shopify mappában.
   • A Termék-gyorsnézet modális komponens felülírásához hozzon létre egy modal.php nevű PHP-fájlt a Shopify mappában.
   • A Termékadatlap-komponens felülírásához hozzon létre egy pdp.php nevű PHP-fájlt a Shopify mappában.
   • A Kollekciókomponens felülírásához hozzon létre egy component.php nevű PHP-fájlt a Shopify mappában.

Miután létrehozta az egyéni PHP-fájlt, a bővítmény figyelmen kívül hagyja az alapértelmezett komponensfájlját az adott elemhez. Ezekben a felülíró fájlokban bármilyen kódot megvalósíthat, a statikus HTML-blokkoktól a komplex PHP-logikáig.

Bár a következetesség és a beépített Shopify-funkciókhoz való hozzáférés érdekében erősen ajánlott a Shopify Storefront Web Components használata (ahogy azt az alapértelmezett bővítménystruktúra is használja), nem kell ezekre korlátoznia magát. Integrálhat más módszereket is a termék- és kollekcióadatok lekérésére és megjelenítésére, ami speciális testreszabásokat tesz lehetővé.

További információkért és a helyes gyakorlatokért tanulmányozza a WordPress-bővítmény fejlesztői dokumentációját.

A Shopify-termékek és -kollekciók átírása

Amikor közzétesz egy terméket vagy kollekciót a Shopifyban, minden terméknek és kollekciónak egyedi URL-je van. Alapértelmezés szerint ezek az URL-ek a Shopify-doménjével jönnek létre. Az átírási funkcióval ezeket az egyedi URL-eket a nyilvános WordPress-doménjével érheti el.

Lépések:

1. A Shopify-bővítményben lépjen a Beállítások menüpontra.
2. A Speciális fülön győződjön meg róla, hogy a Shopify-hivatkozások átírása szakaszban lévő két jelölőnégyzet be van jelölve.
3. Lépjen az Állandó hivatkozások menüpontra.
4. Kattintson a Mentés gombra az új szabály alkalmazásához.
5. Lépjen be a Shopify adminisztrációs felületére, majd navigáljon annak a terméknek vagy kollekciónak az adatlapjára, amelyhez WordPress-hivatkozást szeretne létrehozni.
6. A keresőmotor-ismertető kártyáján megjelenik egy URL, amely közvetlenül a termékére vagy kollekciójára irányítja a vásárlókat. Például: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
7. Adja hozzá a products/huskee-reusable-cup részt a WordPress-webhelye URL-címének végéhez. Például: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

A termékkártya viselkedésének testreszabása

A Shopify-kirakatkomponensek esetében kétféle termékadatlap-kártyatípus létezik:

1. Gyorsnézet: Amikor a vásárló a termékkártya fölé viszi az egeret, megjelenik a Gyorsvásárlás lehetőség. Erre kattintva a termékadatok a háttérben, felugró vagy modális stílusban, a meglévő tartalom felett jelennek meg.
2. Részletes termékoldal: Amikor a vásárló a termékkártyára, például a képre vagy a termék nevére kattint, a termékadatok egyedi URL-címmel, teljes oldalas nézetben jelennek meg.

Módosíthatja ezt a beállítást, hogy csak a gyorsnézet, csak a részletes termékoldal vagy mindkettő jelenjen meg.

Lépések:

1. A WordPressben a Shopify-bővítményben lépjen a Beállítások menüpontra.
2. A Speciális fülön lépjen a Terméknézet szakaszhoz.
3. Válassza ki az üzletének leginkább megfelelő opciót.
4. Kattintson a Mentés gombra.