Start with 3 Honest Questions

Before picking a technical approach, nail down 3 answers:

  1. How many front-end engineers do you have? (0 / 1–2 / ≥ 3)
  2. How complex is your rule engine? (color/material swap vs. 100+ parts with incompatibilities + parametric)
  3. Where must the configuration surface? (visualization only / into cart / into BOM + ERP)

Bring these 3 answers below and you’ll pick the right path in under 5 minutes.

5 Embedding Methods — Side-by-Side

# Approach Integration Timeline FE Resource Rule Complexity Cart Integration BOM / ERP Ideal For
① Native Shopify 3D Model Half day 0 ❌ Static 360° only ⚠️ Visual only ❌ If you literally just want a nicer product photo
② Shopify App (e.g. official ii3d App) 1–2 days 0 ✅ Medium complexity ✅ Auto-writes ⚠️ Optional add-on Standard categories; business-team self-serve
③ Theme App Extension 3–5 days 1 FE ✅✅ Non-trivial ✅ Via App Blocks ✅ Via API Need on-brand UI, but want to keep Shopify native
④ Web Component / Custom Element (iframe) 5–10 days 1–2 FEs ✅✅✅ Very complex ✅ Event callbacks ✅✅ Complete Mature in-house frontend team
⑤ Headless / Hydrogen Build 3–6 weeks ≥ 3 FEs ✅✅✅ Fully custom ✅ You own it ✅✅✅ Complete Site-wide 3D-first strategy, multi-channel reuse

① Native Shopify 3D Model Feature

How: Shopify Admin → Product → Media → Upload a .glb file directly. Done.

Pros  : Fastest, free, zero code
Cons  : Spin-only, no option selection, no pricing, no add-to-cart
Verdict: If "make my product page look less flat" is literally the only goal, use this

② Official Shopify App (RECOMMENDED START)

How: Shopify App Store → Search “ii3d” → Install → Bind products → Upload assets → Done.

Pros:
  ✅ Live in 1–2 days; business ops team can own it
  ✅ Automatically writes configured line items (incl. JSON payload) to cart
  ✅ Fabrics / materials / modules / upcharge rules all supported
  ✅ Order detail pages auto-include build screenshots + structured BOM
Cons:
  ⚠️ UI follows app provider's theme (you can tweak, not fully rebrand)
  ⚠️ Very exotic rules (A→B→C three-level cascading constraints) need paid customization
Verdict: This covers ~90% of mid-market needs completely

③ Theme App Extension (Shopify’s Official Recommended Standard)

How: Reuse the App’s backend engine + author custom App Blocks for your 2.0 theme. You own the front-end layer.

Pros:
  ✅ Not tightly coupled to the theme. Switching themes doesn't break config
  ✅ 100% compatible with native Shopify Checkout
  ✅ Native support in all Online Store 2.0 themes
Cons:
  ⚠️ Requires at least one engineer comfortable with Liquid + mild JS
  ⚠️ Subject to Theme App Extension sandbox constraints
Verdict: Use when you have a brand style guide to enforce

④ Web Component / Custom Element (We Supply the Engine — You Wrap It)

How: Drop <ii3d-configurator product="xxx"> as a custom element onto your PDP, then listen for events to push payloads into the Shopify AJAX cart.

// Minimal working example
<script src="https://cdn.ii3d.com/sdk/v1/loader.js"></script>

<ii3d-configurator
  product-id="sofa-modular-v2"
  theme="dark"
  show-price="true"
/>

<script>
  const el = document.querySelector('ii3d-configurator');
  el.addEventListener('config:change', async (e) => {
    const { payload, lineItem } = e.detail;
    // lineItem is already shaped for the Shopify /cart/add.js contract
    await fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: [lineItem] })
    });
  });
</script>
Pros:
  ✅ 100% UI freedom — matches your site perfectly
  ✅ Configurator ↔ page interactions are arbitrarily deep (e.g. auto-scroll to reviews after build)
  ✅ Full BOM / ERP / custom-quote flows supported
Cons:
  ⚠️ Coding required (5–10 person-days integration)
  ⚠️ Order display in Shopify Checkout needs custom hooks
Verdict: >$4M+ GMV, mature frontend team — start here and skip the middle steps

⑤ Headless / Hydrogen (Maximum Freedom)

How: Build the full front end on Shopify Hydrogen (Remix). ii3d only supplies a headless API:

  • GET /products/:id — fetch option tree
  • POST /configurations/validate — validate constraints
  • POST /configurations/quote — get price + BOM
  • You implement rendering yourself in Three.js / React Three Fiber
Pros:
  ✅ 100% freedom — UI / motion / flow / multi-channel reuse (Web + App + WeChat Mini-Program) all yours
  ✅ Can build "3D + AI assisted selling" style features
Cons:
  ⚠️ Long cycle (3–6 weeks minimum)
  ⚠️ Expensive (≥ 3 FTE front-end + a graphics engineer)
  ⚠️ You own every pitfall (performance, loaders, memory leaks)
Verdict: Enterprise-scale (>$70M+ GMV) or genuine multi-channel 3D strategy

Decision Tree: 3 Steps to Pick

Q1: Do I literally just want the product image to look nicer?
   → YES → ① Native 3D Model ✅
   → NO  → goto Q2

Q2: Is my configuration only color/material swaps + simple upcharges?
   → YES → ② Official Shopify App ✅
   → NO  → goto Q3

Q3: Do I have front-end engineers?
   → 1 engineer + want native Shopify Checkout → ③ Theme App Extension ✅
   → 1–2 engineers + brand UI fidelity is key → ④ Web Component ✅
   → ≥ 3 engineers + multi-channel + max freedom  → ⑤ Headless / Hydrogen ✅

One-Sentence Recommendation

  • Start with ② (the App): cheapest possible proof of concept. If it doesn’t move the needle you lose nothing.
  • Once ROI is proven, upgrade to ④ (Web Component): spend budget only after you have evidence the investment returns.
  • Skip ⑤ (Headless) unless you genuinely need it: you only need this at real scale (>$70M GMV) or with explicit multi-channel requirements.