shopify内で商品画像のエリアになら.glbファイル(3Dモデル)をあげることが出来るのですが、投稿エリアや通常のページでは表示させることが出来ません。また商品画像の部分での表示も、内部的にはgoogleのmodel viewerが動いているのですが、バージョンが古いようでシンプルな回転動作にとどまり最新バージョンで表現できるであろう動きは実現できませんでした。
テンプレートDawnを使った場合の導入メモ。
layout/theme.liquidファイルのヘッダ部分に以下の1行を追加するだけで簡単にサイト内どこでも3Dモデルを表示することが出来るようになりました。
<script async type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>サンプルや使い方はhttps://modelviewer.dev/で。
万屋物産は映像制作会社ですが、最近3Dモデルを使ったECサイト制作のお手伝いはじめました。上下左右オモテウラと360°ぐりぐり回転できる商品紹介に興味ある方はお気軽にお問い合わせ下さい。