All platforms / Guide
3D model and AR on Magento and Adobe Commerce
With Page Builder you add an “HTML Code” element to the product description. Without Page Builder, you paste the code into the description's HTML editor.
- Plugin / app
- Not needed
- Where to paste the code
- Content → Page Builder → “HTML Code”
- AR on phones
- Yes, Android and iPhone
Option 1: Page Builder (Magento 2.4)
The standard route in Magento 2.4.3+ and Adobe Commerce.
Step 1
Copy the code from 3DView
Sign in, go to “My models” and, on the model, click “Code for your site”: the code is copied right away. The Shopify, WooCommerce and “Any site” tabs only show where to paste it; the code is the same.
Copy the code from 3DView Step 2
Open the product
Catalog → Products → Edit on the product.
Open the product Step 3
Open Page Builder
Expand the Content section and click “Edit with Page Builder”.
Step 4
Drag in the HTML Code element
From the left panel, under Elements, drag “HTML Code” into the description. Click the element's gear icon, paste the code and click Save.
Drag in the HTML Code element Step 5
Save the product
Close Page Builder, click Save and check the product in your store.
Option 2: Without Page Builder (WYSIWYG editor)
If Page Builder is disabled or you have an older version.
Step 1
Copy the code from 3DView
Sign in, go to “My models” and, on the model, click “Code for your site”: the code is copied right away. The Shopify, WooCommerce and “Any site” tabs only show where to paste it; the code is the same.
Copy the code from 3DView Step 2
Switch to HTML
In the Content section, under Description, click “Show / Hide Editor” to see the HTML code.
Switch to HTML Step 3
Paste the code and save
Paste the code and click Save.
Paste the code and save
The code you paste
This is what the code copied from 3DView looks like (yours shows the model ID instead of MODEL_ID). You can change the height (height:480px); leave the rest as it is. Add ?controls=0 after the ID to hide the controls bar under the model.
<iframe src="https://www.3dview.ai/embed/MODEL_ID" title="Oslo sofa" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>
How to check it works
- On a computer: the model loads, rotates with the mouse, and the “View on phone” button shows a QR code for AR.
- On Android (Chrome): tap the AR button in the corner of the model. Google's AR viewer opens and you place the product in your room at real size. The phone must support ARCore.
- On iPhone/iPad (Safari): tap the AR button. AR Quick Look opens, no app needed.
- Test in Safari or Chrome, not in the Facebook/Instagram in-app browser: AR doesn't start there.
- After saving, flush the cache: System → Cache Management → Flush Magento Cache (if you don't see the change).
Common problems and fixes
The browser console shows a Content Security Policy error
Your store runs CSP in restrict mode. Your developer adds https://www.3dview.ai to frame-src (in the csp_whitelist.xml of the theme or a module).
The model appears on all products
You put it in the page template, not in the product description. Put the HTML Code element in Content on each product.
The code disappears or turns into text after saving
The editor stripped it: paste the code in HTML / source code mode, not in visual mode (the steps above show the exact button). If it still disappears, the platform doesn't allow iframes: use the link and QR code from “Share / QR”.
The model is too small or gets cut off
Increase the height in the code: change height:480px to, say, height:600px. The width (100%) adapts to the column on its own. On phones, 400–500px is usually enough.
The AR button doesn't appear or doesn't start on iPhone
AR on iPhone needs Safari (or Chrome on iOS) and an iPhone/iPad with iOS 12 or later. 3DView prepares the iPhone version (USDZ) automatically. Open the model's direct link (the “View in AR” button in your account): if it works there, your platform blocks AR inside embedded frames; add a “View in AR” link to that URL under the model.
The browser says “insecure content” or the model doesn't load
Don't change the address in the code to http://. On an https site, browsers block http frames (mixed content). Leave the address exactly as it is: https://www.3dview.ai/embed/…
The 3DView logo appears on the model
You remove it per model, from your account: “Remove logo”, a one-time payment in credits. The code stays the same.
Does it slow down the page?
No: the code has loading="lazy", so the model only loads when it scrolls into view. Hosting is included, no subscription.
Simplified illustrations, not screenshots; menus may look slightly different in your version.
Frequently asked questions
Do I need a Magento extension?
No. The Page Builder HTML Code element is built in.
Does it work on Magento Open Source?
Yes. Page Builder is included since 2.4.3; before that, use the WYSIWYG editor option.
Don't have a 3D model yet?
Scan the product with your phone or start from a photo. You get the code for your site, a link with QR code, and AR included.
Create your first model