Shopify AR desenvolvido por 3D Warehouse

O Shopify AR permite que os clientes que utilizam o navegador Safari em dispositivos iOS 12 visualizem versões realistas e interativas de seus produtos em realidade aumentada (RA). Com a RA, você pode proporcionar aos seus clientes uma melhor noção do tamanho, da escala e detalhes dos seus produtos. O app 3D Warehouse disponibiliza experiências de RA, permitindo que você carregue modelos 3D e os vincule a produtos em sua loja.

Visualizar um vaso em 3D

Para permitir que os clientes visualizem seus produtos em RA, instale o app 3D Warehouse, obtenha modelos 3D dos seus produtos, adicione os modelos 3D ao app, edite seu tema para habilitar o AR Quick Look e, em seguida, adicione o selo de RA aos seus produtos 3D.

Etapa 1: instalar o app 3D Warehouse

Você pode instalar o app 3D Warehouse usando a página de inscrição.

Passos:

  1. Abra a página de inscrição.
  2. Insira o domínio da sua loja da myshopify.com.
  3. Clique em Instalar.
  4. Revise os detalhes e depois clique em Instalar app.

Você pode acessar o app 3D Warehouse na página Apps do seu admin da Shopify.

Etapa 2: obter modelos 3D de seus produtos

Para que os clientes possam visualizar seus produtos em RA, você precisa dos modelos 3D de seus produtos. Os modelos 3D são representações virtuais de um objeto ou superfície em três dimensões. Eles permitem que você visualize o objeto por qualquer ângulo.

Você pode obter modelos 3D de seus produtos através do Programa de Parcerias da Shopify.

Passos:

  1. No seu admin da Shopify, clique no menu da sua conta e, em seguida, clique em Contratar um Especialista da Shopify:

    Contrate um Especialista da Shopify

  2. Clique para expandir a seção Nova funcionalidade.

  3. Clique em Criar modelos 3D de seus produtos para realidade aumentada (a partir de US$100).

  4. Responda às perguntas obrigatórias. Se você quiser fornecer fotos e dimensões do produto agora, siga as diretrizes vinculadas.

  5. Clique em Enviar trabalho.

Ao enviar uma solicitação de trabalho, você não está se comprometendo a contratar um Especialista da Shopify. Nessa etapa, você apenas envia uma descrição de seu projeto aos Especialistas disponíveis para que eles possam analisar sua solicitação. Se um Especialista decidir trabalhar com você, ele entrará em contato informando as tarifas e como iniciar o processo.

Se você ainda não forneceu fotos e dimensões do produto junto com a solicitação de trabalho, o Especialista as solicitará. Siga as especificações abaixo ao tirar fotos e fazer medições.

Fotos do produto

Modelos 3D são criados usando fotos. Para criar o modelo 3D, o Especialista da Shopify precisa de fotos de vários ângulos dos seus produtos:

Ângulos de foto do produto

Ao tirar fotos do seu produto, siga estas diretrizes:

  • Certifique-se de que seu produto esteja bem iluminado.
  • Certifique-se de que todo o seu produto esteja em foco.
  • Se possível, não utilize uma câmera de celular. Para produtos grandes, como móveis, utilize uma câmera com lente de 50 mm. Para produtos de tamanho pequeno a médio, utilize uma lente de 70 mm ou 100 mm.
  • Tire fotos extras de texturas ou detalhes exclusivos.
  • Dê aos arquivos de foto títulos claros, como blue vase - top ou blue vase - left e armazene-os em uma pasta claramente identificada.

Dimensões do produto

Para criar modelos 3D precisos, o Especialista da Shopify precisa das medidas detalhadas do seu produto. Ao fornecer as medidas, siga estas diretrizes:

  • Descreva cada dimensão do seu produto em termos claros e simples.
  • Forneça as medidas em mm.
  • Inclua um diagrama para mostrar a quais dimensões correspondem às medidas.
  • Se você tiver desenhos técnicos ou arquivos CAD associados ao seu produto, inclua-os também.

Exemplo de obtenção de modelos 3D

Naomi está vendendo este vaso azul:

Vaso

Ela instala o app 3D Warehouse e usa o Marketplace de Especialistas para encontrar um Especialista da Shopify para criar um modelo 3D do vaso. Naomi disponibiliza ao Especialista seis fotos de alta qualidade tiradas com uma câmera com lente de 70 mm:

Ângulos de foto do produto

Naomi fornece ao Especialista um diagrama de medidas com dimensões correspondentes do produto em milímetros:

Vaso

  • A altura do vaso (1) é ____ mm
  • A parte superior do vaso até a parte inferior do pescoço (2) é ____ mm
  • A parte inferior do pescoço até o fundo do vaso (3) é ____ mm
  • O diâmetro da boca do vaso (4) é ____ mm
  • A largura da borda da boca (5) é ____ mm
  • O diâmetro da parte inferior do pescoço (6) é ____ mm
  • Há 8 faces hexagonais no vaso
  • A altura das faces hexagonais (8) é ____ mm
  • A largura das faces hexagonais (9) é ____ mm
  • O diâmetro da parte mais larga do vaso (10) é ____ mm
  • O diâmetro do fundo do vaso (11) é ____ mm
  • O diâmetro dos pés de espuma é ____ mm

O Especialista da Shopify utiliza essas fotos e dimensões para criar um modelo 3D do vaso azul. O Especialista envia a Naomi um arquivo .glb e um arquivo .usdz para ela adicionar ao app 3D Warehouse.

Etapa 3: verificar a qualidade do modelo

Quando um Especialista da Shopify fornece um modelo 3D, você deve verificar se está satisfeito com sua qualidade. O Especialista deve fornecer instruções para visualizar o modelo.

Verifique o modelo de todos os ângulos. Utilize o Visualizador de glTF para ver seus modelos 3D. Ao revisar seu modelo, considere as seguintes perguntas:

  • A forma do modelo corresponde às fotos de referência do produto que você forneceu ao Especialista?
  • Todas as partes do modelo são proporcionais ao resto?
  • Se você conseguir visualizar o modelo em realidade aumentada, a escala do modelo parece correta em comparação com o restante da cena?
  • O modelo parece que é feito dos mesmos materiais que o produto?
  • Os materiais do modelo parecem esticados, borrados ou distorcidos?
  • Há detalhes como marcas ou arranhões para tornar os materiais do modelo mais realistas?
  • Se partes do produto são transparentes, refletivas ou emitem luz, elas parecem corretas?
  • As bordas parecem realistas? Alguma delas é muito pronunciada e precisa ser suavizada?
  • Se houver algum detalhe decorativo, como um logotipo ou algum texto, então eles são fáceis de ver?
  • Existem lacunas ou buracos onde não deveria haver nenhum?

O Especialista da Shopify deve construir o modelo 3D de acordo com certos padrões. Para saber mais sobre esses padrões para revisar melhor um modelo, consulte Criando modelos 3D para lojistas.

Se você acha que a qualidade do modelo não é boa o suficiente, entre em contato com o Especialista da Shopify e explique o que está errado com ele.

Etapa 4: adicione um modelo 3D ao app 3D Warehouse

Quando você tiver o app 3D Warehouse instalado e tiver originado um modelo 3D, será necessário adicionar o modelo ao app 3D Warehouse.

Passos:

  1. No seu admin da Shopify, clique em Apps.
  2. Clique em 3D Warehouse.
  3. Clique em Adicionar Modelo 3D.
  4. No campo Título, insira um título para o modelo 3D.
  5. No campo Produto Vinculado, selecione o produto e a variante com os quais esse modelo 3D está associado e, em seguida, clique em Selecionar produto.
  6. Cliquem em Carregar Arquivo e selecione o arquivo .usdz fornecido pelo Especialista da Shopify.
  7. Clique em Salvar.

Repita o processo de carregamento para o arquivo .gltf ou .glb recebido do Especialista da Shopify. Certifique-se de vinculá-los ao mesmo produto para que você tenha os dois tipos de arquivo de modelo 3D associados ao produto.

Tipos de arquivo aceitos

Os Especialistas da Shopify fornecem dois tipos de arquivos diferentes para cada modelo 3D: um arquivo .usdz e um arquivo .gltf ou .glb. Esses diferentes tipos de arquivo são utilizados por diferentes plataformas e recursos. Por exemplo, para os clientes verem produtos 3D no navegador Safari em dispositivos iOS 12, você precisa enviar de um arquivo .usdz. A melhor maneira de garantir que sua loja virtual seja compatível com os futuros recursos de realidade aumentada e de 3D é carregar ambos os tipos de arquivo.

Etapa 5: aredite seu tema para habilitar o AR Quick Look

Você precisa editar seu código do tema para habilitar o AR Quick Look, que é o recurso que permite que clientes que usam o navegador Safari em dispositivos iOS 12 visualizem seus produtos 3D.

Passos:

  1. No seu admin da Shopify, clique em Loja Virtual.
  2. Ao lado do seu tema atual, clique em Ações > Editar código.
  3. Na pasta Layout, clique em {/} theme.liquid.
  4. Encontre a tag <head>. Ela deve estar perto da parte superior do arquivo.
  5. Na próxima linha, cole o seguinte código:
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. Clique em Salvar.

  2. Na pasta Seções, clique em {/} product-template.liquid.

  3. Cole o seguinte código na parte superior do arquivo:

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

Biblioteca do Quicklook adicionada ao modelo do produto

  1. Clique em Salvar.

Se você utilizar mais de um modelo de produto, adicione também o código para esses arquivos de modelo.

Etapa 6: adicionar o selo AR aos seus produtos 3D

Os clientes que usam dispositivos iOS 12 saberão que podem visualizar seu produto em 3D quando eles virem o selo RA sobreposto:

Sobreposição do selo RA

Você precisa editar seu código do tema para exibir o selo RA nas imagens do produto.

Passos:

  1. No seu admin da Shopify, clique em Loja Virtual.
  2. Ao lado do seu tema atual, clique em Ações > Editar código.
  3. Na pasta Seções, clique em {/} product-template.liquid.
  4. Encontre a seção do modelo associado à foto do seu produto. Procure por palavras-chave como ProductPhoto ou featured_image:
    Líquido fotográfico do produto
  5. Na seção de fotos do produto, encontre a primeira tag <img... >.
  6. Na linha acima dessa tag, cole o seguinte código:
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

Líquido fotográfico do produto com código

  1. Clique em Salvar.

  2. Abra o arquivo que contém o CSS do seu tema. Esse arquivo geralmente está na pasta Ativos e na maioria das vezes tem um título como {/}theme.scss.liquid.

  3. Na parte inferior extrema do arquivo, cole o seguinte código:

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

Para testar seu modelo 3D, abra sua loja virtual no navegador Safari em um dispositivo com o iOS 12 e navegue até a página do produto. Toque no selo RA na imagem do produto para visualizá-lo em 3D.

Pronto para começar a vender com a Shopify?

Experimente de graça