Shopify AR do 3D Warehouse cung cấp

Lưu ý: Ứng dụng 3D Warehouse sẽ trở nên lỗi thời và không thể cài đặt được nữa. Bạn có thể tải lên mô hình 3D trực tiếp từ trang Sản phẩm. Để biết thêm thông tin về cách thêm phương tiện vào sản phẩm, xem Product media (Phương tiện sản phẩm).

Shopify AR cho phép khách hàng sử dụng trình duyệt Safari trên thiết bị iOS 12 xem các phiên bản thực tế và tương tác của sản phẩm bằng thực tế tăng cường (AR). Với AR, bạn có thể giúp khách hàng cảm nhận rõ kích cỡ, quy mô và chi tiết sản phẩm. Ứng dụng 3D Warehouse mang đến trải nghiệm AR bằng cách cho phép bạn tải lên mô hình 3D và liên kết chúng với sản phẩm trong cửa hàng.

Xem bình hoa ở dạng 3D

Để cho phép khách hàng xem sản phẩm bằng AR, cài đặt ứng dụng 3D Warehouse, tải mô hình 3D của sản phẩm, thêm mô hình 3D vào ứng dụng, chỉnh sửa chủ đề để bật AR Quick Look, sau đó thêm huy hiệu AR vào sản phẩm 3D.

Bước 1: Cài đặt ứng dụng 3D Warehouse

Lưu ý: Ứng dụng 3D Warehouse sẽ trở nên lỗi thời và không thể cài đặt được nữa. Bạn có thể tải lên mô hình 3D trực tiếp từ trang Sản phẩm. Để biết thêm thông tin về cách thêm phương tiện vào sản phẩm, xem Product media (Phương tiện sản phẩm).

Bước 2: Tải mô hình 3D của sản phẩm

Để khách hàng xem sản phẩm bằng AR, bạn phải có mô hình 3D của sản phẩm. Mô hình 3D là hình biểu diễn ảo của một đối tượng hoặc bề mặt trong không gian ba chiều. Những mô hình này cho phép bạn xem đối tượng từ mọi góc độ.

Bạn có thể thuê chuyên gia Shopify để hỗ trợ tạo mô hình 3D của sản phẩm. Trong Trung tâm chuyên gia Shopify, duyệt xem chuyên gia cung cấp dịch vụ tạo mô hình 3D, chọn chuyên gia và yêu cầu báo giá.

Sử dụng biểu mẫu yêu cầu báo giá, cung cấp thông tin chi tiết về dự án của bạn. Nếu bạn muốn cung cấp ảnh sản phẩm và kích thước sản phẩm ngay, hãy nhớ thực hiện theo các hướng dẫn trong liên kết.

Bạn không cần cam kết phải thuê chuyên gia Shopify khi yêu cầu báo giá. Bước này chỉ gửi yêu cầu cho chuyên gia để có thể đánh giá yêu cầu của bạn. Nếu chuyên gia quyết định làm việc với bạn thì họ sẽ liên hệ bạn để cung cấp thêm thông tin về mức phí của chuyên gia và cách thức hợp tác.

Nếu bạn chưa cung cấp ảnh sản phẩm và kích thước sản phẩm trong nội dung yêu cầu công việc thì chuyên gia sẽ yêu cầu bạn cung cấp những thông tin này. Hãy chụp ảnh và đo theo các chỉ dẫn kỹ thuật bên dưới.

Ảnh sản phẩm

Mô hình 3D được tạo ra bằng các hình ảnh. Để tạo mô hình 3D, chuyên gia Shopify Expert cần ảnh chụp sản phẩm từ nhiều góc độ:

Góc chụp sản phẩm

Khi chụp ảnh sản phẩm, hãy làm theo các hướng dẫn sau:

  • Bảo đảm rằng sản phẩm của bạn được chiếu sáng đầy đủ.
  • Đảm bảo rằng toàn bộ sản phẩm đều nằm trong vùng lấy nét.
  • Nếu có thể, đừng sử dụng camera của điện thoại di động. Đối với các sản phẩm lớn như đồ nội thất, hãy sử dụng máy ảnh có ống kính 50 mm. Đối với các sản phẩm có kích thước từ nhỏ đến trung bình, hãy sử dụng ống kính 70 mm hoặc 100 mm.
  • Chụp thêm ảnh của bất kỳ chi tiết hoặc kết cấu độc đáo nào.
  • Đặt tên rõ ràng cho các tệp ảnh, như blue vase - top hoặc blue vase - left, và lưu trữ trong thư mục ghi nhãn rõ ràng.

Kích thước sản phẩm

Để tạo ra mô hình 3D chính xác, chuyên gia Shopify Expert cần thông tin kích thước chi tiết của sản phẩm. Khi cung cấp kích thước, hãy làm theo các hướng dẫn sau:

  • Mô tả từng kích thước của sản phẩm bằng từ ngữ rõ ràng, đơn giản.
  • Cung cấp số đo theo đơn vị mm.
  • Đưa vào biểu đồ biểu thị kích thước tương ứng của từng số đo.
  • Hãy cung cấp bản vẽ kỹ thuật hoặc tập tin CAD có liên quan đến sản phẩm (nếu có).

Ví dụ về cách tạo mô hình 3D

Nhung đang bán chiếc bình hoa màu xanh này:

Bình hoa

Cô cài đặt ứng dụng 3D Warehouse sau đó dùng Trung tâm chuyên gia để thuê chuyên gia Shopify tạo mô hình 3D của bình hoa. Nhung cung cấp cho chuyên gia sáu tấm ảnh chất lượng cao chụp bằng máy ảnh có ống kính 70 mm:

Góc chụp sản phẩm

Nhung cung cấp cho chuyên gia một biểu đồ đo lường với kích thước của sản phẩm tương ứng theo đơn vị milimet:

Bình hoa

  • Chiều cao của bình hoa (1) là ____mm
  • Từ đỉnh bình đến đáy cổ bình (2) là ____mm
  • Từ đáy cổ bình đến đáy bình (3) là ____mm
  • Đường kính miệng bình (4) là ____mm
  • Chiều rộng miệng bình (5) là ____mm
  • Đường kính đáy cổ bình (6) là ____mm
  • Bình có 8 mặt lục giác
  • Chiều cao của các mặt lục giác (8) là ____mm
  • Chiều rộng của các mặt lục giác (9) là ____mm
  • Đường kính phần rộng nhất của bình (10) là ____mm
  • Đường kính đáy bình (11) là ____mm
  • Đường kính của chân xốp là ____mm

Chuyên gia Shopify sử dụng ảnh và kích thước đã gửi để tạo mô hình 3D của chiếc bình màu xanh. Chuyên gia gửi cho Nhung tệp .glb và tệp .usdz để cô ấy thêm vào ứng dụng 3D Warehouse.

Bước 3: Kiểm tra chất lượng mô hình

Khi chuyên gia Shopify cung cấp mô hình 3D, bạn nên kiểm tra xem có hài lòng với chất lượng của mô hình đó hay không. Chuyên gia sẽ hướng dẫn bạn cách xem trước mô hình.

Kiểm tra mô hình từ mọi góc độ. Bạn có thể dùng glTF Viewer để xem trước các mô hình 3D. Trong khi xem xét mô hình, hãy cân nhắc các câu hỏi sau:

  • Hình dạng của mô hình có khớp với ảnh tham chiếu sản phẩm mà bạn đã cung cấp cho chuyên gia không?
  • Tất cả các chi tiết của mô hình có tỷ lệ cân đối với phần còn lại chưa?
  • Nếu có thể xem trước mô hình trong thực tế tăng cường thì tỷ lệ của mô hình có vẻ chính xác so với phần còn lại của bối cảnh không?
  • Mô hình trông giống như được làm từ chất liệu giống như sản phẩm không?
  • Chất liệu của mô hình trông có bị căng, mờ hoặc méo không?
  • Có các chi tiết như vết trầy hay vết xước để làm cho chất liệu của mô hình trông có vẻ thực tế hơn không?
  • Các phần của sản phẩm có thuộc tính trong suốt, phản chiếu hay phát ra ánh sáng và trông có phù hợp không?
  • Tất cả các cạnh trông có thật không? Có phần nào trong số đó quá sắc nét và cần phải làm mềm đi không?
  • Sản phẩm có bất kỳ chi tiết trang trí nào, như logo hoặc chữ viết, không và có dễ thấy không?
  • Có khoảng trống hay lỗ hổng nào ở chỗ không nên có không?

Chuyên gia Shopify phải xây dựng mô hình 3D theo các tiêu chuẩn nhất định. Để tìm hiểu thêm các tiêu chuẩn này và qua đó có thể đánh giá mô hình chính xác hơn, xem phần Tạo mô hình 3D cho thương nhân .

Nếu bạn thấy mô hình không đạt chất lượng, hãy liên hệ với chuyên gia Shopify và giải thích vấn đề gặp phải với mô hình.

Bước 4: Thêm mô hình 3D vào ứng dụng 3D Warehouse

Khi bạn đã cài đặt ứng dụng 3D Warehouse và tạo mô hình 3D, bạn cần thêm mô hình vào ứng dụng 3D Warehouse.

Lưu ý: Nếu bạn không nhìn thấy hình ảnh AR sau khi thêm mô hình vào ứng dụng 3D Warehouse, liên hệ với bộ phận hỗ trợ của Apple.

Các bước thực hiện:

  1. Trên trang quản trị Shopify, nhấp vào Ứng dụng.
  2. Nhấp vào 3D Warehouse.
  3. Nhấp vào Add 3D Model (Thêm mô hình 3D).
  4. Trong trường Tiêu đề, nhập tiêu đề cho mô hình 3D.
  5. Trong trường Linked Product (Sản phẩm được liên kết), chọn sản phẩm và mẫu mã có liên kết với mô hình 3D, sau đó nhấp vào Select product (Chọn sản phẩm).
  6. Nhấp vào Upload File (Tải lên tệp) và chọn tệp .usdz do Chuyên gia Shopify cung cấp.
  7. Nhấp vào Lưu.

Lặp lại quy trình tải lên đối với tệp .gltf hoặc tệp .glb mà chuyên gia Shopify đã cung cấp. Đảm bảo rằng bạn liên kết tệp với cùng một sản phẩm để có thể liên kết cả hai loại tệp mô hình 3D với sản phẩm.

Lưu ý: Nếu tải lên tệp .gltf, bạn sẽ được nhắc thêm tệp bổ sung vào mục Linked Files (Tệp được liên kết). Nhấp vào Upload File (Tải lên tệp) để tải lên tài nguyên họa tiết được liên kết do chuyên gia cung cấp.

Các loại tệp được chấp nhận

Chuyên gia Shopify cung cấp hai loại tệp khác nhau cho mỗi mô hình 3D, tệp .usdz và tệp .gltf hoặc tệp .glb. Những loại tệp khác nhau này được các nền tảng và tính năng khác nhau sử dụng. Ví dụ: Để khách hàng xem sản phẩm 3D trong trình duyệt Safari trên thiết bị iOS 12, bạn cần tải lên tệp .usdz. Cách tốt nhất để đảm bảo rằng cửa hàng trực tuyến tương thích với các tính năng 3D và thực tế tăng cường là tải lên cả hai loại tệp.

Bước 5: Chỉnh sửa chủ đề của bạn để bật AR Quick Look

Bạn cần chỉnh sửa mã chủ đề để bật AR Quick Look, đây là tính năng cho phép khách hàng sử dụng trình duyệt Safari trên thiết bị iOS 12 xem sản phẩm 3D của bạn.

Các bước thực hiện:

  1. Trên trang quản trị Shopify, nhấp vào Cửa hàng trực tuyến.
  2. Bên cạnh chủ đề hiện tại, nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).
  3. Trong thư mục Bố cục, nhấp vào {/} theme.liquid.
  4. Tìm thẻ <head> ở gần phần đầu của tệp.
  5. Trên dòng tiếp theo, dán mã sau:
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. Nhấp vào Lưu.

  2. Trong thư mục Mục, nhấp vào {/} product-template.liquid.

  3. Dán mã sau vào đầu tệp:

<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>

Thư viện QuickLook được thêm vào mẫu sản phẩm

  1. Nhấp vào Lưu.

Nếu bạn sử dụng nhiều mẫu sản phẩm, thêm mã vào những tệp mẫu này.

Bước 6: Thêm huy hiệu AR cho sản phẩm 3D của bạn

Khách hàng sử dụng thiết bị iOS 12 biết họ có thể xem sản phẩm bằng 3D khi họ nhìn thấy lớp phủ huy hiệu AR:

Lớp phủ huy hiệu AR

Bạn cần chỉnh sửa mã chủ đề để hiển thị huy hiệu AR trên hình ảnh sản phẩm.

Các bước thực hiện:

  1. Trên trang quản trị Shopify, nhấp vào Cửa hàng trực tuyến.
  2. Bên cạnh chủ đề hiện tại, nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).
  3. Trong thư mục Mục, nhấp vào {/} product-template.liquid.
  4. Tìm mục của mẫu được liên kết với ảnh sản phẩm. Tìm kiếm từ khóa như ProductPhoto hoặc featured_image:
    Liquid ảnh sản phẩm
  5. Trong mục ảnh sản phẩm, tìm thẻ <img... > đầu tiên.
  6. Trên dòng nằm bên trên thẻ, dán mã sau:
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

Liquid ảnh sản phẩm kèm mã

  1. Nhấp vào Lưu.

  2. Mở tệp chứa CSS của chủ đề. Tệp này thường nằm trong thư mục Phần tử và thường có tiêu đề như {/}theme.scss.liquid.

  3. Ở cuối tệp, dán mã sau:

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
  1. Nhấp vào Lưu.

Để thử nghiệm mô hình 3D, mở cửa hàng trực tuyến trong trình duyệt Safari trên thiết bị chạy iOS 12, sau đó điều hướng đến trang sản phẩm. Chạm vào huy hiệu AR trong hình ảnh sản phẩm để xem bằng 3D.

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí