Shopifyで試着対象の商品を設定する（Try-On Images・サイズ別実寸）

アプリを入れてApp Blockを置いたら、あとは商品ごとの登録です。この記事はTry-On Images画面での実務をまとめたものです。インストールとApp Blockの配置は導入記事を見てください。

Try-On Images 画面

アプリを開いて Try-On Images に入ると、ストアの商品一覧が出ます。各商品に登録状況のバッジ（「2色・3サイズ登録済み」など）が付くので、どこまで終わったかは一覧で分かります。

商品を選ぶと登録フォームです。登録する内容は次の3つ。

登録内容は商品のメタフィールドに保存されます。アプリを削除すると消えるので、テーマを変えても登録は残りますが、アプリの入れ直しでは再登録が要ります。

Shopifyの商品は「オプション」（Color など）と「オプション値」（Gold / Silver など）でバリエーションを持ちます。色行の色名は、Colorオプションの値と完全一致させてください。

一致しない色は表示されないだけで、エラーは出ません。商品ページの「バリエーション」でオプション値をコピーしてから色行を書くのが確実です。

色のオプションが無い商品（単色）は、色行を1つ作れば十分です。

画像URLは https のみ受け付けますが、置き場所はShopify管理画面の「コンテンツ > ファイル」を使ってください。

理由は、試着が画像をブラウザのキャンバスに描くため、画像のサーバーが他サイトからの読み込みを許可する応答（CORS）を返す必要があるからです。Shopifyのファイルはこれを満たします。自社サイトや外部ストレージの画像は、ブラウザで開けば見えるのに試着では読めない、ということが起きます。

登録フォームは、Shopify以外のホストのURLに黄色い警告を出します。警告が出たらファイルに置き直してください。

「ファイル」にアップロードしたら、その画像の「リンクをコピー」でURLを取れます。

画像そのものの条件は他のプラットフォームと同じです：透過PNG、余白を切り詰める、スタッドはポストを写さない。透過PNGの記事を参照してください。

商品の高さ（装着時に縦になる方向）をmmで入れます。

空欄だと既定の21mmで描かれます。登録画面で画像だけ入れて満足しないでください。

商品にサイズのオプション（8mm / 10mm / 12mm など）が2つ以上あると、フォームに「サイズ別の高さ」が自動で出ます。サイズごとにmmを入れると、お客様がサイズを切り替えたときに耳の上の大きさが追従します。

フープの内径選びで一番効く機能なので、サイズ展開のあるフープは必ず入れてください。

保存したら、その商品のページをスマホで開いて試着ボタンを押します。

登録した商品にだけ試着が出るので、1商品ずつ確認しながら進められます。

1商品あたり、画像とURLが揃っていれば2〜3分です。

Shopifyで特有なのは「画像の置き場所」だけです。あとは他のプラットフォームと同じく、画像と実寸を商品ごとに入れる作業です。