メタフィールドを設定すると通常では管理画面で取り込めない情報を登録することができます。
コンテンツタイプでファイルを選択すると画像ファイルも登録することができます。
Liquidでメタフィールドに保存した画像ファイルの表示方法をまとめます。
メタフィールドの定義
管理画面の メタフィールドページで、メタフィールド定義を追加します。
コンテンツファイルはファイルを選択します。
詳しくは以下を参照
https://help.shopify.com/ja/manual/metafields/metafield-definitions
画像ファイルの表示
定義したメタフィールドに画像を追加したら、Liquid でメタフィールドに登録した画像を表示します。
<img src="{{ blog.metafields.custom.picture | img_url: 'master' }}" alt="picture">
オブジェクト部分の書き方は以下のような形式です。
- 構成部分 （商品product、ブログblog など）
- ネームスペース デフォルトは
custom - キー 任意の文字列
構成部分.metafields.ネームスペース.キー
また、src属性に埋め込むためにimg_urlフィルターを適用し、サイズを指定します。
今回、master を指定しましたが、これは元画像のサイズを取得します。
サイズの調整方法は以下の記事が参考になります。
https://ec-penguin.com/blogs/shopify/modify-img-url-size-liquid