3D Configurator for ShopifyShopify Configurator

Sample

The demo below is in Japanese.

A product page for a stainless tumbler from a fictional workshop’s online store. The product has 8 variants (2 body colors × 2 capacities × with or without engraving), and the price changes between ¥3,800 and ¥4,700 as you choose.

The sample cart isn’t connected to a real cart: pressing add to cart shows, at the bottom of the screen, what would reach the cart. The same sample product page is in the zip, so you can try it locally without Shopify.

See it on the 3D Product Configurator page / Open the sample in a new window

What it does

• Each time a color or capacity is pressed, the 3D product and the price change on the spot. The price is that of the variant matching the chosen combination
• Choices go onto the cart line. Cart and checkout show lines such as the engraving text, and the order details in the admin keep a record of the choices and a URL that opens the same 3D view
• Five kinds of options: color, material, part switching (such as capacity), engraving, and logo. Combinations are written in JSON, with no programming
• Settings live in each product’s metafield and the 3D model (GLB) in Shopify Files. No server, external service, or API key needed
• Buttons under the options save a PNG, copy a share URL, and reset
• Customer-facing text is in Japanese and English, following the store’s display language
• If the settings contain an error, customers see a single short message, and the list of fixes appears in the theme editor
• Products with an empty metafield show nothing, so they can share the same product template as products without 3D

Who it’s for

• Shops and makers selling products with color or material choices on Shopify, such as tumblers, furniture, signs, apparel, and promotional goods
• Those for whom a 3D app’s monthly fee is heavy, or who want to stay with the theme without adding apps
• Those who want engraving and combinations recorded properly in the order
• Agencies and freelancers who build Shopify stores, as a component to deliver to clients

How billing works

The amount Shopify actually charges is only the price of the variant in the cart. Files added to a theme can’t rewrite prices, so there are two pricing modes, chosen per product.

Variant mode (recommended) ties groups such as color, capacity, and engraving to product options, shows the price of the matching variant, and adds that variant to the cart. Display and charge always match. Up to 3 groups can be tied, as Shopify products allow up to 3 options.

Reference price mode shows the variant price plus each group’s surcharge as a “reference price”, always with a notice. Cart and checkout show only the variant price, and the shop collects the difference separately after the order. It suits products with small differences or made-to-order shops.

Safeguards

• Choices are sent only to the same store’s cart. Nothing goes to external services
• A logo image chosen by the customer is only applied to the 3D model in the browser and sent nowhere
• Engraving text is checked on screen against the allowed characters and length you set. Values in the order come from the customer’s browser, so check them before production
• The settings JSON lives in a metafield only store admins can write. The page reads it as JSON and never runs it as a program
• Apps that rewrite theme scripts stop it from working; exclude the kit’s files from such rewriting

Costs

The component is a one-time purchase. No app subscription. It uses no server or external API, so there are no usage-based costs. Settings and 3D models stay in your own Shopify store.

What’s included

• theme/ (7 files to add to the theme: 1 section, 1 snippet for using the theme’s buy button, 5 assets)
• samples/ (2 sample settings and a sample 3D model)
• page/mock-product.html (a sample product page to try without Shopify)
• src/ (source code of the Shopify integration; you may modify it)
• README.ja.md, README.en.md, LICENSE.md, CHANGELOG.md, THIRD-PARTY-NOTICES.md

Requirements

An Online Store 2.0 theme. Tested on a Shopify development store with Dawn 16.0.0, Horizon 4.2.0, and the development store’s default theme. A test order in reference price mode, currencies other than Japanese yen, and the theme buy button method have not been tested yet. The bundled README lists what has and hasn’t been tested.

Please provide your own 3D model (.glb); creating 3D models isn’t included. Customers need a current browser with WebGL.

Price and purchase

¥16,800 (tax included), one-time purchase. Buyers receive later 1.x updates free. Modifying it and delivering it built into a client’s store are allowed; redistribution, resale, selling it as a similar product, and publishing or selling it as a Shopify app or theme are not. For sites other than Shopify, use the separate 3D Product Configurator ── note / BOOTH

Purchases are made in Japanese on BOOTH or note, and priced in Japanese yen.

If you’d like the setup done for you, a setup service is available (¥100,000): checking GLB part names, metafield settings, mapping options to variants, theme installation, and a test order, for up to 3 products, in 14 days with 2 revisions (GLB creation and theme customization not included), through Coconala and Lancers (in Japanese).