Shopify AR drevet av 3D Warehouse

Advarsel

3D Warehouse-appen blir foreldet, og vil ikke være tilgjengelig for installasjon. Du kan laste opp 3D-modeller direkte fra Produkter-siden. Finn ut mer om Produktmedier.

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.

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

Merk

3D Warehouse-appen blir foreldet, og vil ikke være tilgjengelig for installasjon. Du kan laste opp 3D-modeller direkte fra Produkter-siden. For mer informasjon om å legge til medier til produkter, kan du finne ut mer om Produktmedier.

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 leie inn en Shopify-ekspert for å få hjelp med å lage 3D-modeller av produktene dine. På Shopify-ekspertmarkedsplassen kan du bla gjennom eksperter som tilbyr tjenesten 3D-modellproduksjon, velge en ekspert og kontakte dem.

I kontaktskjemaet til eksperten oppgir du flere opplysninger om prosjektet ditt. Hvis du vil oppgi produktbilder og produktmål nå, må du følge de tilkoblede retningslinjene.

Når du kontakter en ekspert er du ikke forpliktet til å leie inn en Shopify-ekspert. Dette steget sender bare en forespørsel til eksperten, som så kan gå gjennom forespørselen din. Hvis en ekspert bestemmer seg for å jobbe med deg, vil de ta kontakt og gi deg mer informasjon om priser og hvordan dere kan komme i gang med samarbeidet.

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:

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å hvordan du får 3D-modeller laget

Naomi selger denne blå vasen:

Hun installerer 3D Warehouse-appen, og bruker ekspertmarkedsplassen til å leie inn en Shopify-ekspert for å skape en 3D-modell av vasen. Naomi gir eksperten seks høyoppløselige bilder tatt med et kamera med et 70 mm objektiv:

Naomi gir eksperten et måpdiagram med tilsvarende Produktdimensjoner i millimeter:

• Vasens høyde (1) er ____ mm
• Fra øverst på vasen til nederst på halsen (2) er høyden ____ mm
• Fra nederst på halsen til nederst på vasen (3) er høyden ____ mm
• Åpningens diameter er (4) er ____ mm
• Bredden på leppen ved åpningen (5) er ____ mm
• Diameteren nederst på halsen (6) er ____ mm
• Det er 8 sekskantede kanter
• Høyden på de sekskantede kantene (8) er ___ mm
• De sekskantede ansiktene (9) er ____mm brede
• Diameteren på den bredeste delen av vasen (10) er ___ mm
• Diameteren på bunnen av vasen (11) er ___ mm
• Diameteren på skumføttene er ____mm

Shopify-eksperten bruker disse bildene og målene til å skape en 3D-modell av den blå vasen. Eksperten sender Naomi en .glb- og en .usdz-fil som hun kan legge inn i 3D Warehouse-appen.

Steg 3: Kontroller kvaliteten til modellen

Når en Shopify-ekspert gir deg 3D-modellen, må du sjekke at du er fornøyd med kvaliteten. Eksperten gir 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?
• Oppfyller 3D-modellen de tekniske kravene for Shopify-plattformen?
  • 3D-modellen må være en GLB-fil.
  • GLB-filen bør være omtrent 4 MB.
  • GLB-filen må ikke overstige 15 MB.

Shopify-eksperten skal bygge 3D-modellen i henhold til visse standarder. For å finne ut mer om 3D-modellstandarder, slik at du bedre kan gjennomgå en modell, må du 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.

Merk

Hvis ikke du ser AR-bildet etter at du har lagt det til i 3D Warehouse-appen, kan du kontakte Apple brukerstøtte.

Steg:

1. Klikk Innstillinger > Apper og salgskanaler fra Shopify-administrator.

2. Klikk 3D Warehouse fra siden Apper og salgskanaler.

3. Klikk Åpne app.

4. Klikk på Legg til 3D-modell.

5. I tittelfeltet skriver du inn en tittel for 3D-modellen.

6. I feltet koblet produkt velger du produktet og varianten som denne 3D-modellen er knyttet til. Deretter klikker du på Velg produkt.

7. Klikk på .usdz Last opp fil og velg filen du fikk fra Shopify Experts.

8. Klikk på Lagre.

Gjenta opplastingsprosessen for .gltf- eller .glb-filen som Shopify-eksperten har levert. Sørg for at du kobler den til samme produkt, slik at du har begge 3D-modellfiltypene knyttet til produktet.

Merk

Hvis du laster opp en .gltf-fil, blir du bedt om å legge til ytterligere filer i Tilkoblede filer-seksjonen. Klikk på Last opp fil for å laste opp den tilkoblede teksturressursen du har fått av eksperten.

Godkjente filtyper

Shopify-eksperter leverer to ulike filtyper for hver 3D-modell, en .usdz-fil og en .gltf- eller .glb-fil. Disse ulike filtypene brukes av ulike plattformer og funksjoner. For eksempel, for at kunder skal kunne se 3D-produkter i Safari-nettleseren på iOS 12-enheter, må du laste opp en .usdz-fil. Den beste måten å sørge for at nettbutikken din er kompatibel med fremtidige funksjoner for utvidet virkelighet og 3D på, er å laste opp begge filtyper.

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.

Steg:

1. Klikk Innstillinger > Apper og salgskanaler fra Shopify-administrator.

2. Klikk Online store fra siden Apper og salgskanaler.

3. Klikk Åpne salgskanal.

4. Klikk på …-knappen > Rediger kode ved siden av det gjeldende temaet.

5. I layout-mappen klikker du på {/} theme.liquid.

6. Finn taggen <head>. Den bør være nesten øverst i filen.

7. På den neste linjen limer du inn følgende kode:

<script
  src="https://cdn.shopify.com/shopifycloud/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 library added to product template](/manual/apps/3d-warehouse/quicklook-product-template.png)

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:

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

Steg:

1. Klikk Innstillinger > Apper og salgskanaler fra Shopify-administrator.

2. Klikk Online store fra siden Apper og salgskanaler.

3. Klikk Åpne salgskanal.

4. Klikk på …-knappen > Rediger kode ved siden av det gjeldende temaet.

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

6. Finn seksjonen av malen som er forbundet med produktbildet. Se etter nøkkelord som ProductPhoto eller featured_image:

   

7. Finn den første <img... >-taggen i produktbilde-seksjonen.

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

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

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.