3D Warehouse tarafından desteklenen Shopify AR

Shopify AR, iOS 12 cihazlarındaki Safari tarayıcısını kullanan müşterilere, ürünlerinizin gerçekçi ve interaktif sürümlerini artırılmış gerçeklik (AR) olarak görüntülemeyi sağlar. AR ile müşterilerinize ürünlerinizin boyutunu, ölçeği ve ayrıntısına ilişkin daha iyi bir fikir sunabilir. 3D Warehouse uygulaması, 3B modelleri yükleyip mağazanızdaki ürünlere bağlayabilmenizi sağlayarak AR deneyimlerini etkinleştirir.

3B olarak bir vazo görüntüleme

Müşterilerin AR'da ürünlerinizi görüntülemesini sağlamak için 3D Warehouse uygulamasını yükleyin, ürünlerinizin 3B modellerini edinin, 3B modelleri uygulamaya ekleyin, ar Quick Look'u etkinleştirmek için temanızı düzenleyin ve ardından 3B ürünlerinize AR rozeti ekleyin.

1. Adım: 3D Warehouse uygulamasını yükleme

3D Warehouse uygulamasını kaydolma sayfasını kullanarak yükleyebilirsiniz.

Adımlar:

  1. Kaydolma sayfasını açın.
  2. myshopify.com mağaza alan adınızı girin.
  3. Yükle'ye tıklayın.
  4. Ayrıntıları inceleyin ve ardından Uygulamayı yükle'ye tıklayın.

3D Warehouse uygulamasına, Shopify yöneticinizin Uygulamalar sayfasından erişim sağlayabilirsiniz.

2. Adım: Ürünlerinizin 3B modellerini alma

Müşteriler AR'da ürünlerinizi görüntülemeden önce ürünlerinizin 3B modellerine ihtiyaç duyabilirsiniz. 3B modeller, bir nesnenin veya yüzeyin üç boyutta sanal temsilleridir. Nesneyi herhangi bir açıdan görüntülemenize izin verir.

Shopify Partner Program üzerinden ürünlerinizin 3B modellerini elde edebilirsiniz.

Adımlar:

  1. Shopify yöneticinizden hesap menünüze tıklayın ve ardından Bir Shopify Expert ile çalış'a tıklayın:

    Bir Shopify uzmanıyla çalışın

  2. Yeni işlevsellik bölümünü genişletmek için tıklayın.

  3. Zenginleştirilen gerçeklik (100 USD'den başlayarak) için ürünlerinizin 3B modellerini oluştur'a tıklayın.

  4. Gerekli sorulara yanıt verin. Artık ürün fotoğrafları ve ürün boyutları sağlamak istiyorsanız bağlantılı yönergeleri izlediğinizden emin olun.

  5. Send job (İşi gönder) seçeneğine tıklayın.

Bir iş talebi gönderdiğinizde Shopify Expert'i işe almayı taahhüt etmezsiniz. Bu adım yalnızca projenizin açıklamasını mevcut uzmanlara gönderir ve ardından bu uzmanlar talebinizi inceler. Bir uzman sizinle çalışmaya karar verirse ücretleri ve süreci nasıl başlatacağı hakkında daha fazla bilgi vermek için sizinle iletişime geçer.

Ürün fotoğraflarını ve ürün boyutlarını halihazırdaki iş talebinizin bir parçası olarak sunmadıysanız uzman, sizden bunları talep eder. Fotoğraf çekerken ve ölçüm yaparken aşağıdaki yönergeleri izleyin.

Ürün fotoğrafları

3B modeller, fotoğraflar kullanılarak oluşturulur. 3B modeli oluşturmak için Shopify Expert, ürünlerinizin birden fazla açıdan çekilmiş fotoğraflarına ihtiyaç duyar:

Ürün fotoğrafının açıları

Ürününüzün fotoğraflarını çekerken şu yönergeleri izleyin:

  • Ürününüzün iyi aydınlatıldığından emin olun.
  • Ürününüzün tamamının odaklanmış olduğundan emin olun.
  • Mümkünse cep telefonu kamerası kullanmayın. Mobilya gibi büyük ürünler için 50 mm mercekli bir kamera kullanın. Küçük ve orta ölçekli ürünler için 70 mm veya 100 mm mercek kullanın.
  • Benzersiz ayrıntıların veya dokuların ek olarak fotoğraflarını çekin.
  • Fotoğraf dosyalarına blue vase - top veya blue vase - left gibi anlaşılır isimler verin ve bunları etiketi açıkça belirtilen bir klasörde saklayın.

Ürün boyutları

Doğru 3B modeller oluşturmak için Shopify Expert, ürününüzün ayrıntılı ölçümlerine ihtiyaç duyar. Ölçümleri sağlarken şu yönergeleri izleyin:

  • Ürününüzün her bir boyutunu açık ve basit terimlerle açıklayın.
  • Ölçümleri mm cinsinden sağlayın.
  • Ölçümlerin hangi boyutlara karşılık geldiğini göstermek için bir diyagram ekleyin.
  • Ürününüzle ilişkili teknik çizimleriniz veya CAD dosyalarınız varsa bunları da ekleyin.

3B model yaptırma örneği

Naomi bu mavi vazoyu satıyor:

Vazo

3D Warehouse uygulamasını yüklüyor. Ardından, vazonun 3B modeli oluşturmak için Shopify Expert bulmak üzere Experts Marketplace'i kullanıyor. Naomi, uzmana 70mm merceğe sahip bir kamera ile çekilmiş altı yüksek kaliteli fotoğraf gönderiyor:

Ürün fotoğrafının açıları

Naomi, uzmana milimetre cinsinden ürün boyutlarına karşılık gelen bir ölçüm diyagramı veriyor:

Vazo

  • Vazo yüksekliği (1) ____mm
  • Vazonun üstünden boynunun altına kadar olan mesafe (2) ____mm
  • Vazonun boynunun altından dibine kadar olan mesafe (3) ____mm
  • Vazonun ağzının çapı (4) ____mm
  • Ağız açıklığının genişliği (5) ____mm
  • Boyun altının çapı (6) ____mm
  • Vazonun altıgen şeklinde 8 yüzü var
  • Altıgen şeklindeki yüzlerin yüksekliği (8) ____mm
  • Altıgen şeklindeki yüzlerin genişliği (9) ____mm
  • Vazonun en geniş kısmının çapı (10) ____mm
  • Vazo altının çapı (11) ____mm
  • Köpük ayakların çapı ____mm

Shopify Expert, mavi vazonun 3B modelini oluşturmak için bu fotoğrafları ve boyutları kullanır. Uzman, Naomi'ye 3D Warehouse uygulamasına eklemesi için bir .glb ve .usdz dosyası gönderir.

3. Adım: Modelin kalitesini kontrol etme

Shopify Expert size 3B model sunduğunda kalitesinden memnun olup olmadığınızı kontrol etmeniz gerekir. Expert, modelin önizlemesini görüntülemek için size talimat sağlamalıdır.

Modeli tüm açılardan kontrol edin. 3B modellerinizi önizlemek için glTF Viewer'ı kullanabilirsiniz. Modelinizi incelerken aşağıdaki soruları göz önünde bulundurun:

  • Modelin şekli, uzmana verdiğiniz ürün referans fotoğraflarıyla eşleşiyor mu?
  • Modelin tüm parçaları geri kalan kısımları ile orantılı mı?
  • Modelin artırılmış gerçeklikte önizlemesini görüntüleyebiliyorsanız sahnenin geri kalanıyla karşılaştırıldığında modelin ölçeği doğru görünüyor mü?
  • Model, ürün ile aynı malzemelerden yapılmış gibi görünüyor mu?
  • Modelin malzemeleri gerilmiş, bulanık veya bozuk görünüyor mu?
  • Modelin malzemelerinin daha gerçekçi görünmesini sağlamak için çizikler veya kazınmalar gibi ayrıntılar var mı?
  • Ürünün parçaları saydam, yansıtıcı ise veya ışık yayıyorsa bu parçalar doğru görünüyor mü?
  • Kenarları gerçekçi görünüyor mü? Kenarlardan herhangi biri çok keskin ve yumuşatılması gerekiyor mu?
  • Logo veya metin gibi dekoratif detaylar varsa bunları görmek kolay mı?
  • Olmaması gereken bir boşluk ya da delik var mı?

Shopify Expert, 3B modelini belirli standartlara göre oluşturmalıdır. Modeli daha iyi incelemeniz adına bu standartlar hakkında daha fazla bilgi edinmek için Satıcılar için 3B modeller oluşturma sayfasına bakabilirsiniz.

Modelin kalitesinin yeterince iyi olmadığını düşünüyorsanız Shopify Expert ile iletişime geçerek sorunun ne olduğunu açıklayın.

4. Adım: 3D Warehouse uygulamasına 3B model ekleme

3B Ambar uygulamasını yüklediyseniz ve bir 3B modele sahip olduğunuzda modeli 3D Warehouse uygulamasına eklemeniz gerekir.

Not: 3D Warehouse uygulamasına ekledikten sonra AR görselini göremiyorsanız Apple Destek ekibi ile iletişime geçin.

Adımlar:

  1. Shopify yöneticinizden Uygulamalar'a tıklayın.
  2. 3D Warehouse'a tıklayın.
  3. Add 3D Model (3B Model Ekle) seçeneğine tıklayın.
  4. Başlık alanına 3B model için bir başlık girin.
  5. Bağlantılı Ürün alanında, bu 3B modelin ilişkilendirildiği ürünü ve varyasyonu seçin ve ardından Ürünü seç'e tıklayın.
  6. Dosya Yükle'ye tıklayın ve Shopify Expert tarafından sağlanan .usdz dosyasını seçin.
  7. Kaydet'e tıklayın.

Shopify uzmanınızın sağladığı .gltf veya .glb dosyası için yükleme sürecini tekrarlayın. Ürünle ilişkili 3D model dosya türlerine sahip olmanız için bu ürünü aynı ürüne bağladığınızdan emin olun.

Not: Bir .gltf dosyası yüklüyorsanız Bağlantılı Dosyalar bölümünde ek dosyalar eklemeniz istenir. Uzmanınız tarafından sağlanan bağlantılı doku kaynaklarını yüklemek için Dosya Yükle'ye tıklayın.

Kabul edilen dosya türleri

Shopify Experts, her bir 3D model, bir .usdz dosyası ve bir .gltf veya .glb dosyası için iki farklı dosya türü sağlar. Bu farklı dosya türleri farklı platformlar ve özellikler tarafından kullanılır. Örneğin, müşterilerin iOS 12 cihazlarda Safari tarayıcısında 3B ürünleri görüntülemesi için bir .usdz dosya yüklemeniz gerekir. Online mağazanızın gelecekteki artırılmış gerçeklik ve 3D özellikleri ile uyumlu olduğundan emin olmanın en iyi yolu her iki dosya türünü de yüklemidir.

5. Adım: AR Quick Look'u etkinleştirmek için temanızı düzenleme

iOS 12 cihazlarda Safari tarayıcısını kullanan müşterilerin 3B ürünlerinizi görüntülemesini sağlayan özellik olan AR Quick Look'u etkinleştirmek için tema kodunuzu düzenlemeniz gerekir.

Adımlar:

  1. Shopify yöneticinizden Online Mağaza'ya gidin.
  2. Geçerli temanızın yanında İşlemler > Kodu düzenle'ye tıklayın.
  3. Düzen klasöründe, {/} theme.liquid'e tıklayın.
  4. <head> etiketini bulun. Dosyanın üst tarafına yakın olmalıdır.
  5. Bir sonraki satırda aşağıdaki kodu yapıştırın:
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. Kaydet'e tıklayın.

  2. Bölümler klasöründe {/} product-template.liquid'e tıklayın.

  3. Aşağıdaki kodu dosyanın en üstüne yapıştırın:

<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 kitaplığı ürün şablonuna eklendi

  1. Kaydet'e tıklayın.

Birden fazla ürün şablonu kullanıyorsanız kodu bu şablon dosyalarına da ekleyin.

6. Adım: 3D ürünlerinize AR rozeti ekleme

iOS 12 cihazları kullanan müşteriler, AR rozeti yerleşimi görüntülendikleri sırada ürününüzü 3B olarak görüntüleyebileceğini biliyor:

AR rozeti yerleşimi

Ürün görsellerinde AR rozetini göstermeniz için tema kodunuzu düzenlemeniz gerekir.

Adımlar:

  1. Shopify yöneticinizden Online Mağaza'ya gidin.
  2. Geçerli temanızın yanında İşlemler > Kodu düzenle'ye tıklayın.
  3. Bölümler klasöründe {/} product-template.liquid'e tıklayın.
  4. Şablonun ürün fotoğrafıyla ilişkili bölümünü bulun. ProductPhoto veya featured_image gibi anahtar sözcükleri arayın:
    Ürün fotoğraf liquid
  5. Ürün fotoğrafı bölümünde ilk <img... > etiketini bulun.
  6. Bu etiketin üstündeki satıra şu kodu yapıştırın:
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

Ürün fotoğrafı kodu ile liquid

  1. Kaydet'e tıklayın.

  2. Temanızın CSS'sini içeren dosyayı açın. Bu dosya genellikle Öğeler klasöründe bulunur ve çoğu zaman {/}theme.scss.liquid gibi bir başlığı olur.

  3. Dosyanın en altına aşağıdaki kodu yapıştırın:

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
  1. Kaydet'e tıklayın.

3D modelinizi test etmek için iOS 12 çalıştıran bir cihazda Safari tarayıcısında online mağazanızı açın ve ardından ürün sayfasına gidin. 3B olarak görüntülemek için ürün görselindeki AR rozetine dokunun.

Shopify ile satış yapmaya hazır mısınız?

Ücretsiz olarak dene