Shopify AR wordt mogelijk gemaakt door 3D Warehouse

Shopify AR stelt klanten in staat om met de browser Safari op iOS 12-apparaten realistische en interactieve versies van uw producten te bekijken met behulp van AR (Augmented Reality). Met AR kunt u uw klanten een beter beeld geven van de grootte, schaal en details van uw producten. De 3D Warehouse-app maakt AR-ervaringen mogelijk doordat u 3D-modellen kunt uploaden en koppelen aan producten in uw winkel.

Een vaas bekijken in 3D

Om klanten in staat te stellen uw producten in AR te bekijken, installeert u de 3D Warehouse-app, maakt u 3D-modellen van uw producten, voegt u de 3D-modellen toe aan de app, bewerkt u uw thema om AR Quick Look in te schakelen en voegt u vervolgens de AR-badge toe aan uw 3D-producten .

Stap 1: De 3D Warehouse-app installeren

U kunt de 3D Warehouse-app installeren via de aanmeldingspagina.

Stappen:

  1. Open de aanmeldingspagina.
  2. Voer het myshopify.com-domein van uw winkel in.
  3. Klik op Installeren.
  4. Bekijk de details en klik vervolgens op App installeren.

De 3D Warehouse-app is toegankelijk via de pagina Apps van uw Shopify-beheerder.

Stap 2: 3D-modellen maken van uw producten

Voordat klanten uw producten in AR kunnen zien, hebt u 3D-modellen van uw producten nodig. 3D-modellen zijn virtuele weergaven van een object of een oppervlak in drie dimensies. Hiermee kunt u het object vanuit elke hoek bekijken.

U kunt 3D-modellen van uw producten verkrijgen via het Shopify Partner-programma.

Stappen:

  1. Klik vanuit uw Shopify-beheerder op uw accountmenu en klik vervolgens op Een Shopify-expert inhuren:

    Een Shopify-expert inhuren

  2. Klik om het gedeelte Nieuwe functionaliteit uit te vouwen.

  3. Klik op 3D-modellen van uw producten maken voor augmented reality (vanaf $ 100 USD).

  4. Beantwoord de vereiste vragen. Als u nu productfoto's en productafmetingen wilt aanleveren, moet u de gekoppelde richtlijnen volgen.

  5. Klik op Opdracht verzenden.

Wanneer u een opdrachtaanvraag indient, bent u niet verplicht om een Shopify-expert in te huren. In deze stap wordt alleen een beschrijving van uw project naar beschikbare experts gestuurd, die vervolgens uw aanvraag kunnen doornemen. Als een expert besluit om met u samen te werken, neemt die persoon contact met u op met meer informatie over de kosten en hoe een en ander verder zal verlopen.

Als u geen productfoto's en productafmetingen hebt meegestuurd met de opdrachtaanvraag, zal de expert deze bij u opvragen. Volg de onderstaande specificaties bij het nemen van foto's en het opmeten van maten.

Productfoto's

3D-modellen worden gemaakt van foto's. Om het 3D-model te maken, heeft de Shopify-expert foto's van uw producten nodig die vanuit meerdere invalshoeken zijn genomen:

Invalshoeken van productfoto's

Volg deze richtlijnen wanneer u foto's van uw product maakt:

  • Zorg ervoor dat uw product goed verlicht is.
  • Zorg ervoor dat het hele product goed scherp is gesteld.
  • Gebruik liever geen mobiele telefoon om de foto's te maken. Gebruik voor grote producten zoals meubels een camera met een 50 mm-lens. Voor kleine tot middelgrote producten kunt u een lens van 70 of 100 mm gebruiken.
  • Neem extra foto's van alle unieke details of structuren.
  • Geef de fotobestanden duidelijke namen zoals blue vase - top of blue vase - left en bewaar ze in een duidelijk gelabelde map.

Productafmetingen

De Shopify-expert kan alleen nauwkeurige 3D-modellen maken als u gedetailleerde afmetingen van uw product aanlevert. Hanteer daarom deze richtlijnen:

  • Beschrijf elke dimensie van uw product in duidelijke, eenvoudige bewoordingen.
  • Geef de afmetingen op in mm.
  • Voeg een tekening toe om aan te geven voor welke dimensies de afmetingen gelden.
  • Als u technische tekeningen of CAD-bestanden hebt van een product, stuur deze dan ook mee.

Voorbeeld van het aanvragen van 3D-modellen

Naomi verkoopt deze blauwe vaas:

Vaas

Ze installeert de 3D Warehouse-app en gebruikt vervolgens de Services Marketplace om een Shopify-expert te vinden die een 3D-model van de vaas kan maken. Naomi stuurt zes foto's van goede kwaliteit naar de expert, gemaakt met een camera met een 70 mm-lens:

Invalshoeken van productfoto's

Naomi stuurt de expert ook een tekening met de bijbehorende productafmetingen in millimeters:

Vaas

  • De hoogte van de vaas (1) is ____mm
  • De afstand tussen de bovenzijde van de vaas en de onderste rand van de nek (2) is ____mm
  • De afstand tussen de onderste rand van de nek en de onderzijde van de vaas (3) is ____mm
  • De diameter van de opening van de vaas (4) is ____mm
  • De breedte van de lip van de opening (5) is ____mm
  • De diameter van de onderste rand van de nek (6) is ____mm
  • De vaas heeft 8 zeshoekige facetten
  • De hoogte van de zeshoekige facetten (8) is ____mm
  • De breedte van de zeshoekige facetten (9) is ____mm
  • De diameter van het breedste deel van de vaas (10) is ____mm
  • De diameter van de onderzijde van de vaas (11) is ____mm
  • De diameter van de schuimvoeten is ____mm

De Shopify-expert gebruikt deze foto's en afmetingen om een 3D-model van de blauwe vaas te maken. De expert stuurt Naomi een .glb- en een .usdz-bestand die ze kan toevoegen aan de 3D Warehouse-app.

Stap 3: De kwaliteit van het model controleren

Wanneer een Shopify-expert een 3D-model aflevert, moet u controleren of u tevreden bent met de kwaliteit van het model. De expert moet u instructies geven om een voorbeeld van het model te bekijken.

Controleer het model vanuit alle hoeken. Stel uzelf daarbij de volgende vragen:

  • Komt de vorm van het model overeen met de productreferentiefoto's die u aan de expert hebt gegeven?
  • Staan alle delen van het model in verhouding met de rest?
  • Als u het model in augmented reality kunt bekijken, ziet de schaal van het model er dan correct uit in vergelijking met de rest van de scène?
  • Ziet het model eruit alsof het van hetzelfde materiaal is gemaakt als het product?
  • Zien de materialen van het model er uitgerekt, wazig of vervormd uit?
  • Zijn er details zoals slijtage of krassen zichtbaar om de materialen van het model realistischer te laten lijken?
  • Als delen van het product transparant zijn, reflecteren of licht afgeven, zien deze er dan levensecht uit?
  • Zien de randen er allemaal realistisch uit? Zijn bepaalde randen te scherp en moeten deze worden afgezwakt?
  • Als het product decoratieve details heeft zoals een logo of tekst, zijn deze dan gemakkelijk te zien?
  • Zijn er gaten of uitsparingen te zien waar dit niet het geval zou moeten zijn?

De Shopify-expert moet het 3D-model volgens bepaalde standaarden bouwen. Zie 3D-modellen maken voor ondernemingen voor meer informatie over deze standaarden, zodat u een model beter kunt beoordelen.

Als u van mening bent dat de kwaliteit van het model onvoldoende is, neemt u contact op met de Shopify-expert en geeft u aan wat er volgens u mis is.

Stap 4: Een 3D-model toevoegen aan de 3D Warehouse-app

Wanneer u de 3D Warehouse-app hebt geïnstalleerd en een 3D-model hebt laten maken, moet u het model toevoegen aan de 3D Warehouse-app.

Stappen:

  1. Klik in de Shopify-beheerder op Apps.
  2. Klik op 3D Warehouse.
  3. Klik op 3D-model toevoegen.
  4. Voer in het veld Titel een naam in voor het 3D-model.
  5. Selecteer in het veld Gekoppeld product het product en de variant waaraan dit 3D-model is gekoppeld en klik vervolgens op Product selecteren.
  6. Klik op Bestand uploaden en selecteer het .usdz-bestand dat is aangeleverd door de Shopify-expert.
  7. Klik op Opslaan.

Herhaal het uploadproces voor het .gltf- of .glb-bestand dat u van de Shopify-expert hebt ontvangen. Zorg ervoor dat u het bestand aan hetzelfde product koppelt, zodat beide bestandstypen van het 3D-model aan het product zijn gekoppeld.

Geaccepteerde bestandstypen

Shopify-experts leveren twee verschillende bestandstypen aan voor elk 3D-model, te weten een .usdz-bestand en een .gltf- of .glb-bestand. Deze verschillende bestandstypen worden gebruikt door verschillende platforms en functies. Als klanten bijvoorbeeld 3D-producten in de Safari-browser op iOS 12-apparaten willen bekijken, moet u een .usdz-bestand uploaden. De beste manier om ervoor te zorgen dat uw online winkel geschikt is voor toekomstige augmented reality- en 3D-functies, is door beide bestandstypen te uploaden.

Stap 5: Uw thema bewerken om AR Quick Look in te schakelen

U moet de code van uw thema aanpassen om AR Quick Look in te schakelen. Dit is de functie waarmee klanten via de browser Safari op iOS 12-apparaten uw producten in 3D kunnen bekijken.

Stappen:

  1. Klik in uw Shopify-beheerder op Online winkel.
  2. Klik naast uw huidige thema op Acties > Code bewerken.
  3. Klik in de map Layout op {/} theme.liquid.
  4. Zoek de tag <head>. Deze moet ergens aan het begin van het bestand staan.
  5. Plak deze code op de volgende regel:
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. Klik op Opslaan.

  2. Klik in de map Sections op {/} product-template.liquid.

  3. Plak de volgende code aan het begin van het bestand:

<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-bibliotheek toegevoegd aan productsjabloon

  1. Klik op Opslaan.

Als u meer dan één productsjabloon gebruikt, voegt u de code ook aan die sjabloonbestanden toe.

Stap 6: De AR-badge toevoegen aan uw 3D-producten

Klanten die iOS 12-apparaten gebruiken, weten dat ze uw product in 3D kunnen bekijken wanneer ze de AR-badge-overlay zien:

AR-badge-overlay

U moet de code van uw thema bewerken om de AR-badge weer te geven op productafbeeldingen.

Stappen:

  1. Klik in uw Shopify-beheerder op Online winkel.
  2. Klik naast uw huidige thema op Acties > Code bewerken.
  3. Klik in de map Sections op {/} product-template.liquid.
  4. Zoek in de sjabloon het gedeelte dat bij uw productfoto hoort. Zoek naar trefwoorden zoals ProductPhoto of featured_image:
    ProductPhoto liquid
  5. Zoek in het gedeelte van de productfoto de eerste tag <img... >.
  6. Plak op de regel boven die tag de volgende code:
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

ProductPhoto liquid met code

  1. Klik op Opslaan.
  2. Open het bestand met de CSS van uw thema. Dit bestand bevindt zich meestal in de map Assets en heeft vaak een naam zoals {/}theme.scss.liquid.
  3. Plak helemaal onderaan het bestand de volgende code:
.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
  1. Klik op Opslaan.

Als u het 3D-model wilt testen, opent u uw online winkel in Safari op een apparaat met iOS 12 en navigeert u vervolgens naar de productpagina. Tik op de AR-badge in de productafbeelding om het product in 3D te bekijken.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis