Shopify AR สนับสนุนโดย 3D Warehouse

Shopify AR ช่วยให้ลูกค้าใช้เบราว์เซอร์ Safari บน iOS 12 อุปกรณ์เพื่อดูสินค้าของคุณในรูปแบบที่เสมือนจริงและโต้ตอบได้ในเทคโนโลยีการสร้างวัตถุเสมือนหรือ Augmented Reality (AR) คุณสามารถใช้ AR เพื่อให้ลูกค้ารับรู้ได้ชัดขึ้นว่าขนาด สัดส่วน และรายละเอียดของสินค้านั้นเป็นอย่างไร แอป 3D Warehouse ช่วยให้คุณอัปโหลดโมเดล 3 มิติและเชื่อมโยงไปยังสินค้าในร้านค้าได้

การดูแจกันในรูปแบบ 3 มิติ

หากต้องการให้ลูกค้าดูสินค้าได้ใน AR ให้ติดตั้งแอป 3D Warehouse รับโมเดล 3 มิติของสินค้า เพิ่มโมเดล 3 มิติไปยังแอป แก้ไขธีมเพื่อเปิดใช้ AR Quick Look แล้วเพิ่มสัญลักษณ์ AR ให้กับสินค้าในรูปแบบ 3 มิติของคุณ

ขั้นตอนที่ 1: ติดตั้งแอป AR Quick Look

หมายเหตุ: แอปคลังสินค้า 3d กำลังถูกเลิกใช้งานและจะไม่สามารถติดตั้งได้ คุณสามารถอัปโหลดโมเดล 3D ได้โดยตรงจากหน้าสินค้า หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มสื่อไปยังสินค้าของคุณโปรดดูที่สื่อสินค้า

ขั้นตอนที่ 2: รับโมเดล 3 มิติของสินค้า

คุณต้องมีโมเดลสามมิติของสินค้าก่อน ลูกค้าจึงจะดูสินค้าของคุณได้ใน AR โดยโมเดลสามมิติคือตัวแทนวัตถุหรือพื้นผิวแบบเสมือนจริงในรูปแบบสามมิติ ซึ่งช่วยให้ดูวัตถุนั้นได้จากทุกมุม

คุณสามารถจ้างผู้เชี่ยวชาญของ Shopify เพื่อช่วยคุณสร้างโมเดล 3 มิติสำหรับสินค้าของคุณได้ เรียกดูผู้เชี่ยวชาญที่ให้บริการสร้างโมเดล 3 มิติ เลือกผู้เชี่ยวชาญ และขอใบเสนอราคา ในตลาดผู้เชี่ยวชาญของ Shopify

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

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

หากคุณยังไม่ได้เพิ่มภาพถ่ายสินค้าและขนาดสินค้าลงในคำของานของคุณและผู้เชี่ยวชาญต้องการข้อมูลดังกล่าว ให้อ้างอิงตามข้อมูลจำเพาะด้านล่างเมื่อถ่ายภาพหรือวัดขนาดสินค้า

ภาพถ่ายสินค้า

โมเดล 3 มิติสร้างขึ้นโดยใช้ภาพถ่าย หากต้องการสร้างโมเดล 3 มิติ Shopify Experts ต้องการภาพถ่ายสินค้าของคุณจากหลายมุม:

มุมภาพถ่ายสินค้า

เมื่อถ่ายภาพสินค้าของคุณให้ปฏิบัติตามคำแนะนำต่อไปนี้:

  • ตรวจสอบว่าสินค้าของคุณได้รับความสว่างเพียงพอ
  • ตรวจสอบว่าสินค้าของคุณทั้งชิ้นอยู่ในจุดโฟกัส
  • หากเป็นไปได้ อย่าใช้กล้องมือถือ สำหรับสินค้าขนาดใหญ่ เช่น เฟอร์นิเจอร์ ให้ใช้กล้องที่มีเลนส์ 50 มม. สำหรับสินค้าขนาดกลางถึงขนาดเล็ก ให้ใช้เลนส์ 70 มม. หรือ 100 มม.
  • ถ่ายภาพเพิ่มเติมเกี่ยวกับรายละเอียดหรือพื้นผิวที่เป็นเอกลักษ์เฉพาะตัว
  • ตั้งชื่อไฟล์ให้มีความชัดเจน เช่น blue vase - top หรือ blue vase - left และจัดเก็บไว้ในโฟลเดอร์ที่มีการระบุชื่ออย่างชัดเจน

ขนาดสินค้า

เพื่อสร้างโมเดล 3 มิติอย่างแม่นยำ Shopify Experts ต้องการขนาดสินค้าของคุณอย่างละเอียด เมื่อทำการวัด ให้ปฏิบัติตามคำแนะนำต่อไปนี้:

  • อธิบายขนาดสินค้าของคุณในแต่ละมิติด้วยคำศัพท์ที่ชัดเจนและกระชับ
  • ใช้หน่วยเป็น mm.
  • ใส่แผนภาพเพื่ออธิบายว่ามิติใดใช้หน่วยวัดใด
  • หากคุณมีแบบร่างทางเทคนิคหรือไฟล์ CAD ที่เกี่ยวข้องกับสินค้า อย่าลืมแนบมาด้วย

ตัวอย่างการจ้างทำโมเดล 3 มิติ

นงนุชขายแจกันสีฟ้าใบนี้:

แจกัน

เธอได้ติดตั้งแอป 3D Warehouse และใช้ตลาดผู้เชี่ยวชาญเพื่อว่าจ้างผู้เชี่ยวชาญของ Shopify ในการสร้างโมเดล 3 มิติของแจกัน นาโอมิได้ส่งรูปภาพคุณภาพสูงหกภาพที่ถ่ายด้วยเลนส์ 70 มม. ให้แก่ผู้เชี่ยวชาญตามนี้

มุมภาพถ่ายสินค้า

นงนุชให้แผนภาพหน่วยวัด พร้อมอธิบายขนาดของสินค้าในหน่วยมิลลิเมตร:

แจกัน

  • ความสูงของแจกัน (1) เท่ากับ ____ มม.
  • ด้านบนของแจกันถึงด้านล่างของคอแจกัน (2) เท่ากับ ____ มม.
  • ด้านล่างของคอแจกันไปที่ด้านล่างของแจกัน (3) เท่ากับ ____ มม.
  • เส้นผ่าศูนย์กลางของปากแจกัน (4) เท่ากับ ____ มม.
  • ความกว้างของขอบปากแจกัน (5) เท่ากับ ____ มม.
  • เส้นผ่าศูนย์กลางด้านล่างของคอแจกัน (6) เท่ากับ ____ มม.
  • แจกันมีหน้าหกเหลี่ยมทั้งหมด 8 ด้าน
  • ความสูงของหน้าหกเหลี่ยม (8) เท่ากับ ____ มม.
  • ความกว้างของหน้าหกเหลี่ยม (9) เท่ากับ ____ มม.
  • เส้นผ่าศูนย์กลางของส่วนที่กว้างที่สุดของแจกัน (10) เท่ากับ ____ มม.
  • เส้นผ่าศูนย์กลางที่ด้านล่างของแจกัน (11) เท่ากับ ____ มม.
  • เส้นผ่าศูนย์กลางของฐานโฟมเท่ากับ ____ มม.

ผู้เชี่ยวชาญของ Shopify ใช้ภาพถ่ายและขนาดที่นาโอมิมอบให้เพื่อสร้างเป็นโมเดล 3 มิติของแจกันสีฟ้า ผู้เชี่ยวชาญได้ส่งไฟล์ .glb และ .usdz ให้นาโอมิเพื่อเพิ่มเข้าไปในแอป 3D Warehouse

ขั้นตอนที่ 3: ตรวจสอบคุณภาพของโมเดล

เมื่อผู้เชี่ยวชาญของ Shopify มอบโมเดล 3 มิติให้ โปรดตรวจสอบว่าคุณพึงพอใจกับคุณภาพของโมเดลหรือไม่ จากนั้นผู้เชี่ยวชาญจะให้คำแนะนำเกี่ยวกับการแสดงโมเดลแก่คุณ

ตรวจสอบโมเดลจากทุกมุม คุณสามารถใช้ glTF Viewer เพื่อดูตัวอย่างโมเดล 3 มิติของคุณได้ ระหว่างที่ตรวจสอบโมเดล ลองตั้งคำถามต่อไปนี้:

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

ผู้เชี่ยวชาญของ Shopify มีหน้าที่สร้างโมเดล 3D ตามมาตรฐานที่บังคับใช้ หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับมาตรฐานเหล่านั้นเพื่อให้คุณสามารถตรวจสอบโมเดลได้ดียิ่งขึ้น โปรดไปยังการสร้างโมเดล 3D สำหรับผู้ขาย

หากคุณไม่พึงพอใจคุณภาพของโมเดล โปรดติดต่อผู้เชี่ยวชาญของ Shopify และอธิบายถึงข้อผิดพลาด

ขั้นตอนที่ 4: เพิ่มโมเดล 3 มิติไปยังแอป 3D Warehouse

เมื่อได้ติดตั้งแอป 3D Warehouse และจ้างให้สร้างโมเดล 3 มิติแล้ว คุณต้องเพิ่มโมเดลนั้น ลงในแอป 3D Warehouse

หมายเหตุ: หากไม่เห็นรูปภาพ AR หลังจากที่ได้เพิ่มลงในแอป 3D Warehouse ให้ติดต่อฝ่ายช่วยเหลือของ Apple

ขั้นตอน:

  1. ในส่วน Shopify admin ให้คลิกที่แอป
  2. คลิก 3D Warehouse
  3. คลิกเพิ่มโมเดล 3 มิติ
  4. ป้อนชื่อเรื่องสำหรับโมเดล 3 มิติในช่องชื่อเรื่อง
  5. เลือกสินค้าและตัวเลือกสินค้าที่เชื่อมโยงกับโมเดล 3 มิตินี้ แล้วคลิกที่เลือกสินค้าในช่องสินค้าที่เชื่อมโยง
  6. คลิกอัปโหลดไฟล์แล้วเลือกไฟล์ .usdz ที่ได้รับมาจากผู้เชี่ยวชาญของ Shopify
  7. คลิกที่บันทึก

ทำตามขั้นตอนการอัปโหลดอีกครั้งสำหรับไฟล์ .gltf หรือ .glb ที่ได้รับมาจากผู้เชี่ยวชาญของ Shopify แล้วอย่าลืมลิงก์ไปยังสินค้าเดียวกันเพื่อให้คุณมีไฟล์โมเดล 3 มิติทั้งสองชนิดไฟล์ที่เชื่อมโยงกับสินค้า

หมายเหตุ: หากอัปโหลดไฟล์ .gltf ระบบจะแจ้งให้เพิ่มไฟล์เพิ่มเติมในส่วนไฟล์ที่เชื่อมโยง คลิกอัปโหลดไฟล์เพื่ออัปโหลดแหล่งข้อมูลพื้นผิวที่เชื่อมโยงมาจากผู้เชี่ยวชาญ

ประเภทไฟล์ที่ยอมรับ

ผู้เชี่ยวชาญของ Shopify จะให้ไฟล์สองชนิดที่แตกต่างกันสำหรับโมเดล 3 มิติแต่ละชิ้น นั่นคือไฟล์ .usdz และไฟล์ .gltf หรือไฟล์ .glb ชนิดไฟล์ที่แตกต่างกันเหล่านี้จะใช้ในแพลตฟอร์มและฟีเจอร์ต่าง ๆ ตัวอย่างเช่น หากต้องการให้ลูกค้าดูสินค้าในรูปแบบ 3 มิติในเบราว์เซอร์ Safari บนอุปกรณ์ iOS 12 คุณต้องอัปโหลดไฟล์ .usdz ทั้งนี้เราแนะนำให้อัปโหลดไฟล์ทั้งสองชนิดเพื่อรับประกันว่าร้านค้าออนไลน์ของคุณจะเข้ากันได้กับฟีเจอร์วัตถุเสมือนและ 3 มิติในอนาคต

ขั้นตอนที่ 5: แก้ไขธีมของคุณเพื่อเปิดใช้ AR Quick Look

คุณต้องแก้ไขรหัสธีมเพื่อเปิดใช้ AR Quick Look ซึ่งเป็นฟีเจอร์ที่ช่วยให้ลูกค้าใช้เบราว์เซอร์ Safari บนอุปกรณ์ iOS 12 เพื่อดูสินค้า 3D ของคุณได้

ขั้นตอน:

  1. จากหน้า Shopify admin ของคุณ ให้คลิกที่ร้านค้าออนไลน์
  2. คลิกการดำเนินการ > แก้ไขรหัสถัดจากธีมปัจจุบันของคุณ
  3. คลิก {/} theme.liquid ในโฟลเดอร์เลย์เอาต์
  4. ค้นหาแท็ก <head> ซึ่งควรจะอยู่ใกล้กับด้านบนของไฟล์
  5. วางรหัสต่อไปนี้ในบรรทัดถัดไป
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. คลิกที่บันทึก

  2. คลิก {/} product-template.liquid ในโฟลเดอร์ส่วน

  3. วางโค้ดต่อไปนี้ที่ด้านบนของไฟล์

<script>
  (function(s3d) {
    if (!s3d) {
      console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
      return;
    }
    {% for variant in product.variants %}
      s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
    {% endfor %}
  })(window.Shopify3d);
</script>

เพิ่มไลบรารี Quick Look ไปยังเทมเพลตสินค้าแล้ว

  1. คลิกที่บันทึก

หากใช้เทมเพลตสินค้ามากกว่าหนึ่งรายการ ให้เพิ่มรหัสดังกล่าวไปยังไฟล์เทมเพลตอื่นเช่นกัน

ขั้นตอนที่ 6: เพิ่มเครื่องหมาย AR ไปยังสินค้ารูปแบบ 3 มิติของคุณ

ลูกค้าที่ใช้อุปกรณ์ iOS 12 จะทราบว่าดูสินค้าของคุณได้ในรูปแบบ 3 มิติเมื่อเห็นโอเวอร์เลย์เครื่องหมาย AR:

การวางซ้อนเครื่องหมาย AR

คุณต้องแก้ไขรหัสธีมเพื่อแสดงเครื่องหมาย AR ในรูปภาพสินค้า

ขั้นตอน:

  1. จากหน้า Shopify admin ของคุณ ให้คลิกที่ร้านค้าออนไลน์
  2. คลิกการดำเนินการ > แก้ไขรหัสถัดจากธีมปัจจุบันของคุณ
  3. คลิก {/} product-template.liquid ในโฟลเดอร์ส่วน
  4. ค้นหาส่วนของเทมเพลตที่เชื่อมโยงกับรูปภาพสินค้า ค้นหาคำสำคัญอย่าง ProductPhoto หรือ featured_image:
    Liquid รูปภาพสินค้า
  5. ค้นหาแท็ก <img... > แรกในส่วนรูปภาพสินค้า
  6. วางโค้ดต่อไปนี้ในบรรทัดด้านบนแท็ก
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

Liquid รูปภาพสินค้าที่มีโค้ด

  1. คลิกที่บันทึก

  2. เปิดไฟล์ที่มี CSS ของธีม ปกติแล้วไฟล์นี้จะอยู่ในโฟลเดอร์ขององก์ประกอบและมักจะมีชื่อเรื่อง เช่น {/}theme.scss.liquid

  3. ส่วนที่ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
  1. คลิกที่บันทึก

หากต้องการทดสอบโมเดล 3 มิติของคุณ ให้เปิดร้านค้าออนไลน์ในเบราว์เซอร์ Safari บนอุปกรณ์ที่ใช้ระบบ iOS 12 จากนั้นไปที่หน้าสินค้า แตะที่เครื่องหมาย AR ในรูปภาพสินค้าเพื่อดูในรูปแบบ 3 มิติ

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี