Shopify AR toimii 3D Warehousen avulla

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.

Maljakon katseleminen 3D:nä

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

Voit asentaa 3D Warehouse -sovelluksen rekisteröitymissivulla.

Toimintovaiheet:

  1. Avaa rekisteröitymissivu.
  2. Syötä kauppasi myshopify.com-verkkotunnus.
  3. Klikkaa Asenna.
  4. Tarkista tiedot ja napauta sitten Asenna sovellus.

Pääset 3D Warehouse -sovellukseen Shopify adminin Sovellukset-sivulta.

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 hankkia 3D-malleja tuotteistasi Shopify-yhteistyökumppaniohjelman kautta.

Toimintovaiheet:

  1. Napauta Shopify adminissa tilivalikkoa ja napauta sitten Palkkaa Shopify Expert:

    Palkkaa Shopify Expert

  2. Laajenna Uusi toiminnallisuus -osio napauttamalla.

  3. Napauta Luo tuotteistasi 3D-malleja lisättyä todellisuutta varten (hinta alkaen 100 USD).

  4. Vastaa pakollisiin kysymyksiin. Jos haluat lisätä tuotevalokuvia ja tuotteiden mittoja heti, varmista, että noudatat linkitettyjä ohjeita.

  5. Napauta Lähetä tehtävä.

Kun lähetät työpyynnön, et vielä sitoudu palkkaamaan Shopify Expert -asiantuntijaa. Tämä vaihe lähettää ainoastaan kuvauksen projektistasi käytettävissä oleville asiantuntijoille, jotka voivat sen jälkeen tutustua pyyntöösi. Jos asiantuntija päättää tehdä yhteistyötä kanssasi, hän ottaa sinuun yhteyttä saadakseen lisätietoja palkkioista ja työn aloittamisesta.

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 -asiantuntija tarvitsee 3D-mallin luomista varten eri kuvakulmista otettuja valokuvia tuotteistasi:

Tuotteen valokuvan kuvakulmat

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 -asiantuntija 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:

Maljakko

Hän asentaa 3D Warehouse -sovelluksen ja etsii sen jälkeen Experts Marketplacen avulla Shopify Expert -asiantuntijan, joka voisi luoda maljakosta 3D-mallin. Naomi toimittaa asiantuntijalle kuusi korkealaatuista valokuvaa, jotka on otettu kameralla, jossa on 70-millinen objektiivi:

Tuotteen valokuvan kuvakulmat

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

Maljakko

  • 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 -asiantuntija käyttää näitä 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 -asiantuntija toimittaa sinulle 3D-mallin, tarkista, että olet tyytyväinen sen laatuun. Asiantuntijan on annettava 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?

Shopify Expert -asiantuntijan on tarkoitus luoda 3D-malli tiettyjen vaatimusten mukaisesti. Lue lisää näistä vaatimuksista kohdasta 3D-mallien luominen kauppiaille, jotta voit tarkastella mallia paremmin.

Jos malli ei mielestäsi ole tarpeeksi laadukas, ota yhteyttä Shopify Expert -asiantuntijaan 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.

Toimintovaiheet:

  1. Napauta Shopify adminissa Sovellukset.
  2. Napauta 3D Warehouse.
  3. Napauta Lisää 3D-malli.
  4. Kirjoita Otsikko-kenttään 3D-mallin otsikko.
  5. Valitse Linkitetty tuote -kentästä tuote ja versio, joihin tämä 3D-malli liittyy, ja napauta sen jälkeen Valitse tuote.
  6. Napauta Lähetä tiedosto ja valitse Shopify Expert -asiantuntijan toimittama .usdz-tiedosto.
  7. Napauta Tallenna.

Toista lähetysprosessi Shopify Expert -asiantuntijan toimittaman .gltf- tai .glb-tiedoston kanssa. Varmista, että lisäät linkin samaan tuotteeseen niin, että molemmat 3D-mallitiedostotyypit liittyvät samaan tuotteeseen.

Hyväksytyt tiedostotyypit

Shopify Experts -asiantuntijat tarjoavat kaksi erilaista tiedostotyyppiä jokaisesta 3D-mallista, .usdz-tiedoston ja .gltf- tai .glb-tiedoston. Erilaisia tiedostotyyppejä käytetään eri alustoissa ja eri ominaisuuksia varten. Jos esimerkiksi haluat, että asiakkaat voivat katsella 3D-tuotteita Safarissa iOS 12 -laitteilla, sinun täytyy ladata .usdz-tiedosto. Paras tapa varmistaa, että verkkokauppasi on yhteensopiva tulevan 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.

Toimintovaiheet:

  1. Napauta Shopify adminissa Verkkokauppa.
  2. Napauta nykyisen teemasi vieressä Toiminnot > Muokkaa koodia.
  3. Valitse Asettelu-kansiosta {/} theme.liquid.
  4. Etsi <head>-tunniste. Sen pitäisi olla lähellä tiedoston yläreunaa.
  5. Liitä seuraavalle riville koodi:
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. Napauta Tallenna.

  2. Napauta 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-kirjasto lisättiin tuotemalliin

  1. Napauta 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:

AR-merkin peittokuva

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

Toimintovaiheet:

  1. Napauta Shopify adminissa Verkkokauppa.
  2. Napauta nykyisen teemasi vieressä Toiminnot > Muokkaa koodia.
  3. Napauta Osiot-kansiossa {/} product-template.liquid.
  4. Etsi tuotevalokuvaan liittyvän mallin osa. Käytä avainsanoja, kuten ProductPhoto tai featured_image:
    Tuotekuva Liquid
  5. Etsi tuotevalokuvista ensimmäinen <img... >-tunniste.
  6. 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>

Tuotekuva Liquid koodilla

  1. Napauta 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. Napauta 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ä.

Oletko valmis aloittamaan myynnin Shopify-palvelussa?

Kokeile sitä ilmaiseksi