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

執筆者:

関連記事

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

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

no image

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

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

秀丸・正規表現・置換で、郵便番号7桁の数字にハイフンを入れる

結構、時間がかかった。苦労したけど、できた。 1.郵便番号7桁/行になるように、整形しておく2.検索:^\d{3}3.置換:\0-

no image

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

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

ShopifyのEasy Taggingアプリで過去注文についてタグをつける

未来の注文についてタグをつける方法はわかったが、過去分についてそれをする方法がわからなかったので、自分用に調べてメモしておく。 Rulesのタブに書いてあったので、賢明な方はすぐに分かったのかもしれな …