商品バリエーションメタフィールド

商品バリアントメタフィールド要素について

多様なバリアントを持つ多くの商品を管理しており、それぞれに特定の情報を表示する必要がある場合、商品バリアントメタフィールド要素を使用することでニーズに完璧に応えることができます。これは、顧客を効果的にターゲティングし、ストアのコンバージョン率を最適化するための強力なソリューションです。Shopifyでバリアントメタフィールドを作成し、要素を設定し、最後にページを公開するというわずか3ステップで、オンラインストアに要素を表示できます。

PageFlyをまだお持ちでない場合は、無料でインストールできますこちら。

ビデオチュートリアルをご覧ください。

または、メタフィールドに関する詳細については、Shopifyのこちらの記事をご確認ください。

Shopifyでバリアントメタフィールドを作成する方法

これは、定義の作成、メタフィールドへの値の追加、ページへの表示という3ステップでバリアントメタフィールドを作成するチュートリアルです。

1. バリアントメタフィールド定義を作成する

   • ステップ1: Shopify管理画面から、設定 > カスタムデータ > バリアントに進みます。

   • ステップ2: 「定義を追加」をクリックし、名前、名前空間とキー（任意）、説明（任意）などのフィールドに入力します。

   • ステップ3: タイプを選択をクリック > リストからメタフィールドに最適なコンテンツタイプを選択 > 検証ルールと追加設定を行います。 バリアントメタフィールドの値には、「1つの値」と「値のリスト」の2つのタイプがあります。

     • 1つの値: テキスト文字列、数値、日付など、1つのデータです。

     • 値のリスト: 単一の値のコレクションです。例えば、色のリストなどが考えられます。

   • ステップ4: 保存をクリックします。バリアントメタフィールド定義をピン留めすることで、バリアントメタフィールドを整理できます。

   
2. バリアントメタフィールドに値を追加する

   • ステップ1: Shopify管理画面から、商品管理 > 商品をクリック > コンテンツを追加したいバリアントをクリックします。

   • ステップ2: メタフィールドで、コンテンツタイプに従って表示したいコンテンツを追加します。

   • ステップ3: 保存をクリックします。

   上記のステップを繰り返して、他の商品バリアントのメタフィールドに値を追加してください。

   

PageFlyページに商品バリアントメタフィールド要素を表示する

• ステップ1: PageFlyエディタから、要素アイコンをクリック > Shopifyタブに移動 > 商品カテゴリ > 商品バリアントメタフィールド > エディタキャンバスに要素をドラッグ＆ドロップします。

  
• ステップ2: 要素を選択 > 一般タブに移動 > コンテンツ > 商品ソースとバリアントメタフィールド定義を選択します。商品詳細要素内にバリアントメタフィールドを追加する場合、商品ソースは自動に設定されます。

  
• ステップ3: バリアントメタフィールド定義から、定義を選択をクリック > モーダルでバリアントメタフィールド定義を選択 > 選択をクリックします。

  

PageFlyで商品バリアントメタフィールド要素を設定する方法

一般設定

PageFlyエディタから、商品バリアントメタフィールド要素をクリック > 一般タブ > 要素のコンテンツパラメータグループを設定します。

ATTRIBUTES、VISIBILITY、ANIMATIONパラメータに関する詳細情報は、こちらで取得することもできます。

スタイル設定

商品バリアントメタフィールド要素のスタイル設定は、こちらのPageFly要素のスタイル設定に従います。

PageFlyでバリアントメタフィールドのラベルと値を設定する方法

商品バリアントメタフィールド要素には、バリアントメタフィールドラベルとバリアントメタフィールド値の2つのサブ要素が含まれています。

バリアントメタフィールドラベル設定

このサブ要素は、バリアントメタフィールドの名前を設定します。指定されていない場合、バリアントメタフィールド定義の名前がデフォルトで適用されます。

一般設定

PageFlyエディタから、バリアントメタフィールドラベル要素をクリック > 一般タブに移動 > 入力フィールドをクリックして、バリアントメタフィールドのラベルを入力します。

スタイル設定

バリアントメタフィールドラベル要素のスタイル設定は、こちらのPageFly要素のスタイル設定に従います。

バリアントメタフィールド値の一般設定

このサブ要素は、バリアントメタフィールドの値を設定します。選択したバリアントメタフィールド定義のコンテンツタイプに応じて、バリアントメタフィールド値に該当するパラメータグループが利用可能になります。

一般設定

PageFlyは現在、15種類のコンテンツタイプをサポートしています。

日付と時刻のリスト: | パラメータ | 画像 | | :----------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | マーカータイプ（色タイプを除く） | | | マーカーの位置（色タイプを除く） | | | テキストインデント（色タイプを除く） | | | 調整: - 日付を表示 - 日付形式 - 時刻を表示 - 時刻形式 - タイムゾーンを表示 | |

スタイル設定

バリアントメタフィールド値要素のスタイル設定は、こちらのPageFly要素のスタイル設定に従います。

よくある問題

商品バリアントメタフィールド要素が表示されない

これにはいくつかの理由があります。

• 表示されている商品にバリアントがない

• 表示するバリアントメタフィールド定義を選択していない

• 要素の商品ソースが「カスタム商品」になっているが、カスタマイズする商品を選択していない

商品バリアントメタフィールド要素に「値なし」と表示される

バリアントメタフィールド定義に値がないためです。このメッセージを解決するには、Shopify管理画面 > 商品管理 > バリアント > メタフィールド > 値を定義に進んでください。

バリアントメタフィールド定義を削除する

• 「定義フィールドのみを削除」を選択した場合、要素はライブビューで通常通り表示されますが、カスタマイズしない限りバリアントメタフィールドラベルは表示されません。

• 「フィールドと保存された値を削除」を選択した場合、コンテンツはどこにも表示されなくなります。

よくある質問

1. 商品メタフィールドと商品バリアントメタフィールドの違いは何ですか？

• 商品バリアントメタフィールドは、特定のバリアントに関連する詳細を保存するために使用できます。例えば、赤と緑のバリアントがある場合、それぞれのバリアントに対して異なる情報を持つことができます。

• 商品メタフィールドは、商品に関連する詳細を保存するために使用でき、その商品のすべてのバリアントで同じになります。

追加リソース

• PageFlyでShopify商品にメタフィールドを追加する方法

• PageFlyでShopifyの商品バリアントを使用する方法