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

公開
メタフィールドで画像を表示させる、使いこなして構築の幅を広げよう


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

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

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

メタフィールドの定義する画面

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

画像を表示させるコード

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

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

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

メタフィールドを定義

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

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

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

①設定

設定

②カスタムデータ

カスタムデータ

③商品

カスタムデータの商品

④定義を追加する

定義を追加する

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

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

「1つのファイル」を定義

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

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

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

「ファイルのリスト」を定義

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

商品管理にて画像を選択

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

商品管理のメタフィールドの入力箇所

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

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

<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行目に記載します

main-product.liquid

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

商品詳細ページの表示

コードの解説

<!-- ファイル -->
{{ 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文を使って配列の要素を1つずつ出力する必要があります

注意!!

ファイルリストの場合キーの最後に「.value」をつけないとfor文が機能しないので画像が表示されません

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

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

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

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

注意!!

メタフィールドを定義する際、アクセスのストアフロントにチェクがないとノーコードでは選択できません

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

アクセスのストアフロントにチェック

まとめ

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

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

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

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

各種リンク

블로그로 돌아가기