Shopify では商品オプションに写真を追加できるため、顧客は各選択肢がどのようなものかを確認できます。ただし、Shopify の規制により、1 つのオプション値に 1 つの画像のみを関連付けることができます。では、問題は、複数の画像を 1 つのオプションにどのように関連付けるかということです。
Conceptに答えがあり、 1 つのオプション値に対して特定の画像を指定できます。この機能は特に色のオプションに適していますが、他の目的にも完全に使用できます。
このページでは
要件
この記事は、 Conceptテーマでのセットアップについて説明します。
バリアントを選択した後は、[他のバリアントのメディアを非表示にする] をオフにする必要があります。このオプションは、ネイティブの Shopify 動作と互換性があり、1 つの画像のみを 1 つのオプション値に関連付けます。
Conceptでは、このオプションは次のセクションで使用できます。
- 注目の製品セクション。
- 製品情報セクション (製品ページ内)
必要なオプションを選択してください
管理画面で製品を確認し、画像を分類するオプションを選択します。
以下の例では、 Colorを選択することにしました。 Flow Harmony製品には、ゴールド トーン、ブラック、チェスナット、ネイビー、クリムゾン シャドウの色があり、ユーザーがオプションを選択したときにのみそれぞれの画像を表示したいと考えています。
画像のALTタグを編集する
alt タグを編集して、画像が属する「オプション名とオプション値」を指定する必要があります。
画像上にカーソルを置き、6 つの点のボタンをクリックして画像の情報を開きます
[代替テキストの追加] をクリックします。
選択したオプション名をオプション値と組み合わせて使用します。ここでの構文は非常に重要であり、次の順序で指定する必要があります。
-
#（ハッシュタグ文字） -
option-name(小文字、すべてのスペースをハイフンに置き換えます) -
_(アンダースコア文字) -
option-value(小文字、すべてのスペースをハイフンに置き換えます)
たとえば、 [カラー]オプションを選択し、画像をゴールド トーンカラーに関連付けたい場合、代替テキストは
#color_gold-toneにする必要があります。-
「代替テキストを保存」をクリックして変更を保存します。
他の画像についても同様の処理を行います。
独自の代替テキストを設定 (または保持)
SEO 目的で使用する独自の alt を設定 (または維持) したい場合はどうすればよいですか?次のように、 # 文字の前のalt フィールドに何かを追加するだけです。
この記事がお役に立てば幸いです。この機能についてご質問やご不明な点がございましたら、お気軽に弊社チームのサポートまでお問い合わせください。
"