※使用テーマは『Dawn』

アプリでカスタムフィールドを作ろうという記事を作成、投稿してから一ヶ月も経ってないのに、もうブログとかページとかにカスタムフィールドが作れるようになってる…早い、早すぎる…。

ということで、メタフィールドでカスタムフィールドを作ります。とはいえ、あまりにも簡単すぎるのでスクショは省略します。

１．カスタムフィールドを作成する

１－１．『設定』にある『メタフィールド』を選択する

１－２．カスタムフィールドを追加したいタイプを選択する

例）
ブログ記事

１－３．『名前』、『ネームスペースとキー』、『説明』、『コンテンツタイプ』を設定する

例）
名前：おすすめ商品
ネームスペースとキー：articles_field.pickup_product
説明：おすすめ商品を設定します
コンテンツタイプ：リファレンス→商品
※複数選択可能なフィールドにする場合は、『値のリストを承認する』チェックボックスにチェックを入れる

１－４．保存する

２．カスタムフィールドを設定する

２－１．販売チャネルからブログ記事を選択し、カスタムフィールドを設定したいブログ記事を選択する

２－２．メタフィールドの『すべて表示』を選択する

２－３．商品を選択する

例）
・某文房具メーカーのボールペン
・某文房具メーカーの蛍光マーカーペン

２－４．保存する

３．カスタムフィールドで設定した値を出力する

今回はブログ記事に『おすすめ商品』というカスタムフィールドを出力させるので、用意するものは以下の通りです。

３－１．『販売チャネル』から『オンラインストア』を選択し、『テーマ』を選択する

３－２．『現在のテーマ』の『アクション』から『コードを編集する』を選択する

３－３．『Locales』から『ja.schema.json』を選択する

３－４．『ja.schema.json』の"main-article"に以下の内容を記述する

        "product_buy": {
          "name": "商品購入ボタン",
          "settings": {
            "heading": {
              "label": "見出し"
            },
            "button_label": {
              "label": "ボタンのラベル"
            }
          }
        }

３－５．『Sections』から『main-article.liquid』を選択する

３－６．『main.articles.liquid』に以下の内容を記述する

※『～～ 省略 ～～』はその名の通り省略しているだけなので、『～～ 省略 ～～』は記述しないでください

～～ 省略 ～～

{%- when 'product_buy' -%}
  <div class="article-template__product_buy page-width page-width--narrow article-product_buy"
    <h2 class="h2">{{ block.settings.product_buy_heading }}</h2>
    <ul class="product_buy_list">
      {% assign metafields = article.metafields.article_fields.products %}
      {%- for metafield in metafields.value -%}
        <li class="product_buy_item">
          <p class="product_buy_item_image">
            {%- if metafield.featured_image != blank -%}
              <img src="{{ metafield.featured_image | img_url: 'master' }}" alt="{% if metafield.featured_image.alt != blank %}{{ metafield.featured_image.alt }}{% else %}{{ metafield.title }}{% endif %}">
            {%- else -%}
              <img src="https://placehold.jp/150x150.png" alt="{{ metafield.title }}">
            {%- endif -%}
          </p>
          <p class="product_buy_item_title">{{ metafield.title }}</p>
          <p class="product_buy_item_button_wrap">
            {{ block.settings.product_buy_button_label | link_to: metafield.url }}
          </p>
        </li>
      {%- endfor -%}
    </ul>
  </div>

{%- when 'content' -%}
～～ 省略 ～～

{% schema %}
{
～～ 省略 ～～
    {
      "type": "product_buy",
      "name": "t:sections.main-article.blocks.product_buy.name",
      "settings": [
        {
          "type": "text",
          "id": "product_buy_heading",
          "label": "t:sections.main-article.blocks.product_buy.settings.heading.label",
          "default": "見出し"
        },
        {
          "type": "text",
          "id": "product_buy_button_label",
          "label": "t:sections.main-article.blocks.product_buy.settings.button_label.label",
          "default": "ボタンのラベル"
        }
      ] 
    }
～～ 省略 ～～

３－７．『section-blog-post.css』や『component-custom-field.css』でスタイルを整える

これで完成です！

ここまでお付き合いいただき、ありがとうございました！
お疲れ様でした～。

４．コード解説

３－６のコードの解説だけします。他のところの解説もしてほしいという方がいらっしゃいましたら、コメントしてください。

  <div class="article-template__product_buy page-width page-width--narrow article-product_buy"
    <h2 class="h2">{{ block.settings.product_buy_heading }}</h2>
    ～～ 諸略 ～～
  </div>

他のデザインと合わせつつ、セクションのブロックで設定した見出しを出力するようにしています。

    <ul class="product_buy_list">
      ～～ 省略 ～～
    </ul>

おすすめ商品をリスト化するために<ul>タグを使用していますが、別に<div>タグでもいいと思います。その場合、下は<li>タグではなく、別のHTMLタグを使用する必要があるので気を付けてください。

      {% assign metafields = article.metafields.article_fields.products %}

metafieldsという変数を用意し、その変数に１で作成したカスタムフィールドの情報を格納しています。

      {%- for metafield in metafields.value -%}
        <li class="product_buy_item">
          <p class="product_buy_item_image">
            {%- if metafield.featured_image != blank -%}
              <img src="{{ metafield.featured_image | img_url: 'master' }}" alt="{% if metafield.featured_image.alt != blank %}{{ metafield.featured_image.alt }}{% else %}{{ metafield.title }}{% endif %}">
            {%- else -%}
              <img src="https://placehold.jp/150x150.png" alt="{{ metafield.title }}">
            {%- endif -%}
          </p>
          <p class="product_buy_item_title">{{ metafield.title }}</p>
          <p class="product_buy_item_button_wrap">
            {{ block.settings.product_buy_button_label | link_to: metafield.url }}
          </p>
        </li>
      {%- endfor -%}

カスタムフィールドの情報をループしながら取得しています。
metafieldという変数ですが、実際はproductオブジェクトです（ややこしい）。
なので、titleやfeatured_image、urlなどが使えます。

参考サイト