How to install the Complete 3D viewer on Shopify

Before you start

In Complete Dashboard, open “My products”, choose the piece and copy the embed code. It looks like this:

<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. Keep it handy: in the second method, it is the only thing that goes into Shopify.

Method 1: in the product description

1. 01

   Open the product

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

2. 02

   Switch the editor to HTML

   In the description box, click the Show HTML button, marked with the <> symbol. The text is now shown as code.

3. 03

   Paste the code

   Paste the embed code where the viewer should appear, ideally at the start of the description.

4. 04

   Save and check

   Save the product and open its page in the store, on a computer and on a phone. On the phone, tap the augmented reality button to confirm that the camera opens.

This is the right method for testing on a few products. The drawback is that the viewer sits wherever the theme shows the description, which in many themes is below the price and the buy button.

Method 2: a theme block for every product

1. 01

   Create the product field

   Under Settings, Custom data, Products, add a metafield definition named “Complete 3D”, with the namespace and key custom.complete_3d and the type Single line text.

2. 02

   Fill it in on each product

   The new field appears at the bottom of each product page. Paste only the piece’s code there, the part that comes after /ar/.

3. 03

   Add the block to the theme

   Under Online Store, Themes, Customize, open the product page template and add a Custom Liquid block to the product information section, next to the gallery.

4. 04

   Paste the block code

   Paste the snippet below into the block and save. It only shows the viewer when the product has the field filled in.

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

From then on, putting a new product in 3D simply means generating the piece in the Dashboard and pasting its code into the product field, without going back to the theme.

If something does not appear

If the frame stays blank, check that the whole code was pasted, including the allow attribute, which is what enables the camera on a phone. If the augmented reality button does not appear, open the page on the phone itself rather than in the editor preview, which does not always pass those permissions through. If the block does not appear, check that the metafield identifier is exactly custom.complete_3d.