動的ソースとメタフィールドを使用してカスタマイズを活用する

"

場合によっては、指定した情報を含む商品を個別に表示したい場合があります。 Be Yoursテーマでは動的ソースに接続できるため、メタフィールドを通じて製品ごとに異なる情報を作成できます。

この記事では、動的ソースをメタフィールドに接続し、カスタマイズを活用する方法を説明します。

このページでは

新しいメタフィールド定義の追加

標準またはカスタムのメタフィールドを適用するには、この最初のステップを実行する必要があります。メタフィールド定義を追加する方法に関する Shopify の手順の詳細については、こちらをご覧ください。

ここでは、製品機能のカスタマイズされた概要を表示するために、新しいメタフィールド「製品特性」を作成する例を取り上げます。メタフィールド「製品特性」を追加する手順は次のとおりです。

  1. Shopify 管理者ダッシュボードで、 [設定] > [メタフィールド]をクリックします。
  2. 新しいフィールドを追加するストアの部分を選択します。たとえば、新しいフィールドをProductsに追加します。
  3. 製品を選択した後、右上隅にある「定義の追加」ボタンをクリックします。
  4. [製品メタフィールド定義の追加]ボックスで、次のような新しいメタフィールド「製品特性」の詳細を設定します。
    • 名称: 製品の特徴
    • 名前空間とキー:custom.product_characteristics (挿入された名前に基づいてデフォルトの名前空間とキーを保持することも、変更することもできます)
    • 説明(オプション): 「製品を説明するための重要な情報を追加します。」という説明行を追加します。
    • このメタフィールドを Storefront API リクエストに公開します(オプション)
    • コンテンツ タイプの選択: 行テキスト、整数、日付と時刻、ファイルなど、さまざまなコンテンツ タイプがあります。この例では、複数行テキストを選択します。
    • このメタフィールドに 1 つの値のみを保存できるようにするか、複数の値を保存できるようにするには、「 1 つの値」または「値のリスト」を選択します。
    • 適用可能な場合は、検証ルールを追加します。次に、 「保存」をクリックします。

動的ソースを接続して製品にメタフィールド値を割り当てる

新しいメタフィールド定義を追加した後の次のステップは、このメタフィールドに指定された値をさまざまな製品に割り当てることです。たとえば、製品「Calathea Stromanthe Triostar」の主な特徴を表示したいとします。その方法を次に示します。

  1. Shopify 管理者ダッシュボードで、 [製品]をクリックし、指定した情報を含む製品を選択します。製品のフィルターバーに製品名を貼り付けると、リスト内の製品をより迅速に検索できます。
  2. 製品をクリックして編集ウィンドウを開きます。ここから、一番下までスクロールし、メタフィールドバーの[すべて表示]ボタンをクリックします。
  3. 次に、既存のすべてのメタフィールドを使用して値を挿入できるようになります。リクエストの例によれば、「製品特性」フィールドにいくつかの重要な情報を追加します。たとえば、「祈りの植物の家族。」というテキストを挿入します。暖かく湿気の多い条件と、水はけの良い肥沃な土壌で最もよく育ちます。」次に、 「保存」をクリックします。
  4. [オンライン ストア] > [テーマ] に移動し、 [Be Yours ] テーマを選択し、テーマのボタン[カスタマイズ]をクリックします。
  5. 上部のナビゲーション バーで、テンプレート[製品] > [デフォルトの製品]を選択します。 [製品情報]セクションで、 [ブロックの追加] をクリックして、折りたたみ可能なタブブロックを追加します。目的の位置までドラッグできます。
  6. 折りたたみタブ構成では、アイコンや見出しを設定できます。
  7. このブロックの手順 3 で追加した重要な情報を表示するには、 [タブの内容]フィールドのデフォルトのテキストを削除し、 [動的ソースの挿入]アイコンをクリックします。次に、動的ソース リストで製品特性を選択し、最後に[挿入] をクリックします。
  8. その結果、商品「カラテア・ストロマンテ・トリオスター」について指定された商品特性情報が表示される。

注:

    • 新しく作成したメタフィールドに割り当てられた情報を表示する別の製品に対して、手順 3 を繰り返す必要があります。
    • セクションまたはブロックがメタフィールドをサポートできるかどうかを確認するには、動的ソースの挿入アイコンがあるかどうかを確認します。動的ソースは通常、テキストや折りたたみ可能なタブなどのブロック タイプで使用できます。
      • 以下の動的ソースの挿入アイコンが表示される場合、接続できるメタフィールドは 1 つだけです。
      • プラスの付いた動的ソースの挿入アイコンが表示される場合は、最大 20 個のメタフィールドを接続できます。

この記事がお役に立てば幸いです。この機能についてご不明な点がございましたら、サポートが必要なため、お気軽に弊社チームまでお問い合わせください。

"
{{ タイトル }} に戻る