「選択したバリエーション別に商品画像を表示」機能について
この機能を使用すると、顧客が特定のバリアントを選択したときに表示される製品画像を制御できます。
有効にすると、GemPages は、バリアント名と画像の代替テキストを照合して、選択したバリアントに関連する画像のみを自動的に表示します。
この設定は両方に適用できます 製品要素 の三脚と 製品リストの要素.
機能の仕組み
訪問者が製品バリアントを選択すると、GemPages は次の処理を実行します。
- バリエーション名と、Shopify 製品内の各画像の代替テキストを比較します。
- 代替テキストにバリアント名が含まれる画像のみを表示します。
- 無関係な画像を自動的に非表示にします。
また、特定の画像の代替テキストにキーワード「all-variants」を追加することで、その画像をすべてのバリエーションで表示するようにマークすることもできます（例：お手入れ方法、サイズ表）。
デフォルトではすべての商品画像が表示されます。以下の手順に従って、このオプションを手動で有効にする必要があります。
GemPagesで「選択したバリエーションごとに商品画像を表示」を有効にする方法
GemPages エディター内でこの機能を有効にするには、以下の手順に従います。
ステップ1： あなたから Shopify管理者、に行く アプリ > GemPages、あなたの 製品要素.
ステップ2： あなたの上でクリックしてください 製品要素 選択するには、レイヤーパネルで 商品画像要素 その中。
ステップ3： 左サイドバーの 設定 タブ、下にスクロールして見つけます 表示条件.
ステップ4: 表示オプションを選択する
次の 2 つのオプションが表示されます。
- すべての画像（デフォルト）: バリエーションに関係なくすべての製品画像を表示します。
- 選択されたバリアント: 代替テキストに基づいて、選択したバリアントに一致する画像のみを表示します。
選択する 選択されたバリアント この機能を有効にします。
ステップ5： 有効になったら、 Save の三脚と パブリッシュ あなたのページ。
訪問者が異なるバリエーションを選択するたびに、製品画像が動的に更新されるようになりました。
Shopifyでバリエーションベースの画像に代替テキストを設定する方法
この機能を正しく動作させるには、適切な 代替テキスト Shopifyの各商品画像に代替テキストを追加します。GemPagesはこの代替テキストを使用して、どの画像がどのバリエーションに属するかを判断します。
ステップ1： Shopify管理画面から 製品 > [お客様の製品].
ステップ2： バリアントに割り当てる画像を見つけます。
ステップ3： 画像をクリック→クリック 代替テキストを追加する → バリアント名を入力します。
システムがバリアントベースの画像を正しく識別できるようにするには、次の手順に従ってください。 代替テキストの命名規則:
- すべてのテキストは 小文字.
- スペース、ハイフン（-）、アンダースコア（_） 無視されます。
- 代替テキストは 選択したすべてのバリアント値を含める (例: 色やサイズなど)。
- その バリアント名が表示される必要があります 代替テキスト内。
- 画像を表示するには すべての変種含む 「すべての変種」 代替テキスト内。
- アクセシビリティと SEO のために説明的なテキストを使用します。
- ストア全体で一貫した命名規則を維持します。クリック Save 完了したら、すべての製品画像に対してこれを繰り返します。
例えば、あなたが Tシャツ 次のバリアントオプションがあります:
- 色： 赤青
- サイズ： S、M、L
各商品画像には色とサイズの両方が含まれている必要があります。 代替テキストこれにより、GemPages はどの画像がどのバリアントに属しているかを識別できるようになります。
正しい例:
| バリアント | 代替テキストの例 |
| 赤 – S | Tシャツ レッド S |
| 赤 – M | Tシャツ レッド M |
| 青 – L | Tシャツ ブルー L |
| すべてのバリエーション（例：サイズ表） | サイズ表（全バリエーション） |
誤った例:
| 代替テキスト | なぜ間違っているのか |
| Tシャツ レッド | サイズ情報が不足しています |
| TシャツM | 色情報が欠落しています |
| IMG_0001 | 変異情報なし |
Shopify での製品画像と代替テキストの管理の詳細については、以下をご覧ください。
注意：
- 注目画像の動作: 「選択されたバリアント”オプションが有効になっている場合、GemPagesは注目画像を 選択したバリアント名と一致する代替テキストを持つ最初の画像これはGemPagesに表示される注目の画像を意味します 同じではないかもしれない Shopify内でそのバリエーションに手動で割り当てた「おすすめ画像」。
- デフォルトで無効: 「選択されたバリアント” オプションは デフォルトではオフ機能を手動で有効にするまで、すべての画像が正常に表示されます。
よくある質問
1. バリエーションを選択しても商品画像が正しく表示されないのはなぜですか?
選択したバリアントに基づいて画像が更新されない場合は、次の手順を試してください。
- 各商品画像に正しいバリエーション名が含まれていることを確認してください。 代替テキスト.
- ジョブタイプが 「選択されたバリアント オプションが有効になっています 商品画像設定で。
- ことを忘れないでください スペース、ハイフン（-）、アンダースコア（_）は無視されます マッチング中。
- バリエーション名に一致する画像がない場合、GemPages は代わりにすべての製品画像を自動的に表示します。
2. すべての製品バリエーションに対して特定の画像を表示するにはどうすればよいですか?
すべてのバリエーションに画像（サイズ表、お手入れガイド、商品写真など）を表示したい場合は、 「すべての変種」 Shopify の alt テキストに追加します。
その後、GemPages は、顧客がどのバリエーションを選択したかに関係なく、常にその画像を表示します。
3. 「選択したバリエーション別に商品画像を表示する」機能を無効にすることはできますか？
はい。オフにするには、 商品画像 GemPagesエディタで要素設定を開き、 「すべての画像」 オプションを選択します。
無効にすると、選択したバリエーションに関係なく、すべての製品画像がデフォルトで再度表示されます。
4. バリエーションに一致する画像がない場合はどうなりますか?
選択したバリエーションに一致する画像の代替テキストがない場合、GemPagesは自動的に 利用可能なすべての製品画像.
コメントしてくださってありがとうございます