Shopify

Shopifyでメタフィールドを使う(初心者向け)

投稿日:

やりたいこと:商品ページの価格の下にちょっとしたテキストを表示したい。
そのテキストは商品ごとに違うものを用意し、設定したい。

1.メタフィールドを作る

Shopify管理画面に入り、設定-メタフィールドをクリック。
右上の「定義を追加する」ボタンをクリック。
名前とネームスペースとキーを適当に作る。

2.Liquidテーマを修正する

今回は、商品価格の下に表示させたかったので、product-template.liquid を開き、data-product-priceの文字を探し、そのDIVタグの終わりあたりの、表示させたい箇所を決める。
決まったら、{{ product.metafields.my_fields.overview }}のように入力する。(下の図でいうと216行目あたり)

※実はここで長時間つまづいたのだが、少ない中を探して見つけた大抵のテックブログでは{{ resource.metafields.namespace.key }}のように書かれているので、ネームスペースとキーは推測できたが、resourceをproductに書き換えなくてはいけなかった。そこになかなか気が付かず1時間ほどさまよった。。。

3.商品ページのメタフィールドに任意のテキストを入れる

例えば以下では、***という文字を試しに入れている。

4.プレビューで確認

以上。

-Shopify

執筆者:

関連記事

no image

Shopifyにスライド(スライダー/カルーセル)を導入するならコード直打ちがおススメ

アプリは、有料の、こんなのとか(フリープランだとクレジットが表示される)、 POWR Image Slider & Carousel – Ecommerce Plugins for Onlin …

Arigato Automation(Shopifyのアプリ)の備忘録

EC業務で「特定顧客の注文につき、注文から1日経ったら、自動で発送済みにする」・・・ということを、したい。 うちの会社の場合は、店頭受取の顧客については、発送の管理をしないため。 以下、Arigato …

Shopifyでも見積書を無料で作れるよ

Order PrinterっていうFree(無料)のアプリがあるから、それを使えばいい。 テンプレートがHTMLタグなので、それを直さなくてはならない。タグを知らない人にはちょっと辛いかもしれないけど …

Shopifyで Code Customizer の代替案を見つけた。アプリを使わずテーマで対応(10分でできる)

気に入って使っていた、Shopifyの Code Customizer アプリが最近になって、突然使えなくなった。メール問い合わせしてみたが、翌日「このメールは使われていません」みたいなメッセージが返 …

no image

Arigato Automationよ、ありがとう!

ShopifyでArigato Automationを使っている。ハッキリ言って便利だ。 やりたかったことと、そのサンプルとさせてもらったワークフローのメモ。 下書きをもとに正式注文を作成したら、下書 …