「だれでもシミュレータ」は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で購入。この連携、ぜひご検討ください。

ご興味ございましたらお気軽にお問い合わせください。
お問い合わせはこちらから。

おすすめの使い方

• 株式会社サザビーリーグ　エーアンドエスカンパニー様のカスタムオーダーツールに採用されました
• コマニー株式会社様のシミュレータに「だれでもシミュレータ」採用。
• プロジェクト進行のストレス軽減に。3Dシミュレータとメンタルヘルス
• 最大50%補助！IT導入支援事業者採択されました
• RhinocerosやSketchUpなど、3DCADモデルのWebブラウザ表示・埋め込みにおすすめ
• 3DCGの効率的な提案に。Web3D変換・表示システムを活用する。
• 製品の商談・提案に真剣に取り組むために3Dを活用
• シミュレータもアイテムも無制限。オンプレプランのご案内。
• 商談で競合・ライバル会社に勝つために。3Dで提案資料をより具体的なものにする
• 未導入リスクを回避！ウェブへ簡単導入
• シミュレータでアクセスログを取ろう
• シミュレータにSKU値を活用できます。
• 1脚コスト¥46.2。圧倒的な効率化でARを作る
• 3D制作が無償！ラージプランキャンペーン
• パートナー企業募集中!
• 自動変換だけじゃない。ARシミュレータをその場で作る。
• ShopifyでAR！USDZ形式の保存可能です。

シミュレーターの作り方

• 3DシミュレータとShopifyの購入ボタンを連携する方法
• もっと便利に！新バージョン、「v2」ベータ版リリースのお知らせ
• 多数のバリエーションにも対応！iOS・Android対応したWebARの作り方
• だれでもシミュレータのECサイト連携について
• リアルな3Dモデル作成はおまかせください。
• 「だれでもシミュレータ」プランの選び方。必要アセット数で選ぼう
• だれでもシミュレータで3Dレイアウトシミュレータを作る方法
• Web3Dの作り方。開発ベンダーなら「だれでもシミュレータ」
• カタログに3Dを載せる。Web3Dカタログの作り方
• 「だれでもシミュレータ」でマテリアルを作る方法
• だれでもシミュレータのセキュリティ対策について
• チュートリアルで作る！3Dシミュレータ・コンフィギュレータの作り方。
• 「その大きさ、設置できる？」が検証できるAR設置シミュレータの作り方
• Web3Dコンフィギュレータのダイナミックマテリアル使用法
• 食器のロゴシミュレータの作り方
• ARで見せるために必要なものとは？
• お試しに。費用を抑えてAR開発を依頼する方法
• WebARとは？Webで見れるARの開発環境
• WebGLに最適。シミュレータ用3Dモデルの作り方
• だれでもシミュレータのダッシュボードにobjデータが取り込めない・表示されない時の対処方法。
• blenderクリエイターならARがサクサク作れる
• そもそも3Dシミュレータとは？
• 3Dシミュレータ開発を依頼するには？
• ライティング・テクスチャで出す立体感。Web3Dにおすすめの設定方法。

機能アップデート

• 空きスロット追加は無制限。設定の複製・削除機能リリースしました。
• 3Dで直接操作！3Dレイアウト機能追加
• アノテーション（吹き出し）機能追加しました。
• だれでもシミュレータのUIデザイン
• 背景を透過した2D画像の作り方
• Android用のWebARも作れる！対応機種のお知らせ