Shopify AR obsługiwane przez 3D Warehouse

Shopify AR umożliwia klientom korzystającym z przeglądarki Safari na urządzeniach z iOS 12 wyświetlenie realistycznych i interaktywnych wersji Twoich produktów w rzeczywistości rozszerzonej (AR). Dzięki AR możesz zapewnić swoim klientom lepsze wyobrażenie na temat rozmiaru, skali i szczegółów Twoich produktów. Aplikacja 3D Warehouse umożliwia korzystanie z AR, pozwalając na przesyłanie modeli 3D i łączenie ich z produktami w Twoim sklepie.

Wyświetlanie wazonu w 3D

Aby umożliwić klientom wyświetlanie produktów w AR, zainstaluj aplikację 3D Warehouse, pozyskaj modele 3D swoich produktów, dodaj modele 3D do aplikacji, wyedytuj szablon, aby włączyć AR Quick Look, a następnie dodaj znaczek AR do swoich produktów 3D.

Krok 1: Zainstaluj aplikację 3D Warehouse

Krok 2: Pobierz modele 3D swoich produktów

Zanim zaprezentujesz klientom swoje produkty w AR, musisz uzyskać ich modele 3D. Modele 3D są wirtualnymi reprezentacjami obiektu lub powierzchni w trzech wymiarach. Umożliwiają one wyświetlenie obiektu pod dowolnym kątem.

Możesz zatrudnić eksperta, który pomoże Ci tworzyć wysokiej jakości modele 3D Twoich produktów. W Shopify Experts Marketplace przeglądaj ekspertów, którzy oferują usługę tworzenia modeli 3D, wybierz eksperta i poproś o wycenę.

Korzystając z formularza zapytania o wycenę, podaj szczegóły dotyczące swojego projektu. Jeśli chcesz teraz dostarczyć zdjęcia produktów i wymiary produktów, upewnij się, że postępujesz zgodnie z wytycznymi dostępnymi po kliknięciu linku.

Gdy prosisz o wycenę, nie zobowiązujesz się do zatrudnienia eksperta Shopify. W tym kroku jedynie przesyłasz prośbę do eksperta, który może ją przejrzeć. Jeśli ekspert zdecyduje się na współpracę z Tobą, skontaktuje się z Tobą, podając więcej informacji na temat swojego wynagrodzenia i sposobu rozpoczęcia współpracy.

Jeśli nie dołączyłeś(-aś) zdjęć produktów i wymiarów produktów do swojego zapytania o wykonanie zadania, ekspert poprosi Cię o nie. Zrób zdjęcia i pomiary, postępując zgodnie z poniższymi specyfikacjami.

Zdjęcia produktów

Modele 3D są tworzone za pomocą zdjęć. Aby utworzyć model 3D, ekspert Shopify potrzebuje zdjęć Twoich produktów wykonanych pod różnymi kątami:

Kąty zdjęcia produktu

Podczas robienia zdjęć produktu przestrzegaj następujących wytycznych:

  • Zadbaj o odpowiednie oświetlenie swojego produktu.
  • Sprawdź, czy zdjęcie całego produktu jest wyraźne.
  • O ile to możliwe, nie używaj aparatu telefonu komórkowego. W przypadku dużych produktów, takich jak meble, użyj aparatu fotograficznego z obiektywem 50 mm. W przypadku produktów małego lub średniego rozmiaru użyj obiektywu 70 mm lub 100 mm.
  • Zrób dodatkowe zdjęcia wszelkich unikatowych szczegółów lub tekstur.
  • Nadaj plikom zdjęć jednoznaczne tytuły, takie jak blue vase - top lub blue vase - left i zapisz je w przejrzyście oznaczonym folderze.

Wymiary produktu

Aby stworzyć dokładne modele 3D, ekspert Shopify potrzebuje szczegółowych pomiarów produktu. Przesyłając pomiary, należy przestrzegać następujących wytycznych:

  • Opisz każdy wymiar swojego produktu w zrozumiałych, prostych słowach.
  • Podaj pomiary w mm.
  • Dołącz schemat, aby pokazać, które wymiary odpowiadają jakim pomiarom.
  • Jeśli masz rysunki techniczne lub pliki CAD powiązane z produktem, również je dołącz.

Przykład uzyskanych modeli 3D

Naomi sprzedaje ten niebieski wazon:

Wazon

Instaluje aplikację 3D Warehouse, a następnie korzysta z Experts Marketplace, aby znaleźć eksperta Shopify, który stworzy model 3D wazonu. Naomi dostarcza ekspertowi sześć wysokiej jakości zdjęć zrobionych aparatem z 70-milimetrowym obiektywem:

Kąty zdjęcia produktu

Naomi przekazuje ekspertowi schemat pomiaru z odpowiednimi wymiarami produktu w milimetrach:

Wazon

  • Wysokość wazonu (1) wynosi ____mm
  • Wysokość od góry wazonu do podstawy szyjki (2) wynosi ____mm
  • Wysokość od podstawy szyjki do dna wazonu (3) wynosi ____mm
  • Średnica otworu wazonu (4) wynosi ____mm
  • Szerokość krawędzi otworu wazonu (5) wynosi ____mm
  • Średnica podstawy szyjki (6) wynosi ____mm
  • Wazon ma 8 sześciokątnych ścian
  • Wysokość sześciokątnych ścian (8) wynosi ____mm
  • Szerokość sześciokątnych ścian (9) wynosi ____mm
  • Średnica najszerszej części wazonu (10) wynosi ____mm
  • Średnica dna wazonu (11) wynosi ____mm
  • Średnica podkładek piankowych wynosi ____mm

Ekspert Shopify wykorzystuje te zdjęcia i wymiary do opracowania trójwymiarowego modelu niebieskiego wazonu. Ekspert wysyła Naomi plik .glb i .usdz, aby je mogła dodać do aplikacji 3D Warehouse.

Krok 3: Sprawdź jakość modelu

Gdy ekspert Shopify przekazuje Ci model 3D, sprawdź, czy odpowiada Ci jego jakość. Ekspert powinien przekazać Ci instrukcje dotyczące podglądu modelu.

Sprawdź model ze wszystkich stron. Możesz użyć podglądu glTF, aby wyświetlić podgląd modeli 3D. Przeglądając model, rozważ następujące kwestie:

  • Czy kształt modelu pasuje do zdjęć referencyjnych produktów, które dostarczyłeś(-aś) ekspertowi?
  • Czy wszystkie części modelu są proporcjonalne do pozostałych?
  • Jeśli uda Ci się wyświetlić podgląd modelu w rozszerzonej rzeczywistości, to czy skala modelu wygląda prawidłowo w porównaniu z resztą sceny?
  • Czy model wygląda, jak gdyby był wykonany z tych samych materiałów co produkt?
  • Czy materiały modelu wyglądają na rozciągnięte, rozmazane lub zniekształcone?
  • Czy istnieją szczegóły, takie jak zarysowania lub rysy, które sprawiają, że materiały modelu wydają się bardziej realistyczne?
  • Jeśli części produktu są przezroczyste, odblaskowe lub emitują światło, to czy wyglądają dobrze?
  • Czy wszystkie krawędzie wyglądają realistycznie? Czy którakolwiek z nich jest zbyt ostra i należy ją złagodzić?
  • Jeśli istnieją jakieś dekoracyjne detale, takie jak logo lub tekst, to czy są one czytelne?
  • Czy istnieją szpary lub otwory, których nie powinno być?

Ekspert Shopify powinien zbudować model 3D zgodnie z określonymi standardami. Aby dowiedzieć się więcej o tych standardach, żeby móc dokładniej sprawdzić model, zapoznaj się z sekcjąTworzenie modeli 3D dla sprzedawców.

Jeśli uważasz, że jakość modelu nie jest wystarczająco dobra, skontaktuj się z ekspertem Shopify i wyjaśnij, co jest nie tak.

Krok 4: Dodaj model 3D do aplikacji 3D Warehouse

Jeśli masz zainstalowaną aplikację 3D Warehouse i pozyskałeś(-aś) model 3D, musisz dodać model do aplikacji 3D Warehouse.

Kroki:

  1. W panelu administracyjnym Shopify kliknij opcję Aplikacje.
  2. Kliknij opcję 3D Warehouse.
  3. Kliknij opcję Dodaj model 3D.
  4. W polu Tytuł wprowadź tytuł modelu 3D.
  5. W polu Powiązany produkt wybierz produkt i wariant, z którym powiązany jest ten model 3D, a następnie kliknij opcję Wybierz produkt.
  6. Kliknij opcję Załaduj plik i wybierz plik .usdz dostarczony przez eksperta Shopify.
  7. Kliknij opcję Zapisz.

Powtórz proces ładowania pliku .gltf lub .glb, który dostarczył Twój ekspert Shopify. Upewnij się, że łączysz go z tym samym produktem, aby oba typy pliku modelu 3D były powiązane z produktem.

Akceptowane typy plików

Eksperci Shopify dostarczają dwa różne typy plików dla każdego modelu 3D, pliku .usdz oraz .gltf lub .glb. Te różne typy plików są używane przez różne platformy i funkcje. Na przykład, aby klienci mieli możliwość wyświetlania produktów 3D w przeglądarce Safari na urządzeniach iOS 12, musisz przesłać plik .usdz. Najlepszym sposobem zapewnienia Twojemu sklepowi online kompatybilności z przyszłymi funkcjami rzeczywistości rozszerzonej i 3D jest przesłanie obu typów plików.

Krok 5: Edytuj szablon, aby włączyć funkcję AR Quick Look

Musisz wyedytować swój kod szablonu, aby włączyć funkcję AR Quick Look, która jest funkcją umożliwiającą klientom korzystającym z przeglądarki Safari na urządzeniach z systemem iOS 12 wyświetlanie Twoich produktów 3D.

Kroki:

  1. W panelu administracyjnym Shopify kliknij opcję Sklep online.
  2. Obok bieżącego szablonu kliknij opcję Czynności > Edytuj kod.
  3. W folderze Układ kliknij {/} theme.liquid.
  4. Znajdź tag <head>. Powinien znajdować się w górnej części pliku.
  5. W następnej linii wklej następujący kod:
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. Kliknij opcję Zapisz.

  2. W folderze Sekcje kliknij {/} product-template.liquid.

  3. Wklej poniższy kod na górze pliku:

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

Biblioteka Quicklook dodana do szablonu produktu

  1. Kliknij opcję Zapisz.

Jeśli używasz więcej niż jednego szablonu produktu, dodaj kod także do tych plików szablonów.

Krok 6: Dodaj znaczek AR do swoich produktów 3D

Klienci korzystający z urządzeń z systemem iOS 12 będą wiedzieć że mogą zobaczyć Twój produkt w 3D, jeśli jest opatrzony nakładką znaczka AR:

Nakładka znaczka AR

Musisz wyedytować kod szablonu, aby wyświetlić znaczek AR na zdjęciach produktów.

Kroki:

  1. W panelu administracyjnym Shopify kliknij opcję Sklep online.
  2. Obok bieżącego szablonu kliknij opcję Czynności > Edytuj kod.
  3. W folderze Sekcje kliknij {/} product-template.liquid.
  4. Znajdź sekcję szablonu powiązaną ze zdjęciem produktu. Wyszukaj słowa kluczowe, takie jak ProductPhoto lub featured_image:
    Liquid zdjęcia produktu
  5. W sekcji zdjęcia produktu wyszukaj pierwszy tag <img... >.
  6. W linii powyżej tego tagu wklej następujący kod:
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

Liquid zdjęcia produktu z kodem

  1. Kliknij opcję Zapisz.

  2. Otwórz plik zawierający CSS szablonu. Ten plik znajduje się zwykle w folderze Zasoby i najczęściej ma tytuł {/}theme.scss.liquid.

  3. Na samym dole pliku wklej następujący kod:

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
  1. Kliknij opcję Zapisz.

Aby przetestować swój model 3D, otwórz sklep online w przeglądarce Safari na urządzeniu z systemem iOS 12, a następnie przejdź do strony produktu. Naciśnij znaczek AR w obrazie produktu, aby wyświetlić go w 3D.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo