Shopify AR drevet av 3D Warehouse

Shopify AR lar kunder som bruker Safari-nettleseren på iOS 12-enheter se realistiske og interaktive versjoner av produktene dine i Augmented Reality (AR). Med AR kan du formidle størrelsen, vekten og detaljene til produktene på en bedre måte. 3D Warehouse-appen aktiverer AR-opplevelser ved å la deg laste opp 3D-modeller og koble dem til produktene i butikken din.

Vise en vase i 3D

For at kundene dine skal kunne se produktene dine i AR, må du installere 3D Warehouse-appen, få 3D-modeller av produktene dine, legge til 3D-modellene i appen, redigere temaet for å aktivere AR Quick Look og deretter legge til AR Badge i 3D-produktene dine.

Steg 1: Installer 3D Warehouse-appen

Du kan installere 3D Warehouse-appen via registreringssiden.

Trinn:

  1. Åpne registreringssiden.
  2. myshopify.com Angi butikkens domene.
  3. Klikk på Installer.
  4. Gå gjennom opplysningene, og klikk på Installer app.

Du har tilgang til 3D Warehouse-appen på app-siden i Shopify-administratoren.

Steg 2: Få 3D-modeller av produktene dine

Før kundene kan se produktene i AR, trenger du 3D-modeller av produktene dine. 3D-modeller er virtuelle representasjoner av et objekt eller en overflate i tre dimensjoner som lar deg se objektet fra alle vinkler.

Du kan få 3D-modeller av produktene dine gjennom Shopify-partnerprogrammet.

Trinn:

  1. I Shopify-administratoren klikker du på kontomenyen og deretter på Lei en Shopify Expert:

    Lei en Shopify-ekspert

  2. Klikk for å utvide den nye funksjonalitetsdelen.

  3. Klikk på Opprett 3D-modeller av produktene dine for utvidet virkelighet (fra 100 USD).

  4. Svar på spørsmålene du får. Hvis du vil angi produktbilder og produktdimensjoner nå, må du passe på at du følger de tilknyttede retningslinjene.

  5. Klikk på Send jobb.

Når du sender en jobbforespørsel, forplikter du deg ikke til å ansette en Shopify-ekspert. Dette trinnet sender bare en beskrivelse av prosjektet til tilgjengelige eksperter, som deretter gjennomgår forespørselen din. Hvis en ekspert velger å jobbe med deg, vil eksperten kontakte deg med mer informasjon om priser og hvordan du starter prosessen.

Hvis du ikke allerede har lagt ved produktbilder og produktdimensjoner som en del av jobbforespørselen, vil eksperten etterspørre dem. Følg spesifikasjonene under når du tar bilder og mål.

Produktbilder

3D-modeller opprettes ved hjelp av bilder. For å opprette 3D-modellen trenger Shopify Expert bilder av produktene dine fra flere vinkler:

Bildevinkler for produkter

Når du tar bilder av produktet, må du følge disse retningslinjene:

  • Sørg for at produktet er godt opplyst.
  • Sørg for at hele produktet er i fokus.
  • Unngå om mulig å bruke mobiltelefonkameraet. For større produkter som f.eks. møbler må du bruke et kamera med en 50 mm-linse. For små til middels store produkter kan du bruke en 70 mm-eller 100 mm-linse.
  • Ta ekstra bilder av unike detaljer eller teksturer.
  • Gi bildefilene klare titler som f.eks. blue vase - top, eller blue vase - left, og lagre dem i en tydelig merket mappe.

Produktmål

For å skape nøyaktige 3D-modeller trenger Shopify Expert detaljerte mål av produktet. Følg disse retningslinjene når du skal oppgi mål:

  • Beskriv hvert mål av produktet ditt på en tydelig og enkel måte.
  • Oppgi målene imm.
  • Inkluder et diagram for å vise hvilke dimensjoner målene samsvarer med.
  • Hvis du har tekniske tegninger eller CAD-filer knyttet til produktet, må du også inkludere disse.

Eksempel på 3D-modeller lages

Naomi selger denne blå vasen:

Vase

Hun installerer 3D Warehouse-appen, og bruker deretter Experts Marketplace for å finne en Shopify Expert som kan opprette en 3D-modell av vasen. Til eksperten leverer Naomi seks bilder av høy kvalitet som er tatt med et kamera med en 70 mm linse:

Bildevinkler av produkter

Naomi gir eksperten et målediagram med tilsvarende produktdimensjoner i millimeter:

Vase

  • Vasen (1) er ____mm høy
  • Toppen av vasen til bunnen av nakken (2) er ____mm
  • Bunnen av nakken til bunnen av vasen (3) er ____mm
  • Diameteren til munningen av vasen (4) er ____mm
  • Leppen av munnen (5) er ____mm bred
  • Diameteren på bunnen av nakken (6) er ____mm
  • Vasen har 8 sekskantede ansikter
  • De sekskantede ansiktene (8) er ____mm høye
  • De sekskantede ansiktene (9) er ____mm brede
  • Diameteren til den bredeste delen av vasen (10) er ____mm
  • Diameteren på bunnen av vasen (11) er ____mm
  • Diameteren på skumføttene er ____mm

Shopify Experts bruker disse bildene og dimensjonene til å lage en 3D-modell av den blå vasen. Eksperten sender Naomi en .glb og en .usdz-fil som hun kan legge til i 3D Warehouse-appen.

Steg 3: Kontroller kvaliteten til modellen

Når en Shopify-ekspert gir deg en 3D-modell, bør du firsikre deg om at du er fornøyd med kvaliteten. Eksperten skal gi deg anvisninger for hvordan du forhåndsviser modellen.

Sjekk modellen fra alle vinkler. Du kan bruke GlTF Viewer for å forhåndsvise 3D-modeller. Tenker over følgende spørsmål mens du ser gjennom modellen:

  • Samsvarer modellens figur med produktreferansebildene du har gitt til eksperten?
  • Er alle deler av modellen proporsjonale med resten?
  • Hvis du kan forhåndsvise modellen i augmentert virkelighet, ser modellens størrelsesforhold riktig ut i forhold til resten av bildet?
  • Ser modellen ut som den er laget av samme materialer som produktet?
  • Ser modellens materialer ut som de er strukket, uklare eller forvrengte?
  • Finnes det detaljer som skraper eller riper for å gjøre modellens materialer mer realistiske?
  • Hvis deler av produktet er gjennomsiktig, refleksiv eller avgir lys, ser dette rett ut?
  • Ser alle kantene realistiske ut? Er noen av dem for skarpe og må myknes?
  • Hvis det finnes dekorative detaljer, for eksempel logoer eller tekst, er de lette å se?
  • Er det noen hull eller mellomrom der det ikke skal være det?

Shopify-eksperten skal bygge 3D-modellen i henhold til visse standarder. For å finne ut mer om disse standardene, slik at du bedre kan se gjennom en modell, se Opprette 3D-modeller for forhandlere.

Hvis du mener at kvaliteten på modellen ikke er god nok, kan du kontakte Shopify-eksperten og forklare hva som er galt med den.

Steg 4: Legg til en 3D-modell i 3D Warehouse-appen

Når du har installert 3D Warehouse-appen og hentet en 3D-modell, må du legge til modellen i 3D Warehouse-appen.

Trinn:

  1. Fra Shopify-administratoren klikker du Apper.
  2. Klikk på 3D Warehouse.
  3. Klikk på Legg til 3D-modell.
  4. I tittelfeltet skriver du inn en tittel for 3D-modellen.
  5. I feltet koblet produkt velger du produktet og varianten som denne 3D-modellen er knyttet til. Deretter klikker du på Velg produkt.
  6. Klikk på .usdz Last opp fil og velg filen du fikk fra Shopify Experts.
  7. Klikk på Lagre.

Gjenta opplastingsprosessen for .gltf eller .glb-filen som du fikk fra Shopify Experts. Se til at du kobler det til det samme produktet, slik at du har begge 3D-modell-filtypene som er tilknyttet produktet.

Godkjente filtyper

Shopify Experts gir deg to ulike filtyper for hver 3D-modell, en .usdz fil og en .gltf eller .glb-fil. Disse ulike filtypene brukes på ulike plattformer og funksjoner. Hvis du for eksempel vil at kundene skal se 3D-produkter i Safari på IOS 12-enheter, må du .usdz laste opp en fil. Den beste måten å sørge for at nettbutikken din er kompatibel med fremtidige, AR- og 3D-funksjoner på, er å laste opp begge filtypene.

Steg 5: Rediger temaet ditt for å aktivere AR-hurtigsøk

Du må redigere temakoden for å aktivere funksjonen AR-hurtigvisning, som lar kundene se 3D-produktene dine via Safari-nettleseren på iOS 12-enheter.

Trinn:

  1. Fra Shopify-administratoren klikker du Nettbutikk.
  2. Klikk på Handlinger > Rediger kode ved siden av det aktuelle temaet.
  3. I layout-mappen klikker du på {/} theme.liquid.
  4. Finn taggen <head>. Den bør være nesten øverst i filen.
  5. På den neste linjen limer du inn følgende kode:
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. Klikk på Lagre.

  2. I seksjoner-mappen klikker du på {/} produkt-template.liquid.

  3. Lim inn følgende kode øverst i filen:

<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-bibliotek lagt til i produktmal

  1. Klikk på Lagre.

Hvis du bruker mer enn én produktmal, må du også legge til koden for disse malfilene.

Steg 6: Legg til AR-merket i 3D-produktene dine

Kunder som bruker iOS 12-enheter, vet at de kan se produktet ditt i 3D når de ser AR Badge-overlegget:

AR Badge-overlegg

Du må redigere temakoden for at AR-merket skal vises på produktbilder.

Trinn:

  1. Fra Shopify-administratoren klikker du Nettbutikk.
  2. Klikk på Handlinger > Rediger kode ved siden av det aktuelle temaet.
  3. I seksjoner-mappen klikker du på {/} produkt-template.liquid.
  4. Finn seksjonen av malen som er knyttet til produktbildet ditt. Se etter søkeord som ProductPhoto eller featured_image:
    Produktbilde liquid
  5. Finn den første <img... >-taggen i produktbilde-seksjonen.
  6. På linjen over taggen limer du inn følgende kode:
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

Produktbilde liquid med kode

  1. Klikk på Lagre.

  2. Åpne filen som inneholder temaets CSS. Denne filen ligger vanligvis i eiendeler-mappen og har som regel en tittel som {/}Theme.scss.Liquid eller lignende.

  3. Helt nederst i filen limer du inn følgende kode:

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
  1. Klikk på Lagre.

For å teste 3D-modellen, må du åpne nettbutikken i Safari på en enhet som kjører iOS 12. Deretter kan du navigere til produktsiden. Trykk på AR Badge i produktbildet for å se det i 3D.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis