Shopify AR obsługiwane przez 3D Warehouse

Uwaga

Aplikacja 3d Warehouse jest nieaktualna i nie będzie dostępna do zainstalowania. Modele 3D można pobrać bezpośrednio ze strony Produkty. Dowiedz się więcej o multimediach produktu.

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.

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

Uwaga

Aplikacja 3d Warehouse jest nieaktualna i nie będzie dostępna do zainstalowania. Modele 3D można pobrać bezpośrednio ze strony Produkty. Aby uzyskać więcej informacji na temat dodawania mediów do produktów, zapoznaj się z sekcją Multimedia produktu.

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 do kontaktu z ekspertem, 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.

Jeśli skontaktujesz się z ekspertem, nie jesteś zobowiązany(-a) 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ą, nawiąże kontakt i poda 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:

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:

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:

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

• 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 rzeczywistości rozszerzonej, 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ć?
• Czy model 3D spełnia wymagania techniczne platformy Shopify?
  • Model 3D musi być plikiem GLB.
  • Plik GLB powinien mieć około 4 MB.
  • Plik GLB nie może przekraczać 15 MB.

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.

Uwaga

Jeśli nie widzisz obrazu AR po dodaniu go do aplikacji 3D Warehouse, skontaktuj się z pomocą techniczną Apple.

Kroki:

1. W panelu administracyjnym Shopify kliknij Ustawienia > Aplikacje i kanały sprzedaży.

2. Na stronie Aplikacje i kanały sprzedaży kliknij 3D Warehouse.

3. Kliknij opcję Otwórz aplikację.

4. Kliknij opcję Dodaj model 3D.

5. W polu Tytuł wprowadź tytuł modelu 3D.

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

7. Kliknij opcję Załaduj plik i wybierz plik .usdz dostarczony przez eksperta Shopify.

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

Uwaga

Jeśli załadujesz plik .gltf, pojawi się monit o dodanie kolejnych plików w sekcji Powiązane pliki. Kliknij opcję Załaduj plik, aby załadować powiązane zasoby tekstury dostarczone przez eksperta.

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 Ustawienia > Aplikacje i kanały sprzedaży.

2. Na stronie Aplikacje i kanały sprzedaży kliknij Online store.

3. Kliknij opcję Otwórz kanał sprzedaży.

4. Obok bieżącego szablonu kliknij przycisk ... > Edytuj kod.

5. W folderze Układ kliknij {/} theme.liquid.

6. Znajdź tag <head>. Powinien znajdować się w górnej części pliku.

7. W następnej linii wklej następujący kod:

<script
  src="https://cdn.shopify.com/shopifycloud/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>

![Quicklook library added to product template](/manual/apps/3d-warehouse/quicklook-product-template.png)

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:

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

Kroki:

1. W panelu administracyjnym Shopify kliknij Ustawienia > Aplikacje i kanały sprzedaży.

2. Na stronie Aplikacje i kanały sprzedaży kliknij Online store.

3. Kliknij opcję Otwórz kanał sprzedaży.

4. Obok bieżącego szablonu kliknij przycisk ... > Edytuj kod.

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

6. Znajdź sekcję szablonu powiązaną ze zdjęciem produktu. Wyszukaj słowa kluczowe, takie jak ProductPhoto lub featured_image:

   

7. W sekcji zdjęcia produktu wyszukaj pierwszy tag <img... >.

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

![Product photo liquid with code](/manual/apps/3d-warehouse/product-image-liquid-with-code.png)

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.