Horizonの標準バリアントピッカーを、各選択肢に商品画像を表示できるブロックに置き換える方法です。テキストだけの選択肢を、写真付きの分かりやすい選択肢に変えられます。
追加方法
◆Shopify管理画面 → オンラインストア → テーマ →「…」→ コードを編集
◆blocksフォルダに variant-picker-images.liquid を新規作成し、購入後のコードを貼り付けて保存
◆テーマエディタ → 商品ページテンプレート →「商品情報」→「詳細」で、既存の「バリエーションピッカー」ブロックを削除し、「画像付きバリアントピッカー」を追加
画像には、そのバリアントに設定されている商品写真がそのまま使われます。追加の画像アップロードは不要です。
設定
◆画像とテキストの並び：縦並び（画像が上・デフォルト）と横並び（画像が左）を切り替えられます。
◆画像を表示するオプション：色・サイズなど複数のオプションを持つ商品では、画像が設定されているオプション（通常は色）だけを選んでください。それ以外のオプションは通常のボタン表示になります。
レイアウトの調整
選択肢の名前が長いと、文字数によって選択肢ごとに幅がバラバラになります。「選択肢の幅」を設定すると、幅を揃えたり折り返しの列数を指定したりできます。いずれの場合も、幅に収まらない文字は自動的に折り返されます。
◆要素に合わせる（デフォルト）：文字数ぶんの幅になります。「ブロック全体の配置」で左・中央・右に寄せられます。
◆全幅に広げる：選択肢が1つずつ横幅いっぱいに並びます。「選択肢内の配置」で、画像と文字を左・中央・右のどこに寄せるか選べます。
◆サイズ指定：幅を20〜80%の範囲で指定できます。たとえば50%にすると2列に揃います。選択肢どうしの余白も0〜40pxで調整でき、余白の分は自動的に差し引かれるので、指定した割合どおりの列数に収まります。
◆ご購入いただくと、この画像付きバリアントピッカーの完成コード（Liquidファイル全文）をご利用いただけます。
