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

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 Expert -asiantuntijan auttamaan 3D-mallien luomisessa tuotteidesi esittelyä varten. Selaa Shopify Experts Marketplace -palvelussa asiantuntijoita, jotka tarjoavat 3D-mallinnuspalvelua, valitse asiantuntija ja pyydä tarjous.

Lisää tietoja projektistasi tarjouspyyntölomakkeeseen. Jos haluat lisätä tuotekuvia ja tuotteen mitat nyt, seuraa linkkien takaa löytyviä ohjeita huolella.

Kun lähetät työpyynnön, et sitoudu palkkaamaan Shopify Expert -asiantuntijaa. 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ä saadaksesi 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 -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 palkkaa seuraavaksi Shopify Expert -asiantuntijan Experts Marketplace -palvelusta luomaan 3D-mallin maljakosta. Naomi toimittaa asiantuntijoille kuusi korkealaatuista kuvaa, 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ää 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 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?

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 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. klikkaa Shopify adminissa Sovellukset.
  2. Klikkaa 3D Warehouse.
  3. Klikkaa 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 klikkaa sen jälkeen Valitse tuote.
  6. Klikkaa Lähetä tiedosto ja valitse Shopify Expert -asiantuntijan toimittama .usdz-tiedosto.
  7. Klikkaa Tallenna.

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

Hyväksytyt tiedostotyypit

Shopify Experts -asiantuntijat 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.

Toimintovaiheet:

  1. klikkaa Shopify adminissa Verkkokauppa.
  2. klikkaa 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. 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-kirjasto lisättiin tuotemalliin

  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:

AR-merkin peittokuva

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

Toimintovaiheet:

  1. klikkaa Shopify adminissa Verkkokauppa.
  2. klikkaa nykyisen teemasi vieressä Toiminnot > Muokkaa koodia.
  3. klikkaa 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. 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ä.

Oletko valmis aloittamaan myynnin Shopify-palvelussa?

Kokeile sitä ilmaiseksi