A 3D configurator
on PrestaShop.
2 lines of code.
<viewer-3dvue> is a native Web Component. It integrates into any Smarty template : product.tpl, a module override, or a custom hook. No additional PrestaShop module required.
{* In <head> or your main layout *} <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> {* That's it. *}
Build your configurator yourself.
The guide above is for developers integrating a configurator custom-built by 3DVue. If you already have the 3D files for your products and want to create and publish your own configurator without writing code, use the 3DVue software. For each product, it generates:
- A direct link: the configurator's URL, to place on a product page, in an email or on social media.
- An iframe embed code: to paste into an HTML Block module, on the product description or a PrestaShop CMS page.
- A widget: a script to paste once into the theme header via the same HTML Block module, which adds a "View in 3D" button to your product pages.
Free for 14 days, then from €49 excl. VAT per month, with no commission on your sales.
Ready in 3 steps. No module to create.
A native Web Component compatible with PrestaShop 1.7 and 8.x Smarty templates. No PHP dependency, no module to submit on the Addons Marketplace.
-
1Load the script via a hook
The recommended approach is to use the
displayHeaderhook from a custom module or directly in your template. You can also include it viaproduct.tplif you are working at the theme level.The CDN script above is public : no need to host it yourself. Thesrcattribute on the component is the URL specific to your configurator, provided by 3DVue when your project is delivered.MyModule.php : via hookpublic function hookDisplayHeader() { return '<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>'; } // Or directly in your Smarty template: {* <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> *}
-
2Place the component in product.tpl
Paste the tag in your Smarty product template, in the left column or a dedicated area. You can conditionally display it with
{if}to show it only for specific categories or product references.PrestaShop 8 uses a new template system. The tag works in both contexts : the classicproduct.tpland new Hummingbird sections.product.tpl{* Condition by product ID if needed *} {if $product.id == 42} <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> {/if} {* Or with debug enabled *} <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
-
3Connect PrestaShop combinations
PrestaShop generates combination selects dynamically. Add the
viewer-3dvueattributes via Smarty on your combination selects, or use the JS API to listen to the native PrestaShopupdateProductevent.product.tpl + JS : combinations{* Via HTML attributes on the selects *} {foreach $product.groups as $group} <select viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1" > {foreach $group.attributes as $attr} <option value="{$attr.id_material}"> {$attr.name} </option> {/foreach} </select> {/foreach}
Zero JavaScript.
All in HTML attributes.
The component automatically listens to click and change events on any element carrying the right attributes. Compatible with native PrestaShop combination selects and swatch modules.
{foreach $colors as $c} <button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{{"1":"{$c.id_mat}"}}' > {$c.name} </button> {/foreach}
updateProduct event and sync the viewer.const viewer = document.querySelector( 'viewer-3dvue[name="monViewer"]' ); // Listen for PS combination changes document.addEventListener( 'updateProduct', (e) => { const idMat = e.detail.id_material; viewer.setMaterial({"1": idMat}); } );
For advanced use cases.
Full programmatic control : useful for syncing the viewer with PrestaShop's AJAX combination system, or for image capture and proof export.
const viewer = document.querySelector('viewer-3dvue[name="monViewer"]'); // Change multiple materials at once viewer.setMaterial({ "1": "0n", "3": "2b" }); // On a specific segment viewer.setMaterial({ "1": "1a" }, 1);
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64 } = e.detail; // Inject into a hidden field of the PS form document.querySelector('#add-to-cart-or-refresh input[name="config_img"]').value = base64; });
viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path, error } = e.detail; if (!error) console.log("SVG proof:", path); });
Frequently asked questions
How do I install the 3D configurator on PrestaShop?+
Is it compatible with PrestaShop 1.7 and 8.x?+
How do I connect combination selects?+
Can I show the configurator only for certain products?+
How much does a 3D configurator for PrestaShop cost?+
Further reading
This configurator in your sector
API reference, HTML attributes, events, Smarty PrestaShop examples. Everything is documented.
View documentationNo automated ticketing. You speak directly with Matthieu, the developer who designed the API. Response within 24 hours.
Book a callTest the configurator before integrating. See exactly what your customers will see on your PrestaShop store.
View demoReady to integrate?
We handle the 3D models.
You manage the code on the PrestaShop side, we handle everything else : modeling, materials, configuration. In 30 minutes, we'll show you what we can do.