メタフィールドのちょっと便利なTips

Shopifyのメタフィールドで、お客様（ストア運営者）のご希望が多いところを紹介します。

任意の商品へのリンクを追加するメタフィールド、表示用セクションファイルのコードも解説。 本講座の復習・総仕上げにもなる内容ですので、一緒に作ってみてください。

管理画面上での、メタフィールドの順番を変える

メタフィールドを複数作ると「こっちを上に表示させたい」というものが出てきます。 が、メタフィールドの並び順については、メタフィールドの定義からも、商品などの登録・編集画面でも設定できません。

設定できるのは「ピン止め」の有無だけなので、これを使って順番を変えます。 ちなみに、ピン止めとは登録・編集画面内でメタフィールドを表示するか、「全て表示」をクリックしないと表示しないかを決める機能です。

メタフィールドでは、ピン止めしたのが新しいものほど、上に表示されます。 表示順を変えたい時は、この仕組みを使って1つずつ並べ直していきます。

1.メタフィールドのピン止めを全てOFFにする 2.１番下に表示させたいメタフィールドをピン止めする 3.〇〇メタフィールドの定義の左のをクリック（保存する） 4.設定したいメタフィールド名をクリック 5.下から２番目に表示したいメタフィールドをピン止め 6.〇〇メタフィールドの定義の左のをクリック（保存する）

…と1つずつ設定すると、メタフィールドを好きな順番に並び替えることができます。 をクリックして、画面を切り替えることで、ピン止めした履歴を保存しているイメージです。画面切り替えを省くと、リロードした時に設定した順番と違う表示になってしまうことがあるので注意してください。

メタフィールドの数が多いと地味に面倒ですよね。 最初から下に表示したいメタフィールドから定義（作成）するか、最後にまとめて順番の変更をするのがおすすめです。

メタフィールドで特定の商品へのリンクを作る

商品ページ内に、関連する特定の商品へのリンクを表示したいケースもあります。 アパレル系ECだと「モデルコーディネイト使用商品」、食品系だと「この商品におすすめの紅茶」など、コレクションやタグで設定するのはちょっと…という時には、メタフィールドを使うと便利です。

1.メタフィールドを定義

まず、商品メタフィールドを追加しましょう。

名前、ネームスペースとキーは、任意で設定してください。 コンテンツタイプ「商品」に、その下で「商品のリスト」を選びます。

2.メタフィールドを使って商品を選択

メタフィールドを設定したい商品の編集ページを開きます。

作成した商品リストの、入力箇所をクリック。 「商品を選択」をクリックして、商品ページ内に表示させたい商品を設定します。

3.テーマのコードを編集（セクション作成）

商品リストの場合、テーマカスタマイズ画面の「動的ソースを挿入」から一発で表示させるのは難しいです。コード少し触る必要があります。

販売ストア > オンラインストアから、コード編集画面を開きます。 新しいセクションを追加する、からセクションを新規作成。 ファイル名はlesson-metafield.liquidとしました。

lesson-metafield.liquidの中身をまるごと、以下のコードに置き換えてください。

{%  if product.metafields.item.relate != blank %}
  <div class="page-width"> 
      <div class="grid"> 
        {% for item in product.metafields.item.relate.value %}
          <div style="flex: 1;">
            <a href="{{ item.url }}">
              <img src="{{ item.featured_image | img_url: 'large' }}" style="max-width: 100%;">
            </a>
            <h3>{{ item.title }}</h3>
            <p>{{ item.price_min | money }} ～</p>
          </div>
        {%- endfor %}
      </div>
  </div>
{% endif %}

{% schema %}
  {
    "name": "メタフィールド商品リスト",
    "settings":[] ,
    "presets": [
      {
        "name": "メタフィールド商品リスト"
      }
    ],
    "templates": ["product"]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

商品メタフィールド（product.metafields.item.relate）が空でない場合は、登録されている情報をループで取り出して表示しています。 schemaのtemplatesは、このセクションを使用できるテンプレート（ページ）の指定です。今回の場合だと、商品ページのみで使えるように制限している形です。

注意点は、メタフィールドのタイプが“商品リスト”になっていること。 リストタイプの場合、for文ではvalueプロパティを使用する必要があります。

4.テーマのカスタマイズ画面から追加

セクションのLiquidファイルを上書き保存。 テーマのカスタマイズ画面 > デフォルトの商品を開きます。

セクションを追加、から作成した「メタフィールド商品リスト」を選びます。

メタフィールドで選択した商品が表示されれば成功です！ HTML/CSSを変更・追加して、お好きにレイアウトやデザインを変更してください。

今回は商品メタフィールドで行いましたが、同様にブログやページのメタフィールドを設定すると「このページで紹介した商品はこちら」のようなリンクを作ることも可能です。 ストアオーナー（ECサイトの運営者）も手軽に設定できて、便利ですね。