商品のスライドショーギャラリーを正しいバリエーション画像に自動で切り替えるには？

注目のリンク

1. 商品バリエーションへの画像の追加に関するShopifyドキュメント
2. Alignでの画像の使用に関するCompany XYZドキュメント

Shopifyで各商品バリエーションに画像を割り当て、顧客がそのバリエーションを選択したときにAlignが商品ギャラリーを更新する方法を選択します。

バリエーション画像を割り当てる

1. Shopify管理画面で商品を開きます。
2. バリエーションリストで、バリエーションの横にある画像サムネイルを選択します。
3. 既存の商品画像を選択するか、新しい画像をアップロードします。
4. 各バリエーションについて繰り返し、商品を保存します。

同じ画像を複数のバリエーションに割り当てることができます。たとえば、赤色のすべてのサイズバリエーションに同じ赤い商品画像を割り当てられます。Shopifyでは、各バリエーションに割り当てられる画像は1枚です。詳しくは、バリエーションへの画像の追加に関するShopifyドキュメントをご覧ください。

ギャラリーの動作を選択する

1. テーマエディターで商品テンプレートを開きます。
2. Product information セクションを選択し、Variant selector ブロックが含まれていることを確認します。
3. Gallery variant image style を見つけ、次のいずれかを選択します。
   • Default：選択したバリエーション画像を最初に表示します。
   • Variant only：選択したバリエーション画像のみを表示します。
   • None：バリエーションが選択されてもギャラリーを変更しません。
4. 保存し、ストアフロントで複数のバリエーションをテストします。

商品画像の準備方法については、Alignでの画像の使用をご覧ください。

例

このスクリーンキャプチャでは、Shopifyでバリエーション画像を割り当てる方法を示しています。

ノート

ギャラリーがバリエーションの変更に反応しない場合は、まずProduct informationセクションにVariant selectorブロックが含まれていることを確認してください。