オンラインストア上でメタフィールドを表示する

メタフィールド定義を追加して、ストアの構成部分にメタフィールドの値を割り当てた後は、メタフィールドとテーマを連携させることによって、さまざまな方法でオンラインストアに特定の情報を表示できるようになります。たとえば、キャンドルの販売者は商品ページにキャンドルの燃焼時間を表示したいと考え、食料品店は缶詰の賞味期限を表示したいと考える場合があります。

オンラインストアに表示できる特別な情報としては、他にも以下のような例が挙げられます。

  • 型番
  • 色見本
  • 商品の発売日
  • 特集商品またはバリエーション
  • 商品の星評価
  • ダウンロードファイル
  • 原材料リスト
  • カテゴリーメタフィールドのコンテンツ

Online Store 2.0のテーマを利用している場合、テーマエディタを使用して、ほとんどのメタフィールドとテーマを連携させることができます。以前のテーマを利用している場合、またはテーマで使用できないメタフィールドタイプを追加したい場合は、テーマコードを編集するか、Shopifyパートナーを雇ってサポートを受けることができます。Shopifyパートナーを雇うことについて詳しくはこちらをご覧ください。

一部の標準的な商品カテゴリーには、利用可能なカテゴリーメタフィールドがあります。たとえば、商品カテゴリーを「アパレル・アクセサリー > 衣料品 > トップス > シャツ」と追加した場合、「サイズ」、「ネックライン」、「袖丈の種類」、「トップス丈の種類」、「年齢層」、「布・生地」、「ターゲットの性別」、「服の特徴」、「」に関するカテゴリーメタフィールドを追加できます。カテゴリーメタフィールドには、デフォルトのメタオブジェクトエントリーが存在します。このエントリーは、そのまま使用することも、カスタマイズして使用することもできます。たとえば、「」という色がブランディングに沿わない場合、「グラファイト」という名前に変更することができます。カテゴリーメタフィールドについて、詳しくはこちらをご覧ください。

カテゴリーメタフィールドは、お客様が必要な商品をすぐに見つけることができるよう、オンラインストアで使用します。バリエーションのオプションとして色エントリーを使用する場合、オンラインストアの商品ページでテーマオプションから選択して、見本としてバリエーションのオプションを表示できます。ストアフロントにメタフィールドを追加する場合、商品カテゴリー別に絞り込み、そのカテゴリーに関連付けられているメタフィールドを結果に表示することもできます。

カテゴリーメタフィールドをオンラインストアに表示することもできます。たとえば、テキストブロックを追加し、「布・生地」のカテゴリーメタフィールドを関連付けることで、商品に使用されている布・生地を表示することができます。

テーマエディタを使用してメタフィールドとテーマを連携させる

テーマがメタフィールドをサポートしている場合、テーマエディタを使用してオンラインストア上でメタフィールドを表示させる方法を選択できます。テーマで利用可能なメタフィールドを確認するには、テーマのドキュメントを参照するか、テーマの開発者にお問い合わせください。

動的ソースをサポートしているセクションまたはブロックを追加して、メタフィールドとテーマを連携させることができます。たとえば、[商品情報] セクションは商品メタフィールドをサポートしており、[コレクション] セクションはコレクションメタフィールドをサポートしています。

セクションまたはブロックを追加した後、[動的ソースを接続] のアイコンをクリックして、単一のメタフィールドを検索および選択できます。

「動的ソースを連携する」のアイコン

「動的ソースを接続する」のアイコンに [+] が表示される場合、アイコンをクリックして一度に1個のメタフィールドを選択すると、1個のテンプレートに対して最大20個のメタフィールドを検索して追加できます。

「動的ソースを挿入する」のアイコン

ステップバイステップの手順については、「メタフィールドと動的ソースを使用する」を参照してください。

コンテンツタイプのリスト[テキスト] セクションや [リッチテキスト] セクション、ブロックに連携させることができます。商品参照リストには、カスタムセクションや商品リスト設定を使用するサードパーティのテーマが必要です。

テーマコードを編集してメタフィールドを追加する

テーマコードを編集してオンラインストア上でメタフィールドを表示する場合、Liquidを使用してページテンプレートのメタフィールド参照することができます。

コーディングの経験がある場合にのみテーマコードを編集してください。テーマコードの編集でサポートが必要な場合は、Shopify Partner Directoryから、Shopifyパートナーを雇う必要があります。Shopifyパートナーを雇うことについて詳しくはこちらをご覧ください。

メタフィールドでブランドアセットを表示する

メタフィールドを使用して、ブランドアセットをオンラインストアに表示することができます。ブランドアセットはデフォルト設定として使用されます。つまり、追加されたブランドアセットは、ブランドAPIを使用する機能と自動的に同期されます。

ShopifyのOnline Store 2.0のテーマでは、テーマ設定でブランドアセットを使用できます。テーマエディタを開いて、ブランドアセットを手動で接続する必要があります。ブランドアセット (ストアヘッダー内のロゴなど) を使用するテーマ設定を見つけて、[動的ソースを接続] ボタンをクリックします。

テーマを設定するウィンドウ内にあるロゴの画像選択画面で、動的ソースへの接続ボタンが強調表示されている画像。

ヘッダーで使用するブランドアセットをクリックして、テーマに接続します。

デフォルトのロゴが選択された動的ソースへの接続パネル。

ブランドアセットを接続するオプションが存在しない場合は、アプリ、チャネル、またはテーマがブランドAPIと統合されていない可能性があります。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す