1 つのオプションに複数の画像を関連付けることはできますか?

Shopify では商品オプションに写真を追加できるため、顧客は各選択肢がどのようなものかを確認できます。ただし、Shopify の規制により、1 つのオプション値に 1 つの画像のみを関連付けることができます。では、問題は、複数の画像を 1 つのオプションにどのように関連付けるかということです。

Be Yours には答えがあり、 1 つのオプション option value に対して特定の画像を指定できます。この機能は特に色のオプションに適していますが、他の目的にも完全に使用できます。

手順:

要件
- Be Yours 4.0.0以降
- バリアントを選択した後は、[他のバリアントのメディアを非表示にする] をオフにする必要があります。このオプションは、ネイティブの Shopify 動作と互換性があり、1 つの画像のみを 1 つのオプション値に関連付けます。
  Be Yours では、このオプションは次のセクションで使用できます。
  - 注目の製品セクション
  - 製品情報セクション (製品ページ)
  - 製品情報セクション (製品モーダル上)
オプションを選択してください
管理画面で製品を確認し、画像を分類するオプションを選択します。以下の例では、 Colorを選択することにしました。私の製品には黒、緑、ピンクの色があり、ユーザーがオプション値を選択したときにのみそれぞれの画像を表示したいと考えています。
画像のALTタグを編集する
alt タグを編集して、画像が属する「オプション名とオプション値」を指定する必要があります。
1. 画像上にカーソルを置き、6 つの点のボタンをクリックして画像の情報を開きます
2. 「代替テキストを追加」をクリックします
3. 選択したオプション名とオプション値を組み合わせて使用します。ここでの構文は非常に重要であり、次の順序で指定する必要があります。
  # （ハッシュタグ文字）
  option-name (小文字、すべてのスペースをハイフンに置き換えます)
  _ (アンダースコア文字)
  option-value (小文字、すべてのスペースをハイフンに置き換えます)
  
  たとえば、 [カラー]オプションを選択し、画像を黒色に関連付けたい場合、代替テキストは#color_blackにする必要があります。
  注:
  Be Yours バージョン 7.2.0以降、複数のオプション画像機能で複数の言語がサポートされています。
  以下の英語とフランス語の例を見てください。オプション名は英語で「Color」、フランス語で「Couleur」、オプション値は英語で「Black」、フランス語で「Noire」です。
  ALT テキストを追加する画像をクリックした後、ALT テキストを設定します: #en:color_red,fr:couleur_noire
  その方法は次のとおりです。
  - 言語コードを含める: 各色の名前の前に言語コードを追加し、その後にコロン (:) を付けます。
  - 各言語ペアをカンマで区切る:各言語ペアをカンマ (,) で区切ります。これは、1 つの言語ペアの終わりと次の言語ペアの始まりを示します。
4. 「代替テキストを保存」をクリックして変更を保存します
5. 他の画像にも同様の処理を行います
独自の代替テキストを設定 (または保持)
SEO 目的で使用する独自の alt を設定 (または維持) したい場合はどうすればよいですか?次のように、 # 文字の前のalt フィールドに何かを追加するだけです。
ほとんどのクライアントが SEO を気にしていることは承知しています。上記の手順に従ってすべての画像に alt タグを追加することで、SEO の効率を向上させることができます。
SEO: AVADA の Image Optimizer Page Speedは、検索結果で競合他社を上回るための画像 SEO に強く推奨されるアプリです。このアプリは、次のような自動化により SEO を簡単に活用します。
- 画像の ALT/メタタグ/JSON-LD を Google 検索に適したものに最適化します。
- 品質を損なうことなく画像サイズを最適化し、Web サイトを高速化します。
>> SEO: Image Optimizer Page Speedの詳細を今すぐご覧ください。