Shopifyの商品詳細ページとカスタムフィールドに関して:メモ

Cat WEBサイト構築Tag by cubismer
窓辺

調べながらなのでメモ的に。調べが足りず間違っている可能性があります。

[追記:2020.9.7]

上記ページにて、カスタムフィールド(メタフィールド)を管理画面から管理できるようになるという展望がだされています。
パートナー向けイベントの内容を見ていないのと公式ブログの記事もないようなので具体的にいつどうなるのかはわかりませんが、カスタムフィールドの利便性はますかと思われます。

[追記:2021.2.10]

上記にて、既存アプリのMetafields guruの有料プランであれば、ブラウザの拡張機能という形で管理画面内にメタフィールドの欄を追加できることがわかりました。

[追記:2021.7.15]
アプリを使わずにある程度の範囲(段階的に拡張予定?)のメタフィールドがShopifyのダッシュボードから操作可能になりました。
まだ対応したテーマは開発ストアでしか使えないようですが、今後は当記事の内容は古いものとなりますので、読まれる方は留意ください。

[追記:2022.1.12]
Shopifyのダッシュボードから操作可能なメタフィールドが増えたため以下の5つが利用可能になりました。

  • 商品
  • バリエーション
  • コレクション
  • 顧客
  • 注文

ただし現状ではストアやブログやページに関しては対応するかどうかに関しては情報が見つからず、それらに対するメタフィールドを利用する場合は、引き続きアプリが必要になると思われます。

管理画面内の商品詳細入力ページのカスタマイズ

  • 管理画面の商品詳細入力ページに、入力項目を付け加えたい

上記の要望に関しては、調べた範囲では以下のようになります。

  • テーマ用のliquidファイルは、管理画面内のテーマエディタの範囲は触れるが、商品登録ページに対して入力欄を追加するなどの影響を与えることはできない
  • Metafields guruの有料プランのようにブラウザ拡張機能という形であれば可能

ユーザーに表示する商品詳細ページのカスタマイズ

  • ユーザーに表示する商品詳細ページに何らかの項目を追加したい
  • 作成した項目の内容変更などが必要な場合、管理画面の商品詳細入力ページは使わなくてもいい

上記の要望に関しては、調べた範囲では以下のようになります。

アプリを使ってカスタムフィールドを追加して対応

以下の2つの方法が考えられます。(これ以外にもあるかもしれません)

アプリでカスタムフィールド自体を作成し管理する

Custom Fields

無料プランでは作成できる数や種類に制限がある(テキストは入力できるが画像はアップロードできないなど)。
入力はhttps://customfields.bonify.io/というアプリ開発会社のドメイン内の管理画面を利用して行うことになる。

表示方法は以下の2種類。

  • 本来のテキスト欄下に自動で表示
  • liquidファイルに記述して任意の場所に表示

自動で表示させる場合は以下の手順が必要。

  1. 「商品管理」の「その他の操作」などから Custom Fields の管理画面に移動
  2. ProductsのConfigure Fieldsでカスタムフィールドを作成しておく
  3. ProductsのInstallを選び、Install Custom Fields For Productsのボタンを押す

上記の Install Custom Fields For Products を押さないと自動で表示されないので注意。

Metafields Guru
  • 自分のshop内で操作ができる(アプリ開発会社のドメインに移動しなくてよい)
  • 「アプリ管理」から管理画面に移動可能
  • 有料プランであればブラウザ拡張機能という形でSｈopifyの管理画面内にメタフィールドの入力欄を追加可能
  • ビジュアルエディターに切り替え可能なので、テキスト一文だけしか入れられないというわけではない
  • 自動表示はない(はず)ので、自分で表示用タグを設定する必要がある

CSVで管理してインポートにアプリを使う

カスタムフィールドの作成はCSVで行いますが、このCSVは通常のインポート画面ではインポートできないため、インポートのためにアプリを使うという方法です。
長くなるので別記事に書きました。

liquidテンプレートに入力欄を記述して対応

liquidテンプレートに入力欄を直書きする方法ですが、こちらも長くなるので別記事に。

テーマエディタで使えるセクションで作る方法もあると思いますが、そちらはまだためせていないのでまた後日の予定。

カスタムフィールドの出力方法

商品ページに登録したカスタムフィールドの値を出力するには以下のように記載します。


{% comment %} namespaceにhoge、キーにfugaを設定した場合 {% endcomment %}
{{ product.metafields.hoge.fuga }}

参考

メタフィールドとカスタムフィールド

メタフィールドを使用して、商品、お客様、注文などのオブジェクトにカスタムフィールドを追加できます。メタフィールドは、部品番号、お客様の敬称、ブログ記事の要約など、特定の情報を保存する際に役立ちます。これらの情報をアプリやチャネルで利用して社内用としてデータを追跡できます。

Shopifyとしては、まずメタフィールドがあって(あるいは新規に作成される？)、そのメタフィールド内にカスタムフィールドを作成して利用できるという流れの模様。
メタフィールドとカスタムフィールドは同義でない(はず)。

カスタムフィールドの値は文字列として出力される

カスタムフィールドに数値を入力しても、出力されるのは文字列として数字になる。

そのため比較演算子などで数値での条件を記載しても動作しない。

この件は別記事に記載。

共通する問題

カスタムフィールドは、アプリで追加してもliquidに記述して追加しても、共通で以下の問題が発生します。

  • 「注文管理」の画面にあるエクスポート機能では、カスタムフィールドの情報が出力できない
  • カスタムフィールドの情報を含めて出力するには、アプリを使った専用のエクスポート画面を利用する必要がある
  • Shopify customize order export csv file – Shopify Community
    2016年の内容ですがここに詳細あり

バックヤードのオペレーションに関連する問題なので、よく検討した方が良いと思います。

場合によっては商品ごとのカスタムフィールドではなく、注文単位の備考欄で対応した方が良い可能性もありますので。

備考欄に関しては以下の記事に書いています。

補足

  • 非公開設定のページからは、カスタムフィールドの値が取れない

商品ページではあまり影響がないかもしれませんが、ページを非公開にするとデータがとれなくなる模様です。

結び

WordPressのように投稿画面に専用欄を追加することはできず、専用の別画面で設定する必要がある模様。

一括入力はしやすく、特に Custom Fields はCSVでのインポートにも対応しているのでそのあたりは楽なはず。

Metafields guruの有料プランであれば商品詳細ページごとに入力欄を表示させることも可能のなので、柔軟に対応できる可能性があります。

ShopifyFD による対応(未確認)

使用経験がなく詳細は不明ですが、上記の ShopifyFD はカスタムフィールドのある画面に商品詳細やブログの投稿欄を作って運用するツールのようで、Shopify側にカスタムフィールドの欄を作るのとは逆方向のものです。

ただ、アプリではなく、Chromeの拡張機能にも関連し、動かないなどの情報がいくつか出てくる不安定さがあったりと、全体像が掴めずよくわからない状態です。

14人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄