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でアプリなしで配達時間指定のみを実装する

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

no image

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

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

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

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