การปรับแต่งการแสดงผลสินค้าและคอลเลกชันขั้นสูงสำหรับปลั๊กอิน Shopify

การตั้งค่าขั้นสูงเหล่านี้จะช่วยให้คุณปรับแต่งหน้าร้านของคุณบน WordPress ปรับแบรนด์ธุรกิจของคุณให้เป็นส่วนตัว และปรับปรุงประสบการณ์การซื้อของลูกค้า

ปลั๊กอิน Shopify และส่วนประกอบหน้าร้านของ Shopify

ปลั๊กอิน Shopify สร้างขึ้นด้วย Shopify Storefront Web Components ส่วนประกอบต่อไปนี้จะใช้เป็นส่วนประกอบพื้นฐานของหน้าร้าน Shopify ของคุณ:

• ส่วนประกอบบัตรสินค้า: ส่วนประกอบนี้จะแสดงข้อมูลสินค้าแต่ละรายการ ซึ่งโดยทั่วไปจะแสดงบนหน้ารายการสินค้าหรือหน้าคอลเลกชัน ซึ่งมักจะประกอบด้วยองค์ประกอบต่างๆ เช่น รูปภาพสินค้า ชื่อ ราคา และปุ่มเพิ่มลงในตะกร้าสินค้า
• ส่วนประกอบโมดอลแสดงตัวอย่างด่วนของสินค้า: ส่วนประกอบนี้จะแสดงโมดอลซ้อนทับเนื้อหาที่มีอยู่ พร้อมด้วยรายละเอียดสินค้า ปุ่มเพิ่มลงในตะกร้าสินค้า และลิงก์สำหรับดูรายละเอียดสินค้าทั้งหมด
• ส่วนประกอบหน้ารายละเอียดสินค้า: ส่วนประกอบนี้จะแสดงสินค้าแต่ละรายการพร้อมรายละเอียดสินค้าทั้งหมด ส่วนประกอบหน้ารายละเอียดสินค้าแต่ละรายการจะมี URL ที่ไม่ซ้ำกัน
• ส่วนประกอบคอลเลกชัน: ส่วนประกอบนี้จะแสดงคอลเลกชันสินค้าที่คุณสร้างขึ้น

การปรับแต่งการแสดงผลสินค้าและคอลเลกชันของ Shopify

ส่วนประกอบหน้าร้านของ Shopify ที่เป็นค่าเริ่มต้นในปลั๊กอินของคุณมีเครื่องมือที่จะช่วยสร้างประสบการณ์การช้อปปิ้งที่ราบรื่น นอกจากนี้ คุณยังมีความยืดหยุ่นในการปรับแต่งการแสดงผลของส่วนประกอบเหล่านี้ให้สอดคล้องกับเอกลักษณ์ของแบรนด์และข้อกำหนดด้านการออกแบบของคุณโดยเฉพาะได้

หากต้องการดำเนินการปรับแต่งดังกล่าว คุณต้องมีสิทธิ์เข้าถึงเพื่อแก้ไขไฟล์และไดเรกทอรีธีม WordPress ของคุณ กระบวนการนี้เกี่ยวข้องกับการสร้างโฟลเดอร์เฉพาะภายในไดเรกทอรีธีม WordPress ที่ใช้งานอยู่ของคุณ

ขั้นตอน:

1. สร้างโฟลเดอร์ Shopify: เริ่มต้นด้วยการสร้างโฟลเดอร์ใหม่ชื่อ Shopify ภายในไดเรกทอรีธีมที่ใช้งานอยู่ของคุณโดยตรง โฟลเดอร์นี้จะทำหน้าที่เป็นตำแหน่งที่ตั้งส่วนกลางสำหรับการเขียนทับส่วนประกอบที่คุณกำหนดเอง
2. การเขียนทับส่วนประกอบแต่ละรายการ: หากต้องการแก้ไขส่วนประกอบที่ต้องการ ให้เพิ่มไฟล์ PHP ที่มีชื่อที่กำหนดไว้ภายในโฟลเดอร์ Shopify ที่สร้างขึ้นใหม่ การตั้งชื่อไฟล์สำหรับเขียนทับเหล่านี้มีความสำคัญอย่างยิ่งเพื่อให้ปลั๊กอินจดจำและปรับใช้เวอร์ชันที่คุณกำหนดเองได้:
   • หากต้องการเขียนทับส่วนประกอบบัตรสินค้า ให้สร้างไฟล์ PHP ชื่อ product-card.php ภายในโฟลเดอร์ Shopify
   • หากต้องการเขียนทับส่วนประกอบโมดอลแสดงตัวอย่างด่วนของสินค้า ให้สร้างไฟล์ PHP ชื่อ modal.php ภายในโฟลเดอร์ Shopify
   • หากต้องการแทนที่ส่วนประกอบหน้ารายละเอียดสินค้า ให้สร้างไฟล์ PHP ที่ชื่อว่า pdp.php ภายในโฟลเดอร์ Shopify
   • หากต้องการแทนที่ส่วนประกอบคอลเลกชัน ให้สร้างไฟล์ PHP ที่ชื่อว่า component.php ภายในโฟลเดอร์ Shopify

หลังจากที่คุณสร้างไฟล์ PHP แบบปรับแต่งเองแล้ว ปลั๊กอินจะละเว้นไฟล์ส่วนประกอบเริ่มต้นสำหรับองค์ประกอบดังกล่าว คุณสามารถนำโค้ดใดๆ มาใช้ในไฟล์แทนที่เหล่านี้ได้ ตั้งแต่บล็อก HTML แบบสแตติกไปจนถึงตรรกะ PHP ที่ซับซ้อน

แม้ว่าจะขอแนะนำอย่างยิ่งให้ใช้ประโยชน์จาก Shopify Storefront Web Components (ตามที่ใช้งานในโครงสร้างปลั๊กอินเริ่มต้น) เพื่อความสอดคล้องและการเข้าถึงฟังก์ชันการทำงานของ Shopify ที่มีมาให้ในตัว แต่คุณก็ไม่ได้ถูกจำกัดอยู่เพียงแค่นั้น คุณสามารถผสานรวมวิธีการอื่นๆ เพื่อดึงและแสดงข้อมูลสินค้าและคอลเลกชัน ซึ่งจะช่วยให้สามารถปรับแต่งขั้นสูงได้

สำหรับข้อมูลเพิ่มเติมและหลักปฏิบัติที่ดีที่สุด โปรดดูที่เอกสารสำหรับผู้พัฒนาปลั๊กอิน WordPress

การเขียน URL ของสินค้าและคอลเลกชัน Shopify ขึ้นใหม่

เมื่อคุณเผยแพร่สินค้าหรือคอลเลกชันบน Shopify สินค้าและคอลเลกชันแต่ละรายการจะมี URL ที่ไม่ซ้ำกัน โดยค่าเริ่มต้นแล้ว URL เหล่านี้จะสร้างขึ้นด้วยโดเมน Shopify ของคุณ แต่ด้วยฟังก์ชันการเขียน URL ขึ้นใหม่ คุณจะสามารถเข้าถึง URL ที่ไม่ซ้ำกันเหล่านั้นได้ด้วยโดเมน WordPress สาธารณะของคุณ

ขั้นตอน:

1. จากปลั๊กอิน Shopify ให้ไปที่การตั้งค่า
2. ในแท็บขั้นสูง ตรวจสอบให้แน่ใจว่าช่องทำเครื่องหมายสองช่องในส่วนการเขียนลิงก์ Shopify ขึ้นใหม่เปิดใช้งานอยู่
3. ไปที่ลิงก์ถาวร
4. คลิกบันทึกเพื่อใช้กฎใหม่นี้
5. ไปที่ส่วนผู้ดูแล Shopify ของคุณ แล้วไปที่หน้ารายละเอียดสินค้าหรือคอลเลกชันที่คุณต้องการสร้างลิงก์ WordPress
6. ในการ์ดการทำรายการสินค้าของเครื่องมือค้นหา จะมี URL ที่ลิงก์ลูกค้าไปยังสินค้าหรือคอลเลกชันของคุณโดยตรงแสดงอยู่ ตัวอย่างเช่น https://johns-apparel.myshopify.com › products › huskee-reusable-cup
7. เพิ่ม products/huskee-reusable-cup ต่อท้าย URL เว็บไซต์ WordPress ของคุณ ตัวอย่างเช่น https://johns-apparel-wordpress.com/products/huskee-reusable-cup

ปรับแต่งลักษณะการทำงานของการ์ดสินค้าของคุณ

ด้วยส่วนประกอบหน้าร้านของ Shopify จะมีการ์ดรายละเอียดสินค้าสองประเภทดังนี้

1. มุมมองด่วน: เมื่อวางเมาส์เหนือการ์ดสินค้า ลูกค้าจะมีตัวเลือกให้ เลือกซื้อด่วน ซึ่งเมื่อคลิกแล้ว รายละเอียดสินค้าจะแสดงในรูปแบบป๊อปอัปหรือโมดอลที่ปรากฏทับเนื้อหาที่มีอยู่ในพื้นหลัง
2. หน้ารายละเอียดสินค้า: เมื่อลูกค้าคลิกที่การ์ดสินค้า เช่น บนรูปภาพหรือชื่อสินค้า รายละเอียดสินค้าจะแสดงในมุมมองเต็มหน้าพร้อมกับ URL ที่ไม่ซ้ำกัน

คุณสามารถเปลี่ยนการตั้งค่านี้เพื่อแสดงเฉพาะมุมมองด่วน แสดงเฉพาะหน้ารายละเอียดสินค้า หรือแสดงทั้งสองอย่าง

ขั้นตอน:

1. จากปลั๊กอิน Shopify ใน WordPress ให้ไปที่การตั้งค่า
2. จากแท็บขั้นสูง ให้ไปที่ส่วนมุมมองสินค้า
3. เลือกตัวเลือกที่เหมาะกับร้านค้าของคุณที่สุด
4. คลิกบันทึก