3D configurator for WooCommerce, Shopify and PrestaShop: how it is embedded

How the configurator gets onto the product page

A configurator is a 3D model plus option logic that runs in the buyer's browser. It goes into a store in one of two ways:

• Embedded frame (iframe). The configurator runs at its own address and appears on the product page as a frame. The simplest to add, but linking it to the cart needs extra work.
• Built into the theme or a module. The configurator code is loaded into the store theme and talks to the cart directly. More work up front, but the buyer stays on one page.

Which one fits depends on whether buyers purchase straight away or send an inquiry. It is not one line of code you paste and forget: every store has its own theme, plugins and pricing.

Where the buyer's choice goes

• Into an inquiry. The buyer builds the product and sends an inquiry with the full specification. Suits made-to-order products. The cart is not touched, so this is the simplest route on all three platforms.
• Into the cart as a variant. Each combination maps to a variant in the store with its own price and SKU. Suits products with few combinations.
• Into the cart with a calculated price. The configurator calculates the price by your rules and passes it with the list of options. Suits products with very many combinations, but needs more integration work, and the store must check the price again.

Platform comparison

Sources: Shopify: 2,048 variant limit ↗, Shopify: 3D model formats ↗.

On another platform or your own system the principle is the same: the inquiry route almost always works, and a cart connection is assessed separately.

What the store owner does

1. 1

   Pick the product. The one with the most variants and questions is the best start.

2. 2

   Send the material. Drawings or CAD files, photos, the list of variants and the pricing rules.

3. 3

   Choose the route. Inquiry, cart with variants, or cart with a calculated price.

4. 4

   Grant access. To the theme or admin, or introduce us to your developer.

5. 5

   Test it. Before launch, go through the combinations, prices and checkout on phone and desktop in a staging copy.

Limits worth knowing up front

• Old or heavily customised themes may need extra work.
• If the price is calculated in the configurator, the store has to check it again so nobody can change it in the browser.
• Stock levels or lead times per combination need a link to your accounting or production system.
• A heavy 3D model slows the page, so the model loads only when the buyer opens it or scrolls to it.

How integration and the number of rules affect the scope is covered in What drives the cost of a 3D configurator?. The service itself: 3D configurator and 3D for e-commerce.