Shopify AR toimii 3D Warehousen avulla

Huomio

3D Warehouse -sovellus on vanhentunut, eikä sitä voi asentaa. Voit ladata 3D-malleja suoraan Tuotteet-sivulta. Lue lisää kohdasta Tuotemedia.

Shopify AR antaa Safaria iOS 12 -laitteilla käyttäville asiakkaille mahdollisuuden tarkastella realistisia ja interaktiivisia versioita tuotteistasi lisätyn todellisuuden (AR) avulla. AR:n ansiosta asiakkaasi saavat paremman käsityksen tuotteidesi koosta, mittakaavasta ja yksityiskohdista. 3D Warehouse -sovelluksen avulla voit luoda lisätyn todellisuuden kokemuksia, sillä se mahdollistaa 3D-mallien lähettämisen ja niiden linkittämisen kauppasi tuotteisiin.

Jos haluat, että asiakkaasi voivat tutustua tuotteisiisi lisätyssä todellisuudessa, asenna 3D Warehouse -sovellus, tee tuotteistasi 3D-malleja, lisää 3D-mallit sovellukseen, muokkaa teemaasi niin, että se voi ottaa AR Quick Lookin käyttöön ja lisää sitten AR-merkki 3D-tuotteisiisi.

Vaihe 1: Asenna 3D Warehouse -sovellus

Huomaa

3D Warehouse -sovellus on vanhentunut, eikä sitä voi asentaa. Voit ladata 3D-malleja suoraan Tuotteet-sivulta. Lue lisää median lisäämisestä tuotteisiisi kohdasta Tuotemedia.

Vaihe 2: Tee tuotteistasi 3D-malleja

Ennen kuin asiakkaat voivat katsella tuotteitasi AR:ssä, tarvitset 3D-malleja tuotteistasi. 3D-mallit ovat virtuaalisia, kolmiulotteisia esityksiä esineistä tai pinnoista. Niiden avulla voit tarkastella esinettä mistä tahansa kulmasta.

Voit palkata Shopify Expertin auttamaan 3D-mallien luomisessa tuotteidesi esittelyä varten. Selaa Shopify Experts Marketplace ‑palvelussa asiantuntijoita, jotka tarjoavat 3D-mallinnuspalvelua, valitse asiantuntija ja ota häneen yhteyttä.

Kerro projektistasi asiantuntijoiden yhteydenottolomaketta käyttämällä. Jos haluat lisätä tuotekuvia ja tuotteen mitat nyt, seuraa linkkien takaa löytyviä ohjeita huolella.

Kun otat yhteyttä asiantuntijaan, et sitoudu palkkaamaan Shopify Expertiä. Tämä vaihe lähettää ainoastaan pyynnön asiantuntijalle, joka voi sen jälkeen tutustua pyyntöösi. Jos asiantuntija päättää tehdä yhteistyötä kanssasi, hän ottaa sinuun yhteyttä saadakseen lisätietoja palkkioista ja siitä, miten voitte aloittaa työskentelyn yhdessä.

Jos et ole toimittanut tuotekuvia ja tuotteen mittoja jo osana työpyyntöäsi, asiantuntija pyytää niitä sinulta. Noudata alla olevia ohjeita, kun otat kuvia ja ilmoitat mittoja.

Tuotteen valokuvat

3D-mallit luodaan valokuvia käyttämällä. Shopify Expert tarvitsee 3D-mallin luomista varten eri kuvakulmista otettuja valokuvia tuotteistasi:

Kun otat valokuvia tuotteestasi, noudata näitä ohjeita:

• Varmista, että tuotteesi on hyvin valaistu.
• Varmista, että tuote on kauttaaltaan tarkka.
• Jos mahdollista, älä käytä matkapuhelimen kameraa. Suurten tuotteiden, kuten huonekalujen kohdalla, käytä kameraa, jossa on 50-millinen objektiivi. Pienten ja keskikokoisten tuotteiden kohdalla käytä 70-millistä tai 100-millistä objektiivia.
• Ota ylimääräisiä valokuvia kaikista erityisistä yksityiskohdista tai tekstuureista.
• Anna valokuvatiedostoille selkeät nimet, kuten blue vase - top tai blue vase - left and tallenna ne selkeästi merkittyyn kansioon.

Tuotteen mitat

Shopify Expert tarvitsee yksityiskohtaiset mitat tuotteestasi, jotta hän voi luoda tarkkoja 3D-malleja. Kun ilmoitat tuotteesi mittoja, seuraa näitä ohjeita:

• Kuvaile tuotteen mitat selkeällä ja yksiselitteisellä tavalla.
• Ilmoita mittayksikkönä mm.
• Toimita mukana kaavio, josta ilmenee, mikä mitta vastaa mitäkin.
• Jos sinulla on tuotteeseesi liittyviä teknisiä piirustuksia tai CAD-tiedostoja, toimita myös ne.

Esimerkki 3D-mallien valmistuksesta

Naomi myy tätä sinistä maljakkoa:

Hän asentaa 3D Warehouse -sovelluksen, ja palkkaa seuraavaksi Shopify Expertin Experts Marketplace -palvelusta luomaan 3D-mallin maljakosta. Naomi toimittaa asiantuntijoille kuusi korkealaatuista kuvaa, jotka on otettu kameralla, jossa on 70-millinen objektiivi.

Naomi antaa asiantuntijalle mittauskaavion, jossa ilmoitetaan tuotteen mitat millimetreissä:

• Maljakon (1) korkeus on ____mm
• Maljakon yläosan pituus kaulan alaosaan (2) on ____ mm
• Maljakon kaulan alaosan pituus maljakon alaosaan (3) on ____ mm
• Maljakon (4) suun halkaisija on ____mm
• Suun huulen (5) leveys on ____mm
• Kaulan (6) alaosan halkaisija on ____mm
• Maljakossa on 8 kuusikulmaista pintaa
• Kuusikulmaisten pintojen (8) korkeus on ____ mm
• Kuusikulmaisten pintojen (9) leveys on ____ mm
• Maljakon (10) laajimman osan halkaisija on ____ mm
• Maljakon (11) pohjan halkaisija on ____ mm
• Vaahtotassujen halkaisija on ____mm

Shopify Expert käyttää valokuvia ja mittoja sinisen maljakon 3D-mallin luomiseen. Asiantuntija lähettää Naomille .glb- ja .usdz-tiedoston, jotka hän voi lisätä 3D Warehouse -sovellukseen.

Vaihe 3: Tarkista mallin laatu

Kun Shopify Expert toimittaa sinulle 3D-mallin, tarkista, että olet tyytyväinen sen laatuun. Asiantuntijan tulee antaa sinulle ohjeet mallin esikatselua varten.

Tarkista malli kaikista kuvakulmista. Voit käyttää glTF Viewer -ohjelmaa 3D-mallien esikatseluun. Kun tarkastelet mallia, pohdi seuraavia asioita:

• Vastaako mallin muoto asiantuntijalle toimittamiasi tuotteen referenssikuvia?
• Ovatko mallin kaikki osat samassa mittasuhteessa?
• Jos pystyt esikatselemaan mallia lisätyn todellisuuden avulla, näyttääkö mallin mittakaava oikealta verrattuna muuhun ympäristöön?
• Näyttääkö malli siltä, että se on valmistettu samoista materiaaleista kuin itse tuote?
• Näyttävätkö mallin materiaalit venyneiltä, epäselviltä tai vääristyneiltä?
• Onko mallissa yksityiskohtia, kuten naarmuja tai raapaisujälkiä, jotka tekevät materiaalista aidomman näköisen?
• Jos tuotteessa on läpinäkyviä, heijastavia tai valoa tuottavia osia, näyttävätkö ne aidoilta?
• Näyttävätkö kaikki reunat realistisilta? Onko jokin niistä liian terävä ja pitäisikö niitä pehmentää?
• Jos tuotteessa on koristeita, kuten logo tai tekstiä, onko ne helppo nähdä?
• Onko tuotteessa sellaisia aukkoja tai reikiä, joita siinä ei pitäisi olla?
• Täyttääkö 3D-malli Shopify-alustan tekniset vaatimukset?
  • 3D-mallin on oltava GLB-tiedosto.
  • GLB-tiedoston on koko oltava noin 4 Mt.
  • GLB-tiedoston koko ei saa olla yli 15 Mt.

Shopify -asiantuntijan tulee luoda 3D-malli tiettyjen vaatimusten mukaisesti. Jos haluat lisätietoja 3D-mallien laatuvaatimuksista, jotta voit tarkastella malleja paremmin, lue lisää aiheesta kohdasta 3D-mallien luominen kauppiaille.

Jos malli ei mielestäsi ole tarpeeksi laadukas, ota yhteyttä Shopify Expertiän ja kerro, mikä siinä on vialla.

Vaihe 4: 3D-mallin lisääminen 3D Warehouse -sovellukseen

Kun olet asentanut 3D Warehouse -sovelluksen ja olet hankkinut 3D-mallin, sinun täytyy lisätä malli 3D Warehouse -sovellukseen.

Huomaa

Jos et näet AR-kuvaa sen jälkeen, kun olet lisännyt sen 3D Warehouse -sovellukseen, ota yhteyttä Applen tukeen.

Tee näin:

1. Valitse Shopify Adminissa Asetukset > Sovellukset ja myyntikanavat.

2. Klikkaa Sovellukset ja myyntikanavat -sivulla 3D Warehouse.

3. Klikkaa Avaa sovellus.

4. Klikkaa Lisää 3D-malli.

5. Kirjoita Otsikko-kenttään 3D-mallin otsikko.

6. Valitse Linkitetty tuote -kentästä tuote ja versio, joihin tämä 3D-malli liittyy, ja klikkaa sen jälkeen Valitse tuote.

7. Klikkaa lataa tiedosto ja valitse Shopify Expertin toimittama .usdz-tiedosto.

8. Klikkaa Tallenna.

Toista siirto Shopify Expertin toimittaman .gltf- tai .glb-tiedoston kanssa. Varmista, että lisäät linkin samaan tuotteeseen niin, että molemmat 3D-mallitiedostotyypit on liitetty samaan tuotteeseen.

Huomaa

Jos lataat .gltf -tiedoston, sinua kehotetaan lisäämään muita tiedostoja Linkitetyt tiedostot -osassa. Lataa asiantuntijan toimittamat linkitetyt tekstuuriresurssit klikkaamalla Lataa tiedosto.

Hyväksytyt tiedostotyypit

Shopify Expertit toimittavat kaksi erilaista tiedostotyyppiä jokaisesta 3D-mallista, .usdz-tiedoston sekä .gltf- tai .glb-tiedoston. Erilaisia tiedostotyyppejä käytetään eri alustoissa ja eri toiminnallisuuksia varten. Jos esimerkiksi haluat, että asiakkaat voivat katsella 3D-tuotteita Safari-selaimella iOS 12 -laitteella, sinun täytyy ladata .usdz-tiedosto. Paras tapa varmistaa, että verkkokauppasi on tulevaisuudessa yhteensopiva lisätyn todellisuuden ja 3D-ominaisuuksien kanssa, on ladata molemmat tiedostotyypit.

Vaihe 5: Ota AR Quick Look käyttöön muokkaamalla teemaasi

Sinun täytyy muokata teemakoodia, jotta AR Quick Look voidaan ottaa käyttöön. Se on ominaisuus, jonka avulla asiakkaat voivat katsella 3D-tuotteistasi Safarissa iOS 12 -laitteilla.

Tee näin:

1. Valitse Shopify Adminissa Asetukset > Sovellukset ja myyntikanavat.

2. Klikkaa Sovellukset ja myyntikanavat -sivulla Online store.

3. Klikkaa Avaa myyntikanava.

4. klikkaa nykyisen teemasi vieressä Toiminnot > Muokkaa koodia.

5. Valitse Asettelu-kansiosta {/} theme.liquid.

6. Etsi <head>-tunniste. Sen pitäisi olla lähellä tiedoston yläreunaa.

7. Liitä seuraavalle riville koodi:

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

1. Klikkaa Tallenna.
2. klikkaa Osiot-kansiossa {/} product-template.liquid.
3. Liitä tiedoston yläosaan seuraava koodi:

<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. Klikkaa Tallenna.

Jos käytät useampaa kuin yhtä tuotemallia, lisää koodi myös näihin mallitiedostoihin.

Vaihe 6: Lisää AR-merkki 3D-tuotteisiin

Asiakkaat, jotka käyttävät iOS 12 -laitteita tietävät, että he voivat katsella tuotteesi 3D:nä, kun he näkevät kuvan päällä AR-merkin:

Sinun täytyy muokata teemakoodiasi niin, että se näyttää AR-merkin tuotekuviesi päällä.

Tee näin:

1. Valitse Shopify Adminissa Asetukset > Sovellukset ja myyntikanavat.

2. Klikkaa Sovellukset ja myyntikanavat -sivulla Online store.

3. Klikkaa Avaa myyntikanava.

4. klikkaa nykyisen teemasi vieressä Toiminnot > Muokkaa koodia.

5. klikkaa Osiot-kansiossa {/} product-template.liquid.

6. Etsi tuotevalokuvaasi liittyvän mallin osa. Käytä avainsanoja, kuten ProductPhoto tai featured_image:

   

7. Etsi tuotevalokuvista ensimmäinen <img... >-tunniste.

8. Liitä kyseisen tunnisteen yläpuolella olevalle riville seuraava koodi:

<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. Klikkaa Tallenna.
2. Avaa tiedosto, joka sisältää teemasi CSS:n. Tämä tiedosto on yleensä Sisällöt-kansiossa ja sillä on useimmiten otsikko, kuten {/}theme.scss.liquid.
3. Liitä tiedoston loppuun seuraava koodi:

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

1. Klikkaa Tallenna.

Voit kokeilla 3D-mallia avaamalla verkkokauppasi Safarissa laitteella, jossa on iOS 12, ja siirtymällä sitten tuotesivulle. Katsele tuotetta 3D:nä napauttamalla tuotekuvassa olevaa AR-merkkiä.