やりたいこと:商品ページの価格の下にちょっとしたテキストを表示したい。
そのテキストは商品ごとに違うものを用意し、設定したい。
1.メタフィールドを作る
Shopify管理画面に入り、設定-メタフィールドをクリック。
右上の「定義を追加する」ボタンをクリック。
名前とネームスペースとキーを適当に作る。
![](http://waji-mart.com/homeandabroad/wp-content/uploads/2022/01/87b927691f8eb98ee5adf664685ff7f3-1024x676.png)
![](http://waji-mart.com/homeandabroad/wp-content/uploads/2022/01/4c89f1bf3bd2d6e146dd06f399c0f1d1.png)
![](http://waji-mart.com/homeandabroad/wp-content/uploads/2022/01/66e0f0c568947c0146fd020032d0c2ce.png)
2.Liquidテーマを修正する
今回は、商品価格の下に表示させたかったので、product-template.liquid を開き、data-product-priceの文字を探し、そのDIVタグの終わりあたりの、表示させたい箇所を決める。
決まったら、{{ product.metafields.my_fields.overview }}のように入力する。(下の図でいうと216行目あたり)
![](http://waji-mart.com/homeandabroad/wp-content/uploads/2022/01/d979e2cd89fa20c2989db79422d7f110.png)
※実はここで長時間つまづいたのだが、少ない中を探して見つけた大抵のテックブログでは{{ resource.metafields.namespace.key }}のように書かれているので、ネームスペースとキーは推測できたが、resourceをproductに書き換えなくてはいけなかった。そこになかなか気が付かず1時間ほどさまよった。。。
3.商品ページのメタフィールドに任意のテキストを入れる
例えば以下では、***という文字を試しに入れている。
![](http://waji-mart.com/homeandabroad/wp-content/uploads/2022/01/f488ad84bb0fe8b7aa2da83635c4776f.png)
4.プレビューで確認
![](http://waji-mart.com/homeandabroad/wp-content/uploads/2022/01/faade2d1e6e3c13e01ad31c062dd03a1.png)
以上。