Shopifyでリッチテキストのメタフィールドをフロントに表示するコードの紹介

今回はShopifyで2023年に追加されたリッチテキストというメタフィールドをフロントに表示するコードを紹介します。

まずは管理画面でメタフィールドを設定し、テキストを入力し保存します。

ブログ記事内で以下のコードを貼り付けます。

  <section>
    <div>
        {% assign data = article.metafields.custom.cooking_intro.value %}
        {% for child in data.children %}
          {% if child.type == "heading" %}
            <h{{ child.level }}>{{ child.children[0].value }}</h{{ child.level }}>
          {%  elsif child.type == "paragraph" %}
            <p>{{ child.children[0].value }}</p>
          {% endif %}
        {% endfor %}
    </div>
  </section>

上記だけでは納品レベルには達していません。リンクやBoldタグの実装も必要にはなります。最低限のhタグとpタグだけですが、誰かの助けになればと思います。

検索用：Shopify liquid metafields rich text code