Shopify-AR er drevet af 3D Warehouse

Advarsel

Appen 3D Warehouse frarådes, og den vil ikke længere være tilgængelig til installation. Du kan uploade 3D-modeller direkte fra siden Produkter. Få mere at vide om Produktmedier.

Shopify-AR giver kunder, der bruger Safari-browseren på iOS 12-enheder, mulighed for at se realistiske og interaktive versioner af dine produkter i augmented reality (AR). Hvis du benytter AR, kan dine kunder få en bedre fornemmelse af dine produkters størrelse, vægt og detaljer. Du kan aktivere AR-oplevelsen via appen 3D Warehouse, hvor du kan uploade 3D-modeller og knytte dem til produkter i din butik.

Hvis du vil give dine kunderne mulighed for at se dine produkter i AR, skal du installere appen 3D Warehouse, skabe 3D-modeller af dine produkter, føje 3D-modellerne til appen, redigere dit tema for at aktivere AR Quick Look og derefter føje AR-badgen til dine 3D-produkter.

Trin 1: Installer appen 3D Warehouse

Bemærk

Appen 3D Warehouse frarådes, og den vil ikke længere være tilgængelig til installation. Du kan uploade 3D-modeller direkte fra siden Produkter. Få mere at vide om, hvordan du føjer medier til dine produkter, i Produktmedier.

Trin 2: Hent 3D-modeller af dine produkter

Du skal have 3D-modeller af dine produkter, hvis dine kunder skal kunne se dem i AR. 3D-modeller er virtuelle afbildninger af et objekt eller en overflade i tre dimensioner. På denne måde kan de se objektet fra alle vinkler.

Du kan ansætte en Shopify-ekspert til at oprette 3D-modeller af dine produkter. I Shopify Experts Marketplace kan du gennemse eksperter, der tilbyder tjenesten Oprettelse af 3D-model, vælge en ekspert og kontakte vedkommende.

Angiv oplysninger om dit projekt ved hjælp af kontaktformularen til eksperter. Hvis du vil tilføje produktbilleder og produktmål nu, skal du følge de tilknyttede retningslinjer.

Du forpligter dig ikke til at ansætte en Shopify-ekspert, når kontakter en ekspert. Dette trin sender kun anmodningen til eksperten, som så kan gennemgå anmodningen. Eksperten kontakter dig med flere oplysninger og sine gebyrer, og hvordan I kan begynde at samarbejde, hvis vedkommende beslutter sig for at samarbejde med dig.

Hvis du ikke allerede har angivet produktbilleder og produktdimensioner som en del af din jobanmodning, vil eksperterne bede dig om dem. Følg nedenstående specifikationer, når du tager billeder og mål.

Produktbilleder

Der oprettes 3D-modeller ved hjælp af billeder. Shopify-eksperten skal bruge billeder af dine produkter fra forskellige vinkler for at kunne lave 3D-modeller.

Følg disse retningslinjer, når du tager billeder af dit produkt:

• Sørg for, at produktet er godt belyst.
• Sørg for, at hele produktet er i fokus.
• Undgå for så vidt muligt at bruge et mobilkamera. Brug et kamera med en linse på 50 mm til større produkter, som f.eks. møbler. Brug en linse på 70 eller 100 mm til små og mellemstore produkter.
• Tag flere billeder af unikke detaljer og teksturer.
• Giv billederne nøjagtige titler, som f.eks. blue vase - top eller blue vase - left, og bevar dem i en mappe med en nøjagtig label.

Produktdimensioner

Shopify-eksperter har brug for detaljerede mål af dit produkt, når de skal lave nøjagtige 3D-modeller. Følg disse retningslinjer, når du angiver målene:

• Beskriv hver enkelt dimension på dit produkt i klare, enkle termer.
• Angiv målene i mm.
• Brug et diagram til at vise, hvilke dimensioner der svarer til hvilke mål.
• Hvis du har tekniske tegninger eller CAD-filer, som er knyttet til dit produkt, skal du også sende dem med.

Eksempel på, hvordan du får fremstillet 3D-modeller

Naomi sælger denne blå vase:

Hun installerer appen 3D Warehouse, bruger derefter Experts Marketplace til at ansætte en Shopify-ekspert, der kan lave en 3D-model af vasen. Naomi sender eksperten seks billeder i høj kvalitet, som er taget med et kamera med et 70 mm objektiv:

Naomi giver eksperten et måldiagram med tilsvarende produktmål i millimeter:

• Højden på vasen er (1) is ____ mm
• Fra toppen af vasen til bunden af halsen er der (2) ____ mm
• Fra bunden af halsen til bunden af vasen er der (3) ____ mm
• Diameteren i vasens mund er (4) ____ mm
• Bredden på mundens læbe (5) er ____ mm
• Diameteren på bunden af halsen (6) er ____ mm
• Vasen har 8 sekskantede flader
• Højden på de sekskantede flader (8) er ____ mm
• Bredden på de sekskantede flader (9) er ____ mm
• Diameteren på den bredeste del af vasen (10) er ____ mm
• Diameteren af bunden af vasen (11) er ____ mm
• Diameteren af skumfødderne er ____ mm

Shopify-eksperter bruger disse billeder og mål til at skabe en 3D-model af den blå vase. Eksperten sender Naomi en .glb og en .usdz-fil, som hun kan føje til appen 3D Warehouse.

Trin 3: Tjek kvaliteten af modellen

Når du modtager en 3D-model fra en Shopify-ekspert, skal du sikre dig, at du er tilfreds med kvaliteten. Eksperten bør give dig instruktioner til en forhåndsvisning af modellen.

Se modellen fra alle vinkler. Du kan få glTF Viewer til forhåndsvisning af dine 3D-modeller. Overvej følgende spørgsmål, når du gennemgår din model:

• Stemmer modellens form overens med referencebillederne af produktet, som du sendte til eksperten?
• Er alle dele proportionelle i forhold til hinanden?
• Ser modellens skalering ud i forhold til resten af omgivelserne, hvis du har adgang til en forhåndsvisning af modellen i augmented reality?
• Ser modellen ud til at være lavet i samme materialer som produktet?
• Ser modellens materialer ud til at være strakt, sløret eller forvrænget?
• Er der detaljer, som får modellens materialer til at se mere realistiske ud, som f.eks. skrammer eller ridser?
• Ser produktets gennemsigtige, reflekterende eller lysende dele godt ud, hvis det har én eller flere af disse?
• Ser alle kanter realistiske ud? Skal nogen af dem gøres blødere, fordi de er for skarpe?
• Er det nemt at se eventuelle dekorative detaljer, som f.eks. logoer eller tekst?
• Er der revner eller huller, hvor de ikke burde være?
• Opfylder 3D-modellen de tekniske krav til Shopify-platformen?
  • 3D-modellen skal være en GLB-fil.
  • GLB-filen skal være på cirka 4 MB.
  • GLB-filen må ikke overstige 15 MB.

Shopify-eksperten bør bygge 3D-modellen i henhold til bestemte standarder. Se Oprettelse af 3D-modeller til shopejere, hvis du vil vide mere om disse standarder for at kunne gennemgå modellen bedre.

Hvis du ikke mener, at modellens kvalitet er høj nok, skal du kontakte den pågældende Shopify-ekspert og fortælle ham eller hende, hvad der er galt med den.

Trin 4: Føj en 3D-model til appen 3D Warehouse

Når du har installeret appen 3D Warehouse og fået lavet en 3D-model, skal du føje modellen til appen 3D Warehouse.

Bemærk

Kontakt Apple Support, hvis du ikke kan se AR-billedet, når du har føjet det til appen 3D Warehouse.

Fremgangsmåde:

1. Klik på Indstillinger > Apps- og Salgskanaler i Shopify-administrator.

2. Fra siden Apps og salgskanaler, klik på 3D Warehouse.

3. Klik på Åbn app.

4. Klik på Tilføj 3D-model.

5. Angiv en titel til 3D-modellen i feltet Titel.

6. I feltet Tilknyttet produkt skal du vælge det produkt og den variant, som denne 3D-model er knyttet til, og derefter klikke på Vælg produkt.

7. Klik på Upload fil, og vælg den .usdz-fil, du har modtaget fra din Shopify-ekspert.

8. Klik på Gem.

Gentag uploadprocessen for den .gltf- eller .glb-fil, du har modtaget fra din Shopify-ekspert. Sørg for, at du knytter den til det samme produkt, så du har begge filtyper for 3D-modellen knyttet til produktet.

Bemærk

Hvis du uploader en .gltf-fil, bliver du bedt om at tilføje flere filer i afsnittet Tilknyttede filer. Klik på Upload fil for at uploade de tilknyttede teksturressourcer, du har modtaget fra eksperten.

Accepterede filtyper

Shopify-eksperter leverer to forskellige filtyper til alle 3D-modeller: en .usdz-fil og en .gltf- eller .glb-fil. De forskellige filtyper bruges af forskellige platforme og funktioner. Du skal f.eks. uploade en .usdz-fil, hvis dine kunder skal kunne se 3D-produkter i Safari-browseren på iOS 12-enheder. Den bedste måde at sikre, at din webshop er kompatibel med fremtidige augmented reality- og 3D-funktioner på, er at upload begge filtyper.

Trin 5: Rediger dit tema for at aktivere AR Quick Look

Du skal redigere din temakode for at aktivere AR Quick Look. Det er den funktion, som giver kunder mulighed for at se dine 3D-produkter, hvis de bruger Safari-browseren på iOS 12-enheder.

Fremgangsmåde:

1. Klik på Indstillinger > Apps- og Salgskanaler i Shopify Admin.

2. Klik på Online storepå Apps- og salgskanalsiden.

3. Klik på Åbn salgskanal.

4. Ud for dit aktuelle tema skal du klikke på knappen ... > Rediger kode.

5. Klik på {/} theme.liquid i mappen Layout.

6. Find tagget <head>. Det bør være placeret næsten øverst i filen.

7. Indsæt følgende kode på næste linje:

<script
  src="https://cdn.shopify.com/shopifycloud/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>

1. Klik på Gem.
2. Klik på {/} product-template.liquid i mappen Afsnit.
3. Indsæt 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. Klik på Gem.

Hvis du bruger mere end én produktskabelon, skal du også tilføje koden for disse skabelonfiler.

Trin 6: Føj AR-badgen til dine 3D-produkter

Når kunder, der bruger iOS12-enheder, ser AR-badgen, ved de, at de kan se dit produkt i 3D.

Du skal redigere din temakode, hvis du vil vise AR-badgen på produktbilleder.

Fremgangsmåde:

1. Klik på Indstillinger > Apps- og Salgskanaler i Shopify Admin.

2. Klik på Online storepå Apps- og salgskanalsiden.

3. Klik på Åbn salgskanal.

4. Ud for dit aktuelle tema skal du klikke på knappen ... > Rediger kode.

5. Klik på {/} product-template.liquid i mappen Afsnit.

6. Find afsnittet af skabelonen, der er knyttet til dit produktbillede. Led efter søgeord som ProductPhoto eller featured_image:

   

7. Find det første <img... >-tag i afsnittet produktbillede.

8. Indsæt følgende kode på linjen over tagget:

<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. Klik på Gem.
2. Åbn filen, der indeholder dit temas CSS. Du kan som regel finde denne fil i mappen Aktiver, og den har oftest en titel som f.eks. {/}theme.scss.liquid.
3. I bunden af filen skal du indsætte følgende kode:

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

1. Klik på Gem.

Hvis du vil afprøve din 3D-model, skal du åbne din webshop i Safari-browseren på en iOS 12-enhed og derefter navigere til produktsiden. Tryk på AR-badgen i produktbilledet for at se produktet i 3D.