3D見積もりシミュレーターの作り方：3DシミュレータとShopifyの購入ボタンを連携する方法
2024.10.10
「だれでもシミュレータ」はShopifyの購入ボタンとの連携が可能です。
オプションやカラーなど、バリエーションが選べるシミュレータが作れるだれでもシミュレータ。
Shopify も同様に、色やサイズなどのバリエーションの設定ができます。その機能を連携することで、3Dで組み合わせシミュレーションしたものをShopifyで購入、といった流れを実現させます。
だれでもシミュレータでバリエーションを追加する方法
その商品のオプションやカラーをユーザーに選択をさせたい場合は「ダイナミック3Dオブジェクト」や「ダイナミックマテリアル」を使用します。
例えば形状や色、価格などが異なるオプションを選ばせたい時には、「ダイナミック3Dオブジェクト」の中に「3Dオブジェクト」をオプションの数だけ登録し、それぞれに名前や詳細、価格などを設定します。
バリエーションの選択結果
「だれでもシミュレータ」では、ユーザーがオプションを選ぶと、その選択結果は「シミュレータコード」に変換され、出力されます。
そのコードはシミュレータの組み合わせを表すユニークな値となっており、シェアすることで、シェア先で再現が可能になっています。「だれでもシミュレータで」のコード出力システムを使用し、3DシミュレータとShopifyの購入ボタンとを連携させます。
Shopify でバリエーションを追加する方法
Shopifyでは商品それぞれに「カテゴリメタフィールド」を追加することで色やサイズなどのバリエーションが追加できます。
詳しくは以下ページをご覧ください。
「カテゴリメタフィールド」
https://help.shopify.com/ja/manual/custom-data/metafields/category-metafields
Shopifyの埋め込み購入ボタン
ShopifyにはBLOGや自社サイトに購入ボタンを埋め込む機能があります。Shopifyから出力されるコードをhtmlに埋め込むことで、Shopify外に購入ボタンが設置できる、というものです。
「Shopifyの購入ボタンとは？作成方法やカスタマイズ方法」
https://www.shopify.com/jp/blog/setup-buy-button
Shopifyの埋め込み購入ボタンの仕組み
Shopifyの購入ボタンではクリック時に「プロダクトのID」「バリエーションのID」をその他のショップ固有の情報とともに送信することでバリエーション商品の購入操作を実現しています。
3DシミュレータとShopifyの購入ボタンとの連携方法
「だれでもシミュレータ」のシミュレータコードと「バリエーションのID」を紐づけて、購入ボタンと連携させるカスタマイズを行います。
主なカスタマイズ内容は以下です。
・「だれでもシミュレータ」に登録する商品の「プロダクトID」をステージ設定で登録
・選択時に発行されるシミュレータコードを「バリエーションのID」に変換
・Shopifyで運用しているサイトのドメイン情報やトークンをシミュレータ基本設定で登録
・「お問い合わせボタン」を「購入ボタン」に変更
この様なカスタム開発を行うことで、Shopifyの購入ボタンとの連携が可能になります。
いかがだったでしょうか？
「だれでもシミュレータ」で3Dシミュレーションさせ、Shopifyで購入。この連携、ぜひご検討ください。
Shopifyとの連携方法は目的によって異なります
尚、今回ご紹介した方法は、Shopifyの購入ボタンと商品バリエーションを組み合わせる方法です。
この方法は、
- あらかじめ商品バリエーションが決まっている
- Shopifyの商品情報と1対1で対応できる
場合に適しています。
一方、
- オーダーメイド商品
- 組み合わせが非常に多い商品
- 商品ごとに価格が変わる商品
- シミュレーション結果をそのまま注文情報として扱いたい商品
では、ShopifyのDraft Order APIを利用した構成が適している場合があります。
詳しくは、以下の記事をご覧ください。
ランキング
-
「競合に提案内容を知られたくない」。特定の顧客だけに3Dシミュレーターを限定公開して、商談の成約率を高める方法
-
難しい操作は一切なし。手持ちの「間取り図画像」を3D化して、誰でも1分で家具配置ができるシミュレーター
-
Amazon・楽天・Yahoo!ショッピングの売上UP。シミュレーターから直接カートへ誘導する「相互リンク」の仕組み
-
家具の3Dオブジェクトの配置・追加・削除をもっとスムーズにする新機能を追加：アイテム追加編
-
家具の3Dオブジェクトの配置・追加・削除をもっとスムーズにする新機能を追加：表示切り替え編
-
Shopify×3Dシミュレーターでカスタマイズ商品を販売する仕組み｜Draft Order API連携
-
スマホで3Dデータを作るならどれ？おすすめ3Dスキャンアプリ比較【初心者向け】
-
PoCで終わらせないシステム開発｜シミュレータ開発元によるカスタマイズと本開発への移行
-
3Dソフト不要！CADのOBJデータをそのままアップロードして3Dシミュレータを作る最短ルート
-
受注ミスの『責任』をシステムが肩代わり。「3Dコンフィギュレーター」の禁則処理とは？
