How to install the Complete 3D viewer on VTEX

Before you start

In Complete Dashboard, open “My products”, choose the piece and copy the embed code:

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

The part after /ar/ is that piece’s code. It is what identifies the product in the viewer.

Method 1: in the product description

1. 01

   Open the product in the catalog

   In the VTEX admin, go to the catalog and open the product that will get the 3D viewer.

2. 02

   Paste the code into the description

   The product description field accepts HTML. Paste the embed code where the viewer should appear.

3. 03

   Save and check in the store

   Save, wait for the catalog to update, and open the product page on a computer and on a phone.

Not every VTEX theme renders description HTML exactly as it was written. Some themes run the description through a filter that strips out iframes, and the viewer simply does not appear, with no error message. That is why checking the store after saving is not optional.

Method 2: a block in the theme

For the whole catalog, the sturdier approach is for the store theme to read the piece’s code from a product field and build the viewer next to the gallery. On VTEX, this is usually done as follows:

1. 01

   Create a product specification

   In the catalog, create a text specification field, for example “Complete 3D”, in the specification group of the category that will receive the pieces.

2. 02

   Fill it in on each product

   Paste only the piece’s code into the field, the part that comes after /ar/ in the embed code.

3. 03

   Ask whoever manages the theme for the block

   The store developer creates a block on the product page that reads this specification and builds the iframe with the same address, the same width and the same permissions as the Dashboard code. When the field is empty, the block does not appear.

4. 04

   Test before publishing

   Testing should happen in a development environment for the theme, on one product with the field filled in and another without it, before the change goes to the live store.

The detail that tends to be missed is the iframe’s allow attribute. Without “xr-spatial-tracking; fullscreen; camera”, the piece rotates on the page, but the phone does not open augmented reality. Send the full Dashboard code to whoever will develop the block, not just the address.

If something does not appear

If the viewer does not show up through the description, the likely cause is the theme’s HTML filter, and the block becomes the way forward. If it shows up blank, check that the piece’s code is complete. If the piece rotates but augmented reality does not open, check the iframe permissions and test on the phone itself, outside the editor.