【Shopify】メタフィールドを使って管理画面に入力項目を追加する方法

概要

この記事ではShopifyのメタフィールドという機能を使って、管理画面の記事やページの投稿画面に入力項目を追加する方法を紹介します。

メタフィールドとは

管理画面にはデフォルトで用意されていない入力項目を独自に追加できる機能です。
こちらを利用することでShopifyの機能や見た目をカスタマイズすることができます。

管理画面への追加方法

管理画面のサイドメニューの設定からメタフィールドを選択します。

img-blog-20220625001-001.jpg

img-blog-20220625001-002.jpg

どのフィールドにメタフィールドを追加するか選択します。
(ここでは例としてブログにメタフィールドを追加)

「定義を追加する」ボタンから新しいメタフィールドを追加します。

img-blog-20220625001-003.jpg

各項目に必要な情報を入力します。

  • 名前:管理画面に表示される入力項目名
  • ネームスペースとキー:後述するLiquidで出力する際に使用する名前(作成後の変更不可)
  • 説明:管理画面に表示される説明文
  • API公開:APIとして外部に公開するかどうか(ストアフロントAPIを利用しないのであればチェック不要)
  • コンテンツタイプ:管理画面に表示される入力項目の種類(作成後の変更不可)

img-blog-20220625001-004.jpg

「保存」ボタンを押すとメタフィールドが追加されます。

img-blog-20220625001-005.jpg

編集画面などに入力項目が追加されます。

img-blog-20220625001-006.jpg

Liquidを使って出力する方法

管理画面で入力したメタフィールドの内容はLiquidに出力するコードを追記することでショップの各画面に表示することが可能です。

まず、管理画面のメタフィールドの定義を確認し、どのような名前で取得できるか確認します。

img-blog-20220625001-007.jpg

あとは、対象の名前をLiquidに記載することで画面上に出力することができます。

テキスト

<h1>{{ blog.metafields.my_fields.page_title }}</h1>

画像

<img src=“{{ blog.metafields.my_fields.main_visual | img_url: 'master' }}” alt=“” />

参考

ブログ一覧
Contact

お問い合わせ

「ランディングページを制作してほしい」、「Wordpressを使って更新性の高いWebサイトを作りたい」、
「JavaScriptを用いてWebサイトにリッチな表現を取り入れてほしい」などお客様の様々なご要望にお応えいたします。
また、デザインのみ、コーディングのみ行ってほしいといったご依頼にも柔軟に対応できます。
まずはお気軽にお問い合わせください。