Shopify AR drivs av 3D Warehouse

Shopify AR låter kunder som använder webbläsaren Safari på iOS 12-enheter se realistiska och interaktiva versioner av dina produkter i Augmented Reality (förstärkt verklighet, AR). Med AR kan du ge dina kunder en bättre känsla av storlek, omfattning och detaljer för dina produkter. Appen 3D Warehouse gör det möjligt för dig att ladda upp 3D-modeller och länka dem till produkter i din butik.

Visa en vas i 3D

Om du vill att kunder ska kunna se dina produkter i AR, Installera 3D Warehouse-appen, skaffa 3D-modeller av dina produkter, lägg till 3D-modellerna till appen, redigera ditt tema för att aktivera AR Quick Look, och lägg sedan till AR-märket till dina 3D-produkter.

Steg 1: Installera 3D Warehouse-appen

Du kan installera appen 3D Warehouse med hjälp av registreringssidan.

Steg:

  1. Öppna registreringssidan.
  2. Ange din myshopify.com-butiksdomän.
  3. Klicka på Installera.
  4. Granska detaljerna och klicka sedan på Installera app.

Du kan komma åt 3D Warehouse-appen på sidan appar i din Shopify-admin.

Steg 2: få 3D-modeller av dina produkter

Innan kunder kan se dina produkter i AR behöver du 3D-modeller av dina produkter. 3D-modeller är virtuella representationer av ett föremål eller en yta i tre dimensioner. De låter dig se föremålet från vilken vinkel som helst.

Du kan få 3D-modeller av dina produkter via Shopifys partnerprogram.

Steg:

  1. Från din Shopify-admin, klicka på din kontomeny och klicka sedan på anlita en Shopify expert:

    Anlita en Shopify-expert

  2. Klicka för att expandera avsnittet ny funktionalitet.

  3. Klicka på Skapa 3D-modeller av dina produkter för ökad verklighetskänsla (börjar på 100 USD).

  4. Svara på de obligatoriska frågorna. Om du vill tillhandahålla produktbilder och produktdimensioner nu, se till att du följer de länkade riktlinjerna.

  5. Klicka på Skicka jobb.

När du skickar en arbetsförfrågan förbinder du dig inte att anlita en Shopify-expert. Det här steget skickar bara en beskrivning av ditt projekt till tillgängliga experter, som sedan granskar din förfrågan. Om en expert beslutar sig för att arbeta med dig, kommer de att kontakta dig med mer information om kostnader och hur man påbörjar processen.

Om du inte har tillhandahållit produktbilder och produktmått redan som en del av din jobbförfrågan kommer experten fråga om det. Följ nedanstående specifikationer när du tar foton och mätningar.

Produktbilder

3D-modeller skapas med hjälp av bilder. För att skapa 3D-modellen behöver Shopify-experten bilder av dina produkter från flera vinklar:

Produktbildsvinklar

Följ dessa riktlinjer när du tar bilder av din produkt:

  • Se till att din produkt är väl upplyst.
  • Se till att hela din produkt är i fokus.
  • Använd helst inte en mobilkamera om det går att undvika. Använd en kamera med ett 50 mm objektiv för stora produkter såsom möbler. Använd ett 70 mm eller 100 mm objektiv för små eller medelstora produkter.
  • Ta extra bilder av några unika detaljer eller strukturer.
  • Ge bildfilerna tydliga titlar som blue vase - top eller blue vase - left och spara dem i en mapp med tydligt namn.

Produktmått

För att skapa exakta 3D-modeller behöver Shopify-expert detaljerade mått av din produkt. Följ dessa riktlinjer när du ger experten måtten:

  • Beskriv varje dimension av din produkt i tydliga, enkla ord.
  • Ange måtten i mm .
  • Använd ett diagram för att visa vilka dimensioner måtten motsvarar.
  • Om du har tekniska ritningar eller CAD-filer kopplade till din produkt bör du ta med dessa också.

Exempel på att få 3D-modeller gjorda

Naomi säljer den här blå vasen:

Vas

Hon installerar appen 3D Warehouse, använder sedan Experts Marketplace för att hitta en Shopify-expert för att skapa en 3D-modell av vasen. Naomi förser experten med sex högkvalitativa foton tagna med en kamera med ett 70 mm-objektiv:

Produktfotovinklar

Naomi ger experten ett måttdiagram med motsvarande produktmått i millimeter:

Vas

  • Vasens (1) höjd är ____mm
  • Den övre delen av vasen till botten av halsen (2) är ____mm
  • Botten på halsen till botten av vasen (3) är ____mm
  • Diametern på vasens öppning (4) är ____ mm
  • Bredden på kanten av öppningen (5) är ____mm
  • Diametern på botten av halsen (6) är ____ mm
  • Det finns 8 sexkantiga ytor på vasen
  • Höjden på de sexkantiga ytorna (8) är ____mm
  • Bredden på de sexkantiga ytorna (9) är ____mm
  • Diametern för vasens bredaste del (10) är ____ mm
  • Vasens botten (11) har en diameter på ____ mm
  • Diametern på skumfötterna är ____mm

Shopify-experten använder dessa foton och mått för att skapa en 3D-modell av den blå vasen. Experten skickar Naomi en .glb och en .usdz-fil till henne att lägga till i 3D Warehouse-appen.

Steg 3: Kontrollera modellens kvalitet

När en Shopify-expert ger dig en 3D-modell bör du kontrollera att du är nöjd med kvaliteten. Experten borde ge dig anvisningar om hur du förhandsgranskar modellen.

Kontrollera modellen från alla vinklar. Du kan använda GlTF Viewer för att förhandsgranska dina 3D-modeller. Överväg att följande frågor när du granskar din modell:

  • Matchar modellens form referensbilderna som du skickade till experten?
  • Är alla delar av modellen proportionella jämfört med resten?
  • Om du kan förhandsgranska modellen i augmented reality ser då modellens storlek korrekt ut jämfört med resten av miljön?
  • Ser modellen ut som den är gjord av samma material som produkten?
  • Ser modellens material utsträckt, suddigt eller förvrängt ut?
  • Finns det några detaljer som små nötningar eller repor som få modellens material att kännas mer realistiskt?
  • Om delar av produkten är transparenta, reflekterande eller avger ljus, ser de delarna då rätt ut?
  • Ser alla kanter realistiska ut? Är någon av dem för skarp och behöver mjukas upp?
  • Om det finns några dekorativa detaljer, till exempel en logotyp eller lite text, är de lätta att se?
  • Finns det några luckor eller hål där det inte borde finnas några?

Shopify-expert ska bygga 3D-modellen enligt vissa standarder. Se Skapa 3D-modeller för handlare om du vill veta mer om dessa standarder, så att du kan granska en modell bättre.

Kontakta Shopify-expert och förklara vad som är fel med modellen om du tycker att den inte är tillräckligt bra.

Steg 4: Lägg till en 3D-modell till 3D Warehouse-appen

När du har installerat appen 3D Warehouse och har hämtat en 3D-modell måste du lägga till modellen i 3D Warehouse-appen.

Obs! Om du inte kan se en AR bild efter att du har lagt till den i 3D Warehouse-appen, kontakta Apple-supporten.

Steg:

  1. Gå till Appar från ditt Shopify-administratörskonto.
  2. Klicka på 3D Warehouse.
  3. Klicka på Lägg till 3D-modell.
  4. Ange en-namn för 3D-modellen i fältet rubrik.
  5. I fältet länkad produkt väljer du den produkt och variant som den här 3D-modellen är kopplad till och klickar sedan på Välj produkt.
  6. Klicka på Ladda upp fil och välj den .usdz-fil som tillhandahålls av Shopify-experten.
  7. Klicka på Spara.

Upprepa uppladdningsprocessen för den .gltf- eller .glb-fil som din Shopify-expert tillhandahållit. Se till att du länkar den till samma produkt så att du har båda 3D-modellfiltyperna som är kopplade till produkten.

Obs! Om du laddar upp en .gltf-fil uppmanas du att lägga till ytterligare filer i avsnittet Länkade filer. Klicka på Ladda upp fil för att ladda upp de länkade texturresurserna som tillhandahålls av din expert.

Godkända filtyper

Shopify-experter tillhandahåller två olika filtyper för varje 3D-modell, en .usdz-fil och en .gltf- eller .glb-fil. Dessa olika filtyper används av olika plattformar och funktioner. Om du till exempel vill att kunder ska kunna se 3D-produkter i webbläsaren Safari på iOS 12-enheter måste du ladda upp en .usdz-fil. Det bästa sättet att se till att din webbutik är kompatibel med framtida förstärkt verklighet och 3D-funktioner är att ladda upp båda filtyperna.

Steg 5: redigera ditt tema för att aktivera AR Quick Look

Du måste redigera din temakod för att aktivera AR Quick look, som är den funktion som låter kunder som använder webbläsaren Safari på iOS 12-enheter se dina 3D-produkter.

Steg:

  1. Från ditt Shopify-admin klickar du på Webbutik.
  2. Klicka på Åtgärder > Redigera kod intill det aktuella temat.
  3. I layoutmappen klickar du på {/} theme.liquid.
  4. Hitta <head>-taggen. Den bör vara nästan längst upp i filen.
  5. På nästa rad klistrar du in följande kod:
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. Klicka på Spara.

  2. I mappen avsnitt, klicka på {/} product-template.liquid.

  3. Lägg till följande kod högst upp 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 har lagts till i produktmall

  1. Klicka på Spara.

Om du använder mer än en produktmall, lägg till koden till dessa mallfiler också.

Steg 6: Lägg till AR-märke till dina 3D-produkter

Kunder som använder iOS 12-enheter vet att de kan se din produkt i 3D när de ser överlägget i AR-märket:

Överlagring av AR-märke

Du måste redigera din temakod för att visa AR-märket på produktbilder.

Steg:

  1. Från ditt Shopify-admin klickar du på Webbutik.
  2. Klicka på Åtgärder > Redigera kod intill det aktuella temat.
  3. I mappen avsnitt, klicka på {/} product-template.liquid.
  4. Hitta avsnittet i den mall som är kopplad till ditt produktfoto. Leta efter nyckelord såsom ProductPhoto eller featured_image:
    Produktfoto Liquid
  5. I avsnittet produktfoto hittar du den första <img... >-taggen.
  6. På raden ovanför den taggen klistrar du in följande kod:
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

Produktfoto Liquid med kod

  1. Klicka på Spara.

  2. Öppna den fil som innehåller ditt temas CSS. Den här filen finns vanligtvis i mappen tillgångar, och oftast har den ett namn som {/}theme.scss.liquid.

  3. Längst ner i filen lägger du till följande kod:

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

Om du vill prova din 3D-modell öppnar du din webbutik i webbläsaren Safari på en iOS-enhet som kör iOS 12 och navigerar sedan till produktsidan. Tryck på AR-märket i produktbilden för att visa det i 3D.

Är du redo att börja sälja med Shopify?

Prova gratis