A custom-built 3D configurator or CPQ integrates with any Shopify store, regardless of its plan.
On this page, we look at where to host the configurator, how to add a configuration to the cart, how to handle custom pricing, what can be sent to production and when it makes sense to skip integration altogether.
Where the configurator lives
There are three options, and the choice depends more on the desired user experience, coordination between development teams and how resource-intensive the configurator is than on Shopify itself.
- Inside the theme, as an app block or a section of the product page. The customer never leaves the page, and the cart belongs to the theme. This works well for lightweight configurators; a 3D configurator with many models could slow down the product page and clash with theme updates.
- In an iframe on the product page. The configurator is a separate application, but the customer uses it without leaving the store. The theme loads the configurator only when needed and does not bear its resource load. This requires a small script in the theme to bridge the configurator and the cart, some work on height and full-screen behavior on mobile, and above all closer coordination between the team maintaining the store and the team developing the configurator.
- On a subdomain (e.g.
configure.yourstore.com), as a separate application. The configurator has its own performance, URL and search indexing, and communicates with Shopify through APIs. When purchasing, the customer is taken to Shopify checkout.
For custom 3D or CPQ configurators, we almost always recommend a subdomain: the theme stays a theme, the configurator stays an application, and neither breaks the other. This also provides a clearer separation of responsibilities between those managing Shopify and those managing the configurator. An iframe is the choice when the customer needs to stay on the product page or when advanced integrations are needed, such as with recommended products.
How the configuration reaches the cart
Our preferred approach is also the simplest: the configurator adds products from the Shopify catalog to the cart (through the Storefront API), automating what the customer could potentially do manually. Prices, stock levels and product codes remain managed in Shopify, just as with any other purchase.
The same approach can easily be used to add surcharges for customizations that the catalog does not describe (e.g. engraving costs or a surcharge for a non-standard size). These can be represented as separate catalog products that are hidden elsewhere. Information about the customizations should be attached to each of these products. The customer can then review it in the cart and at checkout; whoever manages the order can find it in the admin. This is the least invasive, least expensive approach and is almost always more than sufficient.
If, however, the price needs to be calculated precisely based on product dimensions and material quantities, or the existing catalog products cannot be used, as with a table made to exact centimeter measurements, the store's plan and sales model come into play. This is where we most need to work within Shopify's constraints: we cover it in the next section.
How to handle custom pricing
If the store is on Shopify Plus, the price of each individual product in the cart can be changed through the Cart Transform API; otherwise, we need to use alternative approaches. There are two main options, depending on whether the configured product needs to be added to the cart alongside other products or can be purchased separately.
| How the store sells | Recommended approach | Why | What it involves |
|---|---|---|---|
| By quotation | Draft Order | A quote is inherently a separate purchase: nobody expects to add a storage accessory from the cart to it | The customer receives a payment link or an order confirmation after review |
| Direct sales with mixed carts (e.g. a custom sofa plus standard cushions) | A variant created for each configuration | Everything stays in the same cart and is paid for together | A more complex integration, with cleanup logic for generated variants |
A Draft Order is an order created by the store rather than by the customer, with custom line items and prices. The customer receives a unique link containing only that order and can proceed to payment. It becomes an actual order when the customer pays through the link or when the store confirms it (for example, with a bank transfer or payment terms). Its limitation is that it bypasses the cart: any other items the customer has in the cart stay there, still waiting to be purchased.
For many custom products, a quote (Draft Order) is not a fallback but the right choice, especially when feasibility needs to be checked or the order is substantial.
Generating product variants solves this very limitation: without Plus, it is the only approach that brings a calculated price into the same cart as the other items. When the customer confirms the configuration, our system calculates the price and creates a dedicated variant through Shopify's Admin API (productVariantsBulkCreate), with the calculated price and the render as its image. The new product variant then enters the cart like any other product.
Each variant requires a different combination of options (usually a “Configuration” option with a unique code), a product supports around 2,000 variants, and variants from abandoned carts need to be deleted periodically by an automated process. Deletion is the part that requires the most careful handling.
What reaches the production department
Many plugins stop at “add to cart.” For manufacturers of custom products, however, the Shopify order is often just the beginning, and they need to know what to build.
When an order is confirmed, a 3D configurator or CPQ integrated with Shopify can generate what the production department needs, such as:
- a bill of materials with item codes and quantities;
- a PDF technical sheet with dimensions, finishes and renders;
- files for machines or the engineering department (e.g. DXF), where the product requires them.
When it makes sense to skip integration
Not every configurator needs to integrate with the Shopify cart. Sometimes a standalone configurator that generates a quote and sends it to the company and the customer is the simplest and most effective solution.
This happens when:
- almost all custom sales go through a salesperson, and the store only sells accessories and standard products;
- the final price depends on transport, installation or a site visit, which no cart can calculate.
In these cases, a configurator connected to the website can still be built, but the order starts from the quote, not checkout. Shopify integration can also be added later, if and when sales volume justifies it.
Frequently asked questions
Do I need Shopify Plus to have a 3D configurator? No. Even with dynamic pricing, there are ways to handle it on every plan (Draft Orders, dedicated variants or component-based products).
Can I use an App Store plugin instead of a custom configurator? Yes, if your product fits the options supported by the plugin. However, a plugin does not handle production rules, bills of materials and technical files specific to your company.
Will the configurator slow down my store? No. There are several proven techniques to separate 3D loading from the rest of the store and provide a smooth user experience across different devices.
Does the configuration data stay in the order? Yes. Each order line retains the selected product and any customizations, which can be read by whoever manages the order, and custom production files can be generated.
Sources
- Cart Transform Function API, Shopify
- About Shopify Functions, Shopify
- New and updated operations for the Cart Transform API, Shopify developer changelog