Adobe Commerce development
Storefront design
Performance & SEO
AI & agentic commerce
Release tracker
Adobe Commerce gives you four ways to build an ecommerce product configurator, and the right one depends on what each choice means for stock, pricing and fulfillment. Configurable products suit variants that are real SKUs (size, color). Bundle products suit "build your own" kits made of stocked components. Custom options suit personalization that does not change stock (engraving, a monogram, an uploaded file). Anything with compatibility rules, live pricing formulas or a 3D preview needs a custom configurator, built as a module or as a separate front-end application talking to Commerce.
What counts as a product configurator
A configurator is any interface where the shopper makes choices that change what is made, picked or priced. That covers a T-shirt with sizes, a desk with a choice of top, frame and cable tray, a custom-cut window blind priced by width and drop, and a 3D sofa with fabric swatches. These look similar on the storefront but are very different underneath. The question to ask for each choice is: does it point to a stocked item, does it change price by a fixed amount or a formula, and does it need to reach a factory or warehouse as instructions?
The four options compared
| Option | Best for | Stock and SKUs | Pricing | Trade-offs |
|---|---|---|---|---|
| Configurable product | Variants like size, color, material where each combination is a real item | Every combination is a simple child product with its own SKU and stock | Each child has its own price | Child count multiplies with each attribute; large matrices bloat the catalog and index |
| Bundle product | Kits and "build your own" from stocked parts (PC builds, gift boxes, brake kits) | Each option is a separate product with its own stock | Dynamic (sum of parts) or fixed price | No rules between options ("part A needs part B") without custom code |
| Custom options | Personalization that does not affect stock: engraving text, file upload, add-on services | No separate stock; one product SKU, optional SKU suffix per option | Fixed or percentage add-on per option value | No conditional logic between options; no formula pricing |
| Custom configurator (rules-based) | Made-to-order goods with compatibility rules or formula pricing (blinds, signage, furniture) | Usually one parent SKU plus a structured configuration passed to ERP or production | Formula or rules engine, often server-side | Build and maintenance effort; must be kept in sync with upgrades |
| 3D or AR configurator | High-consideration visual products (furniture, cars, eyewear, footwear) | Sits on top of one of the options above | Uses the underlying option's pricing | Heavy assets; must be loaded so they do not hurt Core Web Vitals |
Configurable products: real variants, real SKUs
A configurable product is a parent with child simple products, one per combination of configurable attributes. It is the right tool when every combination is something you stock and ship, because inventory, price and images can differ per child.
The trap is combinatorial growth. Three attributes with 10, 8 and 5 values produce 400 children. Add a fourth attribute with 10 values and you have 4,000 children for one product. Each child is a full catalog entity that is indexed, priced and cached. If most combinations are never stocked, or the options do not change inventory at all, you are using the wrong tool.
Bundle products: kits from stocked components
A bundle product lets the shopper choose components from option groups, each displayed as a dropdown, radio buttons, checkboxes or multi-select. Each component is its own product, so stock is tracked at component level and the order shows exactly what to pick. Price can be dynamic (the sum of selected components) or fixed.
Bundles have no notion of compatibility. If the 750W power supply is required for a particular graphics card, core cannot enforce it. That rule logic is the most common reason merchants outgrow bundles.
Custom options: personalization without stock
Custom options attach input fields to a product: text field, text area, file upload, dropdown, radio buttons, checkboxes, multi-select, date, date and time, and time. Each value can add a fixed or percentage price and an SKU suffix. This is the fastest way to sell engraving, gift messages, a logo upload or an installation add-on.
Custom options do not carry their own stock, and they cannot show or hide each other based on earlier answers. When the form needs "if width is over 2 meters, only show these fabrics," you have reached the edge of core.
Custom configurators: rules, formulas and production data
A rules-based configurator handles what the native types cannot: dependencies between choices, prices calculated from dimensions, quantity breaks on custom work, and a structured output that production can use. There are two common ways to build one on Adobe Commerce.
As a Magento module
The configurator renders on the product page and stores the shopper's selections with the cart item, and a server-side price calculation runs when the item is added. The order then carries the configuration through to the admin, emails and your ERP. This keeps everything inside one platform and suits stores with a handful of configurable product families. Weigh it against Marketplace options with our build vs buy Magento extension guide; a ready-made extension can be enough when the rules are simple.
As a separate application
For complex products, the configurator is often a standalone front-end application with its own rules engine, which calls Commerce through GraphQL to add the configured item to the cart. This suits products where rules are maintained by engineering or product teams rather than merchandisers, or where the same configurator is used by sales reps and dealers outside the store.
Whichever route you choose, the price must be recalculated on the server. A configurator that trusts a price sent from the browser is a fraud risk. The configuration also needs a stable, documented format, because it ends up in order exports, invoices and production systems.
3D and AR configurators: performance first
3D viewers and AR previews help shoppers commit to high-value, visual purchases. They also bring heavy JavaScript and model files. The main risk is page experience: Google's "good" thresholds are an LCP of 2.5 seconds or less and an INP of 200 milliseconds or less at the 75th percentile, and a 3D viewer loaded eagerly can break both.
- Show a static image as the main product image, then load the 3D viewer on interaction or after the page is usable.
- Compress models and textures, and serve smaller versions to phones.
- Keep option changes responsive; swapping a texture should not freeze the page.
- Keep the commercial logic (stock, price, rules) in the underlying configurator, not in the 3D layer.
AI-generated try-on is a related approach for apparel and eyewear. Our guide to AI virtual try-on covers where it helps and where a classic 3D configurator is the better fit.
Examples by industry
- Apparel: configurable products for size and color, plus custom options for personalization.
- Computers and electronics: bundle products for builds, with a custom compatibility layer once rules matter.
- Blinds, signage, cut-to-size materials: a rules-based configurator with formula pricing, since every order is made to measure.
- Furniture: rules-based configurator with a 3D preview for fabrics and finishes.
- Auto parts kits: bundles filtered by vehicle fitment; see our guide to automotive parts ecommerce.
How to choose
- For each choice, decide whether it maps to stock, a price add-on, or a production instruction.
- Count the combinations. If configurable children would run into the thousands per product, look elsewhere.
- List the rules between options. If there are any, plan for custom logic.
- Decide who maintains the rules and where the configuration has to travel after checkout.
- Prototype the configurator with real data and measure its effect on page speed before committing to 3D.
Most stores combine these: configurable products for standard ranges and a custom configurator for one or two made-to-order lines. Mistri builds configurators either as Magento extensions or as standalone apps through our web application development service, depending on where the rules need to live.
Sources
Create a configurable product (Adobe Experience League); Create a bundle product (Adobe Experience League); Customizable options (Adobe Experience League); Web Vitals (web.dev).
