例えば、色やサイズなどのバリエーションが複数ある商品ページに、それぞれのカスタムフィールドの値を出力してスペック表のようにしたい場合の方法です。
バリエーションがない、あるいは一つだけという場合にはMetafield: hoge.fuga [string]で良いのですが、バリエーションごとに登録したい場合は少し変更する必要があります。
[追記:2021.7.15]
アプリを使わずにある程度の範囲(段階的に拡張予定?)のメタフィールドがShopifyのダッシュボードから操作可能になりました。
まだ対応したテーマは開発ストアでしか使えないようですが、今後は当記事の内容は古いものとなりますので、読まれる方は留意ください。
前提と実現したいこと
- Shopify利用
- 商品にサイズなどのバリエーションがある
- 商品にカスタムフィールドでいくつかのスペックを設定している
- アプリとして Matrixify(旧:Excelify) をインストールしておく
- CSVでカスタムフィールドを設定する
上記の前提で、以下が実現したいこと。
- 商品詳細ページに全バリエーションのスペックを表示させる
なお、商品CSVと通常のカスタムフィールドに関しては以下の記事をどうぞ。当記事の補足情報ともいえますので。
実現方法
- CSVの項目名をVariant Metafield: hoge.fuga [string]のように設定する
Matrixify(旧:Excelify) はこの登録に対応していますが、他は不明ですので使用アプリごとに確認した方が安全です。
補足
商品に直接設定している(Metafield: hoge.fuga [string]などで設定)カスタムフィールドや、バリエーションのタイトル(商品名)などは以下で取れます。
{% comment %} 商品に直接設定しているカスタムフィールドの出力 {% endcomment %}
{{ product.metafields.hoge.fuga }}
{% comment %} バリエーションのタイトルの出力 {% endcomment %}
{% for variant in product.variants %}
{{ variant.title }}
{% endfor %}
しかし上記の状態では以下のようにしてもバリエーションのカスタムフィールドの値は取れません。
バリエーション用に別のカスタムフィールドが必要なためです。
{% comment %}
バリエーションのカスタムフィールドの出力できない。
product.metafields と variant.metafields は別物で、variant.metafields には何も値が入っていないから。
{% endcomment %}
{% for variant in product.variants %}
{{ variant.metafields.hoge.fuga }}
{% endfor %}
variant.metafieldsに値を入れるために、Matrixify(旧:Excelify)などのアプリが必要になります。
通常とバリエーションのカスタムフィールドの双方の必要性
- 通常とバリエーションのカスタムフィールドは両方とも必要なのか
- 片方でも問題ないのか
調査がたりませんが、おそらく以下のように考えることができます。
- スペックの箇所以外にカスタムフィールドを使っていないなら、バリエーションだけでいい
- 使っているなら、両方とも必要
考えられるケースとしては、絞り込み検索時のキーにカスタムフィールドを使っている場合です。
検証しているのは一つだけですが、以下のアプリならバリーションにも対応しているので、このアプリを使うならバリエーションのカスタムフィールドのみで問題ありません。
参考URL
- Solved: Display variant metafield – Shopify Community
こちらを見て状況が把握できました。 - Solved: Display product variants metafields – Shopify Community
実現したいことと少し違いますが、動的に取得対象のバリエーションを切り替えて値を変更する方法のようです。
結び
当初は簡単にバリエーションに設定したカスタムフィールドの値が取れると思っていたので、できないとわかってかなり焦りました。
調べて試したあとでは大した問題ではないとわかったものの、この辺りはアプリがないとかなり厳しくなります(アプリを自作する必要があるため)。
あまりアプリに縛られたくないのですがCSVでどうにかする場合、個人的には Matrixify(旧:Excelify) は必須のアプリになりそうです。
0人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
