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 je producten te bekijken met behulp van AR (Augmented Reality). Met AR kun je je klanten een beter beeld geven van de grootte, schaal en details van je producten. De 3D Warehouse-app maakt AR-ervaringen mogelijk doordat je 3D-modellen kunt uploaden en koppelen aan producten in je winkel.
Installeer de 3D Warehouse-app, maak 3D-modellen van je producten, voeg de 3D-modellen toe aan de app, bewerk je thema om AR Quick Look in te schakelen en voeg vervolgens de AR-badge toe aan je 3D-producten om klanten in staat te stellen je producten in AR te bekijken.
Op deze pagina
Stap 1: De 3D Warehouse-app installeren
Stap 2: 3D-modellen maken van je producten
Voordat klanten je producten in AR kunnen zien, heb je 3D-modellen van je producten nodig. 3D-modellen zijn virtuele weergaven van een object of een oppervlak in drie dimensies. Hiermee kun je het object vanuit elke hoek bekijken.
Je kunt een Shopify-expert inhuren om je te helpen bij het aanmaken van 3D-modellen voor je producten. Blader in de Shopify Expert Marketplace door experts die 3D-modellen maken, kies een expert en neem contact met hen op.
Gebruik het contactformulier voor experts om details over je project op te geven. Als je nu productfoto's en productafmetingen wilt aanleveren, moet je de gekoppelde richtlijnen volgen.
Wanneer je contact opneemt met een expert, ben je niet verplicht om een Shopify-expert in te huren. Met deze stap wordt alleen een verzoek ingediend bij de expert die je verzoek vervolgens zal beoordelen. Als een expert besluit om met jou samen te werken, nemen zij contact met je op met meer informatie over hun vergoedingen en hoe je kunt gaan samenwerken.
Als je geen productfoto's en productafmetingen hebt meegestuurd met de opdrachtaanvraag, zal de expert deze bij je 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 je producten nodig die vanuit meerdere invalshoeken zijn genomen:
Volg deze richtlijnen wanneer je foto's van je product maakt:
- Zorg ervoor dat je 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 kun je 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 - topofblue vase - leften bewaar ze in een duidelijk gelabelde map.
Productafmetingen
De Shopify Expert kan alleen nauwkeurige 3D-modellen maken als je gedetailleerde afmetingen van je product aanlevert. Hanteer daarom deze richtlijnen:
- Beschrijf elke dimensie van je 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 je 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:
Ze installeert de 3D Warehouse-app en gebruikt vervolgens de Experts Marketplace om een Shopify-expert in te huren 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:
Naomi stuurt de expert ook een tekening met de bijbehorende productafmetingen in millimeters:
- 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 je controleren of je tevreden bent met de kwaliteit van het model. De expert moet je instructies geven om een voorbeeld van het model te bekijken.
Bekijk het model vanuit alle hoeken. Je kunt de glTF-viewer om een voorbeeld van je 3D-modellen te bekijken. Houd bij het beoordelen van je model rekening met de volgende vragen:
- Komt de vorm van het model overeen met de productreferentiefoto's die je aan de expert hebt gegeven?
- Staan alle delen van het model in verhouding met de rest?
- Als je 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 er decoratieve details zijn, zoals een logo of wat tekst, zijn deze dan gemakkelijk te zien?
- Zijn er gaten of uitsparingen te zien waar dit niet het geval zou moeten zijn?
- Voldoet het 3D-model aan de technische vereisten voor het Shopify-platform?
- Het 3D-model moet een GLB-bestand zijn.
- Het GLB-bestand moet ongeveer 4 MB zijn.
- Het GLB-bestand mag niet groter dan 15 MB 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 je een model beter kunt beoordelen.
Als je van mening bent dat de kwaliteit van het model onvoldoende is, neem contact op met de Shopify-expert en geef aan wat er volgens jou mis is.
Stap 4: Een 3D-model toevoegen aan de 3D Warehouse-app
Wanneer je de 3D Warehouse-app hebt geïnstalleerd en een 3D-model hebt laten maken, moet je het model toevoegen aan de 3D Warehouse-app.
Stappen:
Klik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.
Klik op de pagina Apps en verkoopkanalen op 3D Warehouse.
Klik op App openen.
Klik op 3D-model toevoegen.
Voer in het veld Titel een naam in voor het 3D-model.
Selecteer in het veld Gekoppeld product het product en de variant waaraan dit 3D-model is gekoppeld en klik vervolgens op Product selecteren.
Klik op Bestand uploaden en selecteer het
.usdz-bestand dat is aangeleverd door de Shopify Expert.Klik op Opslaan.
Herhaal het uploadproces voor het .gltf- of .glb-bestand dat je van de Shopify-expert hebt ontvangen. Zorg ervoor dat je 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 je een .usdz-bestand uploaden. De beste manier om ervoor te zorgen dat je onlinewinkel geschikt is voor toekomstige augmented reality- en 3D-functies, is door beide bestandstypen te uploaden.
Stap 5: Je thema bewerken om AR Quick Look in te schakelen
Je moet de code van je thema aanpassen om AR Quick Look in te schakelen. Dit is de functie waarmee klanten via de browser Safari op iOS 12-apparaten je producten in 3D kunnen bekijken.
Stappen:
Klik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.
Klik op de pagina Apps en verkoopkanalen op Online store.
Klik op Verkoopkanaal openen.
Klik naast je huidige thema op de knop ... > Code bewerken.
Klik in de map Layout op {/} theme.liquid.
Zoek de tag
<head>. Deze moet ergens aan het begin van het bestand staan.Plak deze code op de volgende regel:
<script
src="https://cdn.shopify.com/shopifycloud/ar-quicklook-js/assets/v1/shopify3d.js"
crossorigin="anonymous"
></script>- Klik op Opslaan.
- Klik in de map Sections op {/} product-template.liquid.
- 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>- Klik op Opslaan.
Voeg de code ook aan die templatebestanden toe als je meer dan één producttemplate gebruikt.
Stap 6: De AR-badge toevoegen aan je 3D-producten
Klanten die iOS 12-apparaten gebruiken, weten dat ze je product in 3D kunnen bekijken wanneer ze de AR-badge-overlay zien:
Je moet de code van je thema bewerken om de AR-badge weer te geven op productafbeeldingen.
Stappen:
Klik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.
Klik op de pagina Apps en verkoopkanalen op Online store.
Klik op Verkoopkanaal openen.
Klik naast je huidige thema op de knop ... > Code bewerken.
Klik in de map Sections op {/} product-template.liquid.
Zoek in de template het gedeelte dat bij je productfoto hoort. Zoek naar trefwoorden zoals
ProductPhotooffeatured_image:
Zoek in het gedeelte van de productfoto de eerste tag
<img... >.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>- Klik op Opslaan.
- Open het bestand met de CSS van je thema. Dit bestand bevindt zich meestal in de map Assets en heeft vaak een naam zoals {/}theme.scss.liquid.
- Plak helemaal onderaan het bestand de volgende code:
.ar-quicklook-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 2;
}- Klik op Opslaan.
Als je het 3D-model wilt testen, open je onlinewinkel in Safari op een apparaat met iOS 12 en navigeer vervolgens naar de productpagina. Tik op de AR-badge in de productafbeelding om het product in 3D te bekijken.