Shopify AR, com tecnologia 3D Warehouse

Aviso

Não será mais possível instalar o app 3D Warehouse, uma vez que ele será descontinuado. Carregue modelos 3D diretamente da página Produtos. Saiba mais sobre Mídia do produto.

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

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

Observação

Não será mais possível instalar o app 3D Warehouse, uma vez que ele será descontinuado. Carregue modelos 3D diretamente da página Produtos. Para saber mais sobre como adicionar mídia aos produtos, consulte Mídia do produto.

Etapa 2: obter modelos 3D de seus produtos

Para que os clientes possam ver 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.

Contrate um Especialista da Shopify para ajudá-lo a criar modelos 3D dos produtos. Consulte ofertas de criação de modelos 3D no Marketplace de Especialistas da Shopify, escolha um profissional e solicite um orçamento.

Use o formulário de contato para fornecer informações sobre o projeto. Agora, é possível enviar fotos e dimensões do produto, basta seguir as orientações anexadas.

Mesmo que você entre em contato com um Especialista, não será exigido que o contrate. A etapa apenas envia uma solicitação para que o Especialista avalie a proposta. Caso o profissional decida aceitar a solicitação, ele entrará em contato, fornecendo mais informações sobre valores e data de início do serviço.

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:

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:

Ela instala o app 3D Warehouse e usa o Marketplace de Especialistas para contratar 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:

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

• 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. Use 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 logo ou algum texto, então eles são fáceis de ver?
• Existem lacunas ou buracos onde não deveria haver nenhum?
• O modelo 3D atende aos requisitos técnicos da plataforma Shopify?
  • O modelo 3D precisa ser um arquivo GLB.
  • O arquivo GLB precisa ter aproximadamente 4 MB.
  • O arquivo GLB não pode ter mais que 15 MB.

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 há de 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.

Observação

Se você não conseguir visualizar a imagem em RA após adicioná-la ao app 3D Warehouse, entre em contato com o Suporte da Apple.

Etapas:

1. No admin da Shopify, clique em Configurações > Apps e canais de vendas.

2. Na página Apps e canais de vendas, clique em 3D Warehouse.

3. Clique em Abrir app.

4. Clique em Adicionar Modelo 3D.

5. No campo Título, insira um título para o modelo 3D.

6. No campo Produto Vinculado, selecione o produto e a variante com os quais esse modelo 3D está associado e, depois, clique em Selecionar produto.

7. Clique em Fazer upload de arquivo e selecione o arquivo .usdz fornecido pelo Especialista da Shopify.

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

Observação

Ao carregar um arquivo .gltf, você recebe uma solicitação para adicionar outros arquivos na seção Arquivos vinculados. Clique em Fazer upload de arquivo para carregar os recursos de textura vinculados disponibilizados por seu Especialista.

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

Etapas:

1. No admin da Shopify, clique em Configurações > Apps e canais de vendas.

2. Na página Apps e canais de vendas, clique em Online store.

3. Clique em Abrir canal de vendas.

4. Ao lado do tema atual, clique no botão … > Editar código.

5. Na pasta Layout, clique em {/} theme.liquid.

6. Encontre a tag <head>. Ela deve estar perto da parte superior do arquivo.

7. Na próxima linha, cole o seguinte código:

<script
  src="https://cdn.shopify.com/shopifycloud/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>

![Quicklook library added to product template](/manual/apps/3d-warehouse/quicklook-product-template.png)

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 ver seu produto em 3D quando eles virem o selo RA sobreposto:

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

Etapas:

1. No admin da Shopify, clique em Configurações > Apps e canais de vendas.

2. Na página Apps e canais de vendas, clique em Online store.

3. Clique em Abrir canal de vendas.

4. Ao lado do tema atual, clique no botão … > Editar código.

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

6. Encontre a seção do modelo associado à foto do seu produto. Procure por palavras-chave como ProductPhoto ou featured_image:

   

7. Na seção de fotos do produto, encontre a primeira tag <img... >.

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

![Product photo liquid with code](/manual/apps/3d-warehouse/product-image-liquid-with-code.png)

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.