Shopify AR do 3D Warehouse cung cấp
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ế ảo 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.
Để 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.
Trên trang này
Bước 1: Cài đặt ứng dụng 3D Warehouse
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à liên hệ với họ.
Sử dụng biểu mẫu liên hệ chuyên gia, 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 liên hệ với chuyên gia. 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í 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 độ:
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 - tophoặcblue 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:
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:
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:
- 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ế ảo 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?
- Mô hình 3D có đáp ứng các yêu cầu kỹ thuật của nền tảng Shopify không?
- Mô hình 3D phải là tệp GLB.
- Tệp GLB phải khoảng 4 MB.
- Tệp GLB không được vượt quá 15 MB.
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.
Các bước thực hiện:
Trong trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
Trong trang Ứng dụng và kênh bán hàng, nhấp vào 3D Warehouse.
Nhấp vào Mở ứng dụng.
Nhấp vào Add 3D Model (Thêm mô hình 3D).
Trong trường Tiêu đề, nhập tiêu đề cho mô hình 3D.
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).
Nhấp vào Upload File (Tải lên tệp) và chọn tệp
.usdzdo Chuyên gia Shopify cung cấp.Nhấp vào Save (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.
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ế ảo 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:
Trong trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
Trong trang Ứng dụng và kênh bán hàng, nhấp vào Online store.
Nhấp vào Mở kênh bán hàng.
Bên cạnh chủ đề hiện tại, nhấp vào nút ... > Chỉnh sửa mã.
Trong thư mục Bố cục, nhấp vào {/} theme.liquid.
Tìm thẻ
<head>ở gần phần đầu của tệp.Trên dòng tiếp theo, dán mã sau:
<script
src="https://cdn.shopify.com/shopifycloud/ar-quicklook-js/assets/v1/shopify3d.js"
crossorigin="anonymous"
></script>- Nhấp vào Save (Lưu).
- Trong thư mục Mục, nhấp vào {/} product-template.liquid.
- 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>- Nhấp vào Save (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:
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:
Trong trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
Trong trang Ứng dụng và kênh bán hàng, nhấp vào Online store.
Nhấp vào Mở kênh bán hàng.
Bên cạnh chủ đề hiện tại, nhấp vào nút ... > Chỉnh sửa mã.
Trong thư mục Mục, nhấp vào {/} product-template.liquid.
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ư
ProductPhotohoặcfeatured_image:
Trong mục ảnh sản phẩm, tìm thẻ
<img... >đầu tiên.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>- Nhấp vào Save (Lưu).
- 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.
- Ở cuối tệp, dán mã sau:
.ar-quicklook-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 2;
}- Nhấp vào Save (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.