Como adicionar AR às páginas de produto do Shopify e do WooCommerce
Resumo: Para adicionar AR a uma página de produto, você precisa de um modelo 3D do produto em GLB (Android e web) e em USDZ (iPhone), no tamanho real do produto. O Shopify aceita modelos 3D como mídia do produto; no WooCommerce ou em qualquer outro site, você incorpora o componente gratuito model-viewer com os dois arquivos.
Passo 1: crie os arquivos 3D
- Produtos planos (impressões de arte, pôsteres, telas, tapetes, amostras de papel de parede): envie a foto do produto ao jpgtousdz e informe a largura ou a altura real. Você recebe o GLB e o USDZ nesse tamanho.
- Objetos (vasos, cadeiras, sapatos): grave um vídeo lento ao redor do produto e use o vídeo para 3D, informando a altura real.
- Mantenha cada arquivo pequeno (texturas de 2048 px ou menos) para a página do produto continuar rápida.
Passo 2a: Shopify
- No painel do Shopify, abra o produto, vá em Mídia e envie o arquivo GLB como modelo 3D.
- O Shopify exibe o modelo no visualizador 3D dele, e os temas compatíveis adicionam um botão Ver no seu espaço nos celulares.
- Teste o produto em um iPhone e em um celular Android. A central de ajuda do Shopify lista os limites atuais de tamanho de arquivo e os temas compatíveis.
Passo 2b: WooCommerce, WordPress ou qualquer site
Envie o GLB e o USDZ para a biblioteca de mídia e adicione um bloco de HTML personalizado à descrição do produto com o model-viewer:
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/media/print-50x70.glb" ios-src="/media/print-50x70.usdz"
ar ar-modes="quick-look scene-viewer webxr" ar-placement="wall"
camera-controls alt="Impressão de 50 x 70 cm"></model-viewer>Passo 2c: a opção sem código
Se você não consegue editar a página, adicione um botão ou um QR code que leve ao link de visualização em AR do produto no jpgtousdz. Ele abre em AR no iPhone e no Android, sem app.
Checklist antes de publicar
| Verificação | Por quê |
|---|---|
| O tamanho real está correto | O cliente avalia o tamanho pelo AR; uma escala errada gera devoluções. |
| O posicionamento está certo (parede ou chão) | Arte vai na parede, móveis no chão. |
| Funciona no iPhone e no Android | Cada um usa um arquivo diferente. |
| Texto alternativo preenchido | Acessibilidade e busca. |
Experimente agora
Transforme uma foto em USDZ e GLB no tamanho real em poucos segundos, ou um vídeo em modelo 3D. Sua primeira conversão de foto é grátis.
AR para fotos de produtosPerguntas frequentes
O Shopify precisa de USDZ?
Envie o GLB ao Shopify; ele cuida da exibição. Guarde também um USDZ, caso o seu tema ou outro canal precise.
O WooCommerce tem AR nativo?
Não. Use um plugin ou incorpore o model-viewer com arquivos GLB e USDZ, como mostrado acima.
Quanto custa?
O model-viewer é gratuito. Uma conversão de foto para AR no jpgtousdz é grátis na primeira vez e depois faz parte de um plano. A API custa $0.15 por foto e $1.50 por modelo 3D de vídeo.