All platforms / Guide

3D model and AR on PrestaShop

By default, PrestaShop strips iframes from descriptions. One setting allows them; then you paste the code into the product description, in the editor's source code mode.

Plugin / app
Not needed
Where to paste the code
Description / Summary → “Source code”
AR on phones
Yes, Android and iPhone

The 3DView code in the product description

The Summary appears next to the price; the long description, further down the page.

  1. 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
  2. Step 2

    Allow iframes

    Shop Parameters → General → “Allow iframes on HTML fields” → Yes → Save. You only do this once.

    Allow iframes
  3. Step 3

    Open the product

    Catalog → Products → click the product.

    Open the product
  4. Step 4

    Open the description's source code

    In the Summary or Description editor, click the “Source code” button (<>). In some themes it's under the editor's “…” button.

    Open the description's source code
  5. Step 5

    Paste the code and save

    Paste the code, click OK in the code window, then save the product.

    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.
  • If your store has several languages, paste the code into the description for each language (the language tabs next to the field).

Common problems and fixes

The code disappears even after the setting

Check the “Use HTMLPurifier Library” option in the same place; with iframes allowed, the code should stay. Also clear the cache: Advanced Parameters → Performance → Clear cache.

I can't see the source code button

Some editor modules hide it. Look for the “<>” or “Source code” button under “…”, or ask your developer to enable it in TinyMCE.

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 PrestaShop module?

No. After the iframe setting, the code goes straight into the description.

Is it safe to allow iframes?

The setting only lets people who edit products in the admin add iframes. Only paste code from sources you trust.

Does it work on PrestaShop 1.6?

Yes, the same setting is in Preferences → General; the editor has an “HTML” button.

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