メタフィールドで画像を表示させる

メタフィールドを使うと個別に特定の情報を持たせることができます

今回は画像を使った場合の表示の仕方について解説します！！

ちなみにメタフィールドで選択できるタイプの中に画像はないのでファイルを使います

今回の記事では商品にメタフィールドを持たせてそれを表示させてみます

画像を表示させるコード

メタフィールドの画像を表示させるにはこちらのコードを使います

<h2>ファイル</h2>
<div>
  {{ product.metafields.custom.image-single | image_url: width: 200 | image_tag: loading: "lazy", class: "c_img"}}
</div>

<h2>ファイル（リスト）</h2>
{% for image in product.metafields.custom.image-list.value %}
  <div>
    {{ image | image_url: width: 200 | image_tag: loading: "lazy", class: "c_img"}}
  </div>
{% endfor %}

ファイルリスト（複数の画像を選択できる方）の場合はfor文を使う必要があります！（「.value」を忘れずに）

画像の表示はimage_urlフィルターを使います
画像の表示方法はこちらの記事で詳しく解説しているので参考にしてみてください

では、実際にメタフィールドを使って画像を表示させる手順について解説します

メタフィールドを定義

まずはメタフィールドを管理画面にて定義します

手順としては以下の手順で設定していきます

• ①設定
• ②カスタムデータ
• ③商品
• ④定義を追加する
• ⑤メタフィールドを定義する

①設定

②カスタムデータ

③商品

④定義を追加する

⑤メタフィールドを定義する

まず初めに「１つのファイル」を定義します

メタフィールドの定義では画像に限らずの以下の項目を入力します！

• 名前（例. 画像（１つのファイル））
• ネームスペースとキー （例. custom.image-single）
• タイプを選択します（例. ファイル→１つのファイル）
• 検証（例. 特定の種類のファイルを受け入れる→画像のみ）
  →今回は画像の出力ですので画像以外は選択できないようにします

続けて、④の手順に戻り複数画像が選択できる「ファイルのリスト」の方も定義します！

これでメタフィールドの定義は完了です！

商品管理にて画像を選択

商品の一番下にメタフィールドのフォームがあるのでこちらで画像を選択します

はい、これで管理画面側の設定は完了です！あとは画像を表示させるだけです

コードで画像を表示させる

<h2>ファイル</h2>
<div>
  {{ product.metafields.custom.image-single | image_url: width: 200 | image_tag: loading: "lazy", class: "c_img"}}
</div>

<h2>ファイル（リスト）</h2>
{% for image in product.metafields.custom.image-list.value %}
  <div>
    {{ image | image_url: width: 200 | image_tag: loading: "lazy", class: "c_img"}}
  </div>
{% endfor %}

こちらのコードをsections > main-product.liquid内に記載します！

わかりやすいように1行目に記載します

商品詳細ページで確認していただくと以下のような表示になります！

コードの解説

<!-- ファイル -->
{{ product.metafields.custom.image-single | image_url: width: 200 | image_tag: loading: "lazy", class: "c_img"}}

<!-- ファイル（リスト） -->
{% for image in product.metafields.custom.image-list.value %}
  {{ image | image_url: width: 200 | image_tag: loading: "lazy", class: "c_img"}}
{% endfor %}

product.metafields.custom.image-singleの部分が
メタフィールドにアクセスするキーになってて以下の部分を丸っとコピペでOKです

また、ファイルリスト（複数の画像を選択できる方）では配列になっているのでfor文を使って配列の要素を１つずつ出力する必要があります

注意！！

また、画像の表示方法はこちらの記事で詳しく解説しているので参考にしてみてください

ノーコードでも表示できる

ノーコードでもメタフィールドが使えます！

セクションの画像を選択する箇所で
「動的ソースを接続」からメタフィールドが選択できます！

注意！！

ストアフロントにチェックを忘れずに！！

まとめ

設定方法さえ分かれば意外と簡単ではなかったでしょうか？

個人的に「動的ソースを接続」を使えばノーコードでもメタフィールドを表示できるって事を初めて知った時、ものすごく感動しました！Shopifyすごい！！

最後に補足ですが、商品詳細ページ以外で商品のメタフィールドを読み込むには
productオブジェクトが読み込む必要がありますのでご注意を！

メタフィールドが使いこなせると実装の幅が広がってくるので、 ぜひこの機会にマスターしてください！

各種リンク

• メタフィールド
• メタフィールドの使い方
• productオブジェクト