How do I install the 3D configurator on PrestaShop?

Add the CDN script via a hook (displayHeader) in a custom module or directly in your Smarty template, then paste the tag in product.tpl. No module to install on the Addons Marketplace.

Is it compatible with PrestaShop 1.7 and 8.x?

Yes. The Web Component works in both environments : the classic product.tpl and new Hummingbird sections in PrestaShop 8.

Can I show the configurator only for certain products?

Yes. Use Smarty {if} conditions to display the component only for specific product IDs or categories.

Developer guide : PrestaShop

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.

No module to install

Compatible PS 1.7 / 8.x

Smarty .tpl templates

Native PrestaShop hooks

{* 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. *}

+94%

conversion lift on product pages with a 3D model

Source: Shopify

−40%

fewer returns after 3D product visualisation

Source: Shopify

66%

of buyers feel more confident with a 3D configurator

Source: 2023 Study

82%

of visitors activate the 3D view when available

Source: Cappasity

1

Load the script via a hook

The recommended approach is to use the displayHeader hook from a custom module or directly in your template. You can also include it via product.tpl if you are working at the theme level.

The CDN script above is public : no need to host it yourself. The src attribute on the component is the URL specific to your configurator, provided by 3DVue when your project is delivered.
MyModule.php : via hook
```
public 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> *}
```
2

Place 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 classic product.tpl and 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>
```

Connect PrestaShop combinations

PrestaShop generates combination selects dynamically. Add the viewer-3dvue attributes via Smarty on your combination selects, or use the JS API to listen to the native PrestaShop updateProduct event.

{* 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}

setMaterial on click : colour swatches

Connect any button or swatch generated by Smarty. Multiple materials can be changed in a single click.

{foreach $colours as $c}
<button
  viewer-3dvue="monViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{{"1":"{$c.id_mat}"}}'
>
  {$c.name}
</button>
{/foreach}

Listen via PS updateProduct event

When PrestaShop reloads combinations via AJAX, listen to the native 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});
  }
);

setMaterial() Apply materials : same API as for Shopify or WooCommerce

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);

captureToBase64() Capture the render to pass it with the PrestaShop order

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;
});

exportSVG() : production proof Generates the SVG file of the configured product, ready for production

viewer.exportSVG();
viewer.addEventListener("onSVGExportComplete", (e) => {
  const { path, error } = e.detail;
  if (!error) console.log("SVG proof:", path);
});

Ready to integrate?
We handle the 3D models.

You manage the code on the PrestaShop side, we handle everything else : modelling, materials, configuration. In 30 minutes, we'll show you what we can do.

Script delivered at handoff : ready to include

Model and material IDs documented per project

Direct support with the API developer

Compatible with PrestaShop 1.7 and 8.x

We use audience measurement cookies to understand how you use our site.

A 3D configurator
on PrestaShop.
2 lines of code.

Ready in 3 steps. No module to create.

Zero JavaScript.
All in HTML attributes.

For advanced use cases.

Ready to integrate?
We handle the 3D models.

A 3D configurator on PrestaShop. 2 lines of code.

Ready in 3 steps. No module to create.

Zero JavaScript.All in HTML attributes.

For advanced use cases.

Ready to integrate?We handle the 3D models.

A 3D configurator
on PrestaShop.
2 lines of code.

Zero JavaScript.
All in HTML attributes.

Ready to integrate?
We handle the 3D models.