Megu
【Shopify】Global Objectと商品メタフィールドを使って特定の商品を表示する

【Shopify】Global Objectと商品メタフィールドを使って特定の商品を表示する

2022.03.05

Shopify

そもそもメタフィールド(meta filed)とは

Shopifyには、メタフィールドという概念があります。
簡単に言うとカスタムフィールドの様なもので管理画面で指定した任意の情報をフロントに出力できる機能です。
商品・バリエーション(SKU)・コレクション・顧客・注文別に異なる情報を出力したい場合に使用します。
少し前までは、アプリを活用する必要があり使い勝手が悪かったり、そもそも認知されていないなど問題がありました。
最近のアップデートでShopifyの管理画面上から簡単に設定することができるようになり、様々な使い道が検討されている状態です。

メタフィールドで使えるデータ型

基本的な使い方や細かなデータ方の説明に関してはこちらの記事が大変綺麗にまとめてあるのでぜひご確認下さい。
※メタフィールド?使い方?という方はぜひ一読頂いた後にこのページに戻ってきていただくとわかりやすいかと思います。

Ex.商品詳細ページに任意の商品を表示する

例えば、商品詳細ページに表示されるメインの商品とは別に手動で選択した商品を表示したい場合があったとしましょう。

商品メタフィールドの追加

  1. ① Shopify管理画面>設定>メタフィールド>商品を開きましょう。
  2. ② 右上の「定義を追加する」を選択
  3. ③ 名前:任意 / ネームスペース:任意 (ex.test_fields.product_01) / 説明:任意
  4. ④ コンテンツタイプを選択する。今回は「リファレンス>商品」を選択。

たったこれだけで商品管理ページ内にメタフィールドを追加出来ます。

メタフィールド任意の商品を選択する

選択した商品を表示したい商品管理ページへ移動します。
管理画面の最下部に先程設定した名前のメタフィールドが追加されていると思います。
リファレンス・商品タイプで登録することですでに登録済みの商品を選択できるようになっているかと思います。
任意の商品を選択し、保存を押しましょう。
これだけで任意の商品に任意の商品を紐付けることが出来ました。

商品詳細ページのLiquidにメタフィールドを記述する

main-product.liquidやproduct.liquidが対象になるかと思います。
そこに先程作成時に指定したネームスペースを元に出力しましょう。

{% if product.test_fields.product_01 %}
  {% assign product01 = all_products[product.test_fields.product_01] %}
  <h2>{{ product01.title }}</h2>
{% endif %}

たったこれだけで、product01には先程管理画面で指定した商品が入り、タイトルを出力することができます。
商品詳細ページに手動おすすめ商品を出力したり、商品詳細ページをスタイリング詳細ページとしてスタッフのスタイリングに紐づく商品を並べたりなど使い道はありそうです。
ちなみに「all_products」はliquid テーマのglobal objectsです。
全商品の中から特定の商品objectを取得することができます。
その他にもこちらがglobal objectとして使用可能ですのでご確認下さい。