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

執筆者:

関連記事

Arigato AutomationのヘルプにChatGPTが搭載された

Shopifyで使っているアプリ、Arigato Automation。毎日、便利に使っている。このたび、備考欄に書いたある文字について、置換をしたいというニーズが出てきた。きっと、Replaceの関 …

no image

Shopifyから送られてくるメール文中の画像がGmailで消えている

Shopifyでは、スタッフ向けの注文確認メールが送られるが、Gmailに届くようにしている。その文中を見ると、「画像が非表示になっています。 下記の画像を表示 – ・・・の画像を常に表示 …

no image

難解なAPIを使わずにShopifyの注文データをAccessに取り込む

Shopify側 ・Matrixfyアプリをインストールする。・Matrixfyはデモプランでも最大10件ダウンロードできる。スケジュールタスクは何個でも作成できるので、例えば、コンビニ知らはい、銀行 …

Shopifyでアプリなしで配達時間指定のみを実装する

スタッフから配送時間を選べるようにして欲しいと要望があったので、検討するところから、スタート。 まず、使う前に期待していたShopifyのメジャーアプリ「配送日時指定 .amp」なんですが、試したとこ …

Shopifyの注文情報をArigato AutomateionアプリとPowerAutomate経由でチャットワークに通知する

まずはPower Automate 側を作る。 トリガーはmanual。 HTTP URI は、自動で作られる。後でArigato Automationで使う。 JSONの解析をする。サンプルのペイロ …