Showcase へ戻る

Shopify 用 3D コンフィギュレーター

Shopify の商品ページに、3D で回して色・素材・パーツ・刻印を選べるコンフィギュレーターを置きます

アプリではなくテーマ部品なので、Shopify の審査も月額料金も要りません。テーマのコードの編集画面で section 1 つと assets 5 つを足し、商品メタフィールドに設定の JSON を 1 つ入れれば動きます。

見本

架空の店「みなと工房 オンラインストア」のステンレスタンブラーの商品ページです。本体の色 2 つ × 容量 2 つ × 刻印の有無で 8 つのバリエーションを持つ商品で、選ぶたびに価格が ¥3,800〜¥4,700 の間で変わります。

見本のカートは本物のカートにつながっていません。「カートに入れる」を押すと、カートに届く内容を画面の下に出します。同じ見本の商品ページは zip にも入っていて、Shopify が無くても手元で動きを確かめられます。

3D 商品コンフィギュレーターのページでも見る / 見本を別の画面で開く

できること

  • 色や容量を押すたびに、3D の商品と価格がその場で変わります。価格は、選んだ組み合わせに当たるバリエーションの価格です
  • 選んだ内容はカートの行に載ります。カートとチェックアウトには「刻印の文字: MINATO」のような行が出て、管理画面の注文詳細には選択の控えと、開くと同じ 3D が出る URL が残ります
  • 選択肢は色・素材・パーツの出し分け（容量違いなど）・刻印・ロゴの 5 種類です。組み合わせは JSON に書くだけで、プログラムは書きません
  • 設定は商品ごとのメタフィールドに、3D モデル（GLB）は Shopify の「ファイル」に置きます。サーバー・外部サービス・API キーは要りません
  • 選択肢の下に「PNG で保存」「共有 URL をコピー」「最初に戻す」のボタンが出ます
  • お客さまの画面の文言は日本語と英語です。ストアの表示の言語に合わせて切り替わります
  • 設定に誤りがあるとき、お客さまの画面には一言だけを出し、直すところの一覧はテーマエディタの中に出します
  • メタフィールドが空の商品では何も表示しないので、3D の無い商品と同じ商品テンプレートを使えます

こんな方に

  • タンブラー・家具・看板・アパレル・ノベルティのように、色や素材を選ぶ商品を Shopify で売っているお店・メーカーの方
  • 3D のアプリの月額が重い方、アプリを増やさずテーマだけで済ませたい方
  • 名入れや組み合わせの内容を、注文にきちんと残したい方
  • Shopify の構築を請け負う制作会社・フリーランスの方。お客さまのストアに納める部品として使えます

請求の仕組み

Shopify で実際に請求される金額は、カートに入ったバリエーションの価格だけです。テーマに足すファイルからは価格を書き換えられないので、価格の出し方を 2 つ用意しています。商品ごとに選べます。

バリエーション方式（おすすめ）は、色・容量・刻印の有無といった群を商品のオプションに結びつけ、選んだ組み合わせに当たるバリエーションの価格を出して、そのバリエーションをカートに入れます。表示と請求が必ず一致します。結べる群は、Shopify の商品のオプションと同じく 3 つまでです。

参考価格方式は、バリエーションの価格に群ごとの差額を足した額を「参考価格」として出し、注記を必ず添えます。カートとお支払いの画面に出る金額はバリエーションの価格だけで、差額はお店がご注文のあとに別に受け取ります。差額が小さい商品や受注生産のお店に向いています。

守り

  • 選んだ内容を送る先は、同じストアのカートだけです。外部のサービスには何も送りません
  • お客さまがロゴに選んだ画像は、ブラウザの中で 3D に貼るだけで、どこにも送りません
  • 刻印の文字は、設定で決めた字の種類と字数を、入力のときに画面で確かめます。注文に残る値はお客さまのブラウザから送られた値なので、作る前にお店で確かめてください
  • 設定の JSON は、お店の管理者しか書けないメタフィールドに置きます。ページでは JSON として読むだけで、プログラムとしては動かしません
  • テーマの script を書き換えるアプリが入っていると動きません。その場合は、キットのファイルを書き換えの対象から外してください

費用

部品は買い切りです。アプリの月額はかかりません。サーバーも外部の API も使わないので、使うほど増える費用もありません。設定も 3D モデルも、お使いの Shopify のストアの中に置きます。

入っているもの

  • theme/（テーマに足す 7 ファイル。section 1 つ、テーマの購入ボタンに載せるときの snippet 1 つ、assets 5 つ）
  • samples/（設定の見本 2 本と、見本の 3D モデル）
  • page/mock-product.html（Shopify 無しで動きを確かめられる見本の商品ページ）
  • src/（Shopify とのつなぎの部分の元のコード。改変は自由です）
  • README.ja.md・README.en.md・LICENSE.md・CHANGELOG.md・THIRD-PARTY-NOTICES.md

動作環境

Online Store 2.0 のテーマ。Shopify の開発ストアで、Dawn 16.0.0・Horizon 4.2.0・開発ストアの既定テーマの 3 つに入れて確かめています。参考価格方式でのテスト注文、日本円のほかの通貨、テーマの購入ボタンに載せる方式は、まだ確かめていません。確かめたことと、まだ確かめていないことの一覧は、同梱の README にあります。

3D モデル（.glb）はお店でご用意ください。3D モデルの制作そのものは含みません。お客さまのブラウザは、WebGL の使える現行のブラウザです。

価格と購入

¥16,800（税込）の買い切りです。買った方は、その後の 1.x のアップデートも無料で受け取れます。改変と、お客さまのストアへの組み込み納品は自由です。再配布・転売・同種商品化と、Shopify のアプリやテーマとしての公開・販売はできません。Shopify 以外のサイトに置く場合は、別の商品の「3D 商品コンフィギュレーター」をお使いください ── note / BOOTH

設置を任せたい方には、導入の代行（¥100,000）があります。GLB のパーツの名前の確認、メタフィールドの設定、商品のオプションとバリエーションの対応づけ、テーマへの設置、テスト注文での確認までを、商品 3 点まで・14 日・修正 2 回で行います（GLB の制作とテーマの改修は含みません）。ココナラ・ランサーズでお受けしています。