Tutorial: add a 3D viewer and augmented reality to PrestaShop with the free module

To add a 3D viewer and augmented reality to PrestaShop, install the free Visuality module (PrestaShop 1.7 to 8.x), paste your API key into its settings, then link a 3D object to each product and choose the display: 3D viewer, QR code or both. The viewer then appears directly on the product page.

By the Visuality team Published on Updated on 9 min read

Visuality PrestaShop module: 3D viewer and augmented reality on a product page

What does the Visuality PrestaShop module do?

The module connects your PrestaShop store to your Visuality 3D object library. Once installed, it:

  • adds a Visuality menu to the back office, with a dashboard, a Settings page and a Products page;
  • links a 3D object from your library to each product, with a preview before saving;
  • displays the 3D viewer, an augmented reality QR code, or both on the product page;
  • picks the viewer language based on the store language: French for French-speaking visitors, English for everyone else;
  • manages each store separately in multistore mode;
  • automatically removes the link when a product is deleted.

The viewer is inserted in the additional information area of the product page (the displayProductAdditionalInfo hook), located below the add-to-cart button in the Classic theme. Links are stored in the PrestaShop database: displaying a product page doesn't trigger any call to the Visuality API.

What do you need before you start?

  • A PrestaShop 1.7 or 8.x store and back-office access with permission to install modules.
  • A Visuality account with an active subscription or an ongoing free trial.
  • Your 3D models in GLB or USDZ format, uploaded to your 3D Object Library. No file? Generate a model from a photo with AI or order custom modeling on quote.
  • Your API key, shown on the Integration page of your Visuality account.

Step 1: download and install the module

  1. Download the visuality.zip file from the Visuality Integrations page; no account is needed to download it.
  2. In the PrestaShop back office, open Modules > Module Manager, then click “Upload a module”.
  3. Drop the ZIP file: PrestaShop installs the module and adds a Visuality menu in the Improve section.
Download the PrestaShop module Installation guide

Step 2: connect your account with the API key

  1. On visuality.fr, sign in, open the Integration page and copy your API key. Open the Integrations page
  2. In PrestaShop, open Visuality > Settings, paste the key into the API Key field, then click “Save and test”.
  3. The message “API key is valid. Connection established!” confirms the connection, and the status changes to Connected.

The key is saved for the current store: in multistore mode, repeat the process for each store concerned.

Step 3: link a 3D object to each product

  1. Open Visuality > Products: the list shows, for each product, whether it already has 3D.
  2. Click “Configure” next to the product (or “Edit” if it already has a 3D object), then select the object from your library.
  3. Choose the display mode: “3D Viewer only”, “QR Code only” or “Both”.
  4. Adjust the iframe dimensions if needed (width and height, 100% and 500 px by default), check the preview, then click “Save association”.

“Both” is a good default choice: the viewer serves mobile visitors, and the QR code lets desktop visitors switch to augmented reality on their phone.

Step 4: check the display on your store

  • On desktop: open the product page, rotate the model and test the zoom. If you enabled the QR code, scan it with your phone.
  • On iPhone or iPad: tap the augmented reality button; AR Quick Look opens with a USDZ file generated automatically by Visuality.
  • On Android: augmented reality opens in Google Scene Viewer or in WebXR, depending on the device.
  • Scale: check that the product appears at its real size; if not, correct the object's scale in Visuality.
  • In each language: display the store in French, then in another language, to check the viewer language.

Nothing showing? In Design > Positions, check that the module is hooked to displayProductAdditionalInfo, then clear the cache in Advanced Parameters > Performance.

What are the best practices for your product pages?

  • Start with the right products: your best sellers and the items whose size or look raises the most questions, such as furniture, lighting, home decor or bulky items.
  • Tell visitors about it: a short line next to the viewer, such as “See this product in your home in augmented reality”, encourages visitors to try it.
  • Get the thumbnail and scale right: a sharp thumbnail makes people want to open the 3D view, and an accurate scale avoids unpleasant surprises on delivery.
  • Show the variants: if a product comes in several colors or finishes, create one 3D object per variant or use customization to show each option.

Product customization in augmented reality

Module or iframe code: which should you choose?

The module is the recommended method: it automatically displays the right object on each product page, adapts the viewer language and centralizes all links on a single page.

The iframe code is still useful for a page that isn't a product page (CMS page, launch landing page) or if your theme doesn't call the displayProductAdditionalInfo hook. Copy it from “View / Share” and paste it into the page's HTML editor. PrestaShop blocks iframes by default: enable the “Allow iframes on HTML fields” option in Shop Parameters > General.

All the details: 3D viewer for websites: iframe, link and QR code.

How do you get 3D models for your products?

The module displays the objects in your Visuality library. To create them, you have three options:

  • Upload your files: GLB or USDZ, for example supplied by your manufacturer or your 3D artist. USD and USDZ files are automatically converted to GLB on upload.
  • Generate a model with AI: from a single photo of the product, using the monthly conversion quota included in your plan. From photo to 3D model with AI
  • Order custom modeling: our team creates custom 3D models, on quote. Request a quote

Also selling on Shopify? The same 3D objects can be displayed on your Shopify store with our app. Discover the Shopify app

Troubleshooting: frequently asked questions

Yes, the module is free. It requires a Visuality account with an active subscription or an ongoing trial, which hosts your 3D objects and provides the viewer. Views are unlimited, whichever plan you choose.

The module is compatible with PrestaShop 1.7 and 8.x. It relies on the standard displayProductAdditionalInfo hook, used on the product page by the Classic theme and by most themes derived from it.

Copy the key again from the Integration page of your Visuality account, with no space before or after it. If you regenerated the key recently, the old one no longer works: paste the new one in Visuality > Settings, then click “Save and test”.

Check that the product has a saved link in Visuality > Products, then that the module is hooked to displayProductAdditionalInfo in Design > Positions. Finally, clear the PrestaShop cache in Advanced Parameters > Performance.

Your Visuality library doesn't contain any objects yet, or the API key you entered belongs to another account. Upload a GLB or USDZ model on visuality.fr, or generate one from a photo, then reload the module's Products page.

Uninstalling deletes the module's tables, and therefore every link between products and 3D objects. Your objects remain intact in your Visuality account: simply reinstall the module, paste the API key again and recreate the links.

Sources

  1. Shop general settings (iframes on HTML fields option) — PrestaShop, Verified on October 15, 2026

Ready to get started with augmented reality?

Create your Visuality account and start viewing your products in 3D and augmented reality in minutes. Free 7-day trial, no commitment.

Further reading