Mooshfy
Service 02Shopify Development

Shopify on the back.3D on the front.

You already run your business in Shopify. Selling a configurable product in 3D should not mean replatforming, re-training your operations team, or rebuilding checkout.
Storefronts
Headless & themed
API
Storefront GraphQL
Data
Metaobjects
Checkout
Shopify native
04Architecture

Shopify on the back.3D on the front.

You do not have to leave Shopify to sell a configurable product in 3D. Shopify stays the commerce backend — the custom Three.js experience is the interactive layer in front of it.

Your finance, inventory and fulfilment teams keep working in the admin they already know. Nothing about the back office changes.

  1. 3D Experience

    Three.js · WebGL

    The scene the customer touches.

    then

  2. Configurator

    Rules · Pricing · State

    Components, compatibility, live totals.

    then

  3. Product Data

    Metaobjects · Metafields

    Component catalogue, model URLs, price deltas.

    then

  4. Shopify

    Storefront API

    Products, inventory, pricing, customers.

    then

  5. Cart

    Line items · Attributes

    The configuration travels with the order.

    then

  6. Checkout

    Payments · Tax · Shipping

    Shopify's checkout, untouched.

    then

  7. Order

    Fulfilment · ERP

    Your team builds exactly what was configured.

Stays in Shopify

  • Products
  • Inventory
  • Pricing
  • Customers
  • Orders
  • Cart
  • Checkout

The configuration travels with the order as line-item attributes, so the person assembling the product reads the exact specification the customer built — case, dial, hands, strap — on the order in the Shopify admin.

Headless or embedded, we build to your setup: a custom Next.js storefront on the Storefront API, or a 3D experience dropped into your existing Liquid theme as an app block.

05Approach

Two waysto ship it.

Which one is right depends on how much of the storefront the 3D experience is meant to carry. We will tell you plainly which we think fits.
Option A

Embedded in your theme

The 3D experience ships as a theme app block or an app embed inside your existing Online Store 2.0 theme. Your merchandisers keep the theme editor, your developers keep Liquid, and the configurator appears on the product template where it belongs.

Best when the rest of the store already works and you want 3D on specific products.

Option B

Headless storefront

A custom Next.js storefront on the Storefront API, with the 3D experience as a first-class part of the front end rather than an embed. Full control over routing, rendering and performance, with Shopify still handling cart, checkout and orders.

Best when the buying experience itself is the differentiator.

06Data model

Where the componentsactually live.

A configurator is only maintainable if the people who own the catalogue can edit it. That means the component data belongs in Shopify, not in our code.
Shopify objectRoleWhat it holds
ProductThe configurable itemBase price, description, imagery, publication scope.
Metaobject: componentOne configurable optionName, swatch, PBR material values, GLB URL, price delta, lead time.
Metaobject: groupA configuration stageCase, dial, hands, strap — ordered, with a default option.
Metafield: rulesWhat cannot combinePairs of component handles the factory will not build together.
VariantThe sellable unitInventory and pricing, referenced by the configured line item.
Cart line attributesThe configurationHuman-readable specification carried onto the order.

This site is not connected to a Shopify store, and it performs no commerce calls. The configurator is written against these shapes anyway — the types and the adapter interface are in the codebase — so connecting a real catalogue is an implementation behind one interface rather than a rewrite.

07Shopify

Have a product that deserves to be experienced?

Let's turn your product into an interactive 3D shopping experience.

WhatsApp us nowSend a brief

Replies in minutes, not days — or email info@mooshfy.com.