Como instalar o visualizador 3D da Complete na Shopify

Antes de começar

No Complete Dashboard, abra "Meus produtos", escolha a peça e copie o código de incorporação. Ele tem este formato:

<iframe src="https://www.completemagazine.com.br/ar/CODIGO-DO-PRODUTO" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>

O trecho depois de /ar/ é o código daquela peça. Guarde-o: no segundo caminho, é só ele que vai para a Shopify.

Caminho 1: na descrição do produto

1. 01

   Abra o produto

   No painel da Shopify, entre em Produtos e abra o produto que vai receber o 3D.

2. 02

   Mude o editor para HTML

   Na caixa de descrição, clique no botão de mostrar HTML, marcado com o símbolo <>. O texto passa a aparecer como código.

3. 03

   Cole o código

   Cole o código de incorporação no ponto em que o visualizador deve aparecer, de preferência no começo da descrição.

4. 04

   Salve e confira

   Salve o produto e abra a página na loja, no computador e no celular. No celular, toque no botão de realidade aumentada para confirmar que a câmera abre.

É o caminho certo para testar em poucos produtos. A desvantagem é que o visualizador fica onde o tema mostra a descrição, que em muitos temas é abaixo do preço e do botão de compra.

Caminho 2: um bloco no tema para todos os produtos

1. 01

   Crie o campo no produto

   Em Configurações, Dados personalizados, Produtos, adicione uma definição de metafield com o nome "Complete 3D", o identificador custom.complete_3d e o tipo texto de linha única.

2. 02

   Preencha em cada produto

   No fim da página de cada produto, o novo campo aparece. Cole ali apenas o código da peça, o trecho que vem depois de /ar/.

3. 03

   Adicione o bloco no tema

   Em Loja virtual, Temas, Personalizar, abra o modelo de página de produto e adicione um bloco "Liquid personalizado" na seção de informações do produto, perto da galeria.

4. 04

   Cole o código do bloco

   Cole o trecho abaixo no bloco e salve. Ele só mostra o visualizador quando o produto tem o campo preenchido.

{% if product.metafields.custom.complete_3d.value != blank %}
  <iframe src="https://www.completemagazine.com.br/ar/{{ product.metafields.custom.complete_3d.value }}" title="Produto em 3D" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>
{% endif %}

Com isso, colocar um produto novo em 3D passa a ser só gerar a peça no Dashboard e colar o código dela no campo do produto, sem voltar ao tema.

Se algo não aparecer

Se o quadro ficar em branco, confira se o código foi colado inteiro, com o atributo allow, que é o que libera a câmera no celular. Se o botão de realidade aumentada não aparecer, abra a página no próprio celular, e não numa pré-visualização do editor, que nem sempre repassa essas permissões. Se o bloco não aparecer, confira se o identificador do metafield é exatamente custom.complete_3d.