ShopifyのメタフィールドでJSONを使うと複雑なコンテンツの追加が楽になるかもしれない
shopifyの商品ページに商品の説明として画像・見出し・文章のコンテンツを複数入れたい！画像の位置は交互に入れ替えたい！
こんなときはshopifyからデフォルトで提供されているメタフィールドのJSONを使って実装すると結構簡単なのでやり方を紹介していきます
shopifyのメタフィールドはワードプレスで例えるとカスタムフィールドみたいな仕組みでとても便利な機能になっています
もちろん商品ページ以外でも応用すればブログやコレクションなど各ページで色々とコンテンツの作り込みができるので覚えておいて損はなさそう
テーマはDawnを使っています
メタフィールドの使い方はshopify本家の方で細かく紹介されていますのでこちらもおさえておくといいです
この記事の目次
JSON用のメタフィールドを定義する
JSON用のメタフィールドを定義するには管理画面の左下にある『設定』をクリック
ウインドウが出てくるので少しスクロールしたところにある『メタフィールド』をクリック
どこにメタフィールドを追加するか選択できるのでここでは『商品』をクリック
初めてメタフィールドを設定する場合はこんな画面に遷移するので緑色の「定義を追加」か「定義を追加する」どちらかをクリック
他にもメタフィールドが設定されている場合は設定済みのメタフィールドが一覧表示されるので右上にある「定義を追加する」をクリック
定義画面では入力画面に表示される「名前」と出力するときに使う「ネームスペースとキー」を設定しつつ「コンテンツタイプを選択する」の3箇所を設定する
※説明はなくても大丈夫だけど、このメタフィールドがどのようなものか説明があると使いやすいかもしれない
「名前」は『コンテンツ』、「ネームスペースとキー」は『custom.contents』としてみました
「コンテンツタイプを選択する」はクリックすると使えるものがプルダウンメニューのような感じで出てくるので、その他の中にある『JSON』を選択していきます
JOSNを選択するとJSONスキーマの入力欄にフォーカスされた状態になります
入力しなくても大丈夫ですが使うオブジェクトが正しい形になっているかの確認をしつつ、使用する際は同じプロパティのキーを使わないとしっかりと出力できないのでコピペ用に残しておくといいと思います。
最後に保存をクリックすれば完了
|
1 2 3 4 5 6 |
{ "layout": "image-left or image-right", "headline": "見出しを入力", "image": "ファイルからアップロードした画像のURL", "text": "文章を入力" } |
商品にメタフィールドが登録できると画面が遷移し、商品に登録されているメタフィールドが一覧で表示されます
このときに登録したものの名前の下にネームスペースとキーで設定した文字列を含んだ文字列
（今回の例だとproduct.metafields.custom.contents）が表示されますが、出力などの処理を行う際に使う文字列になるので、こちらを何処かにコピペしておくと便利かもしれません
JSON用のメタフィールドを出力するためのコードを追加する
商品にメタフィールドを追加したので商品ページを出力するためのファイルにコードを追加して出力していきます
管理画面の「販売チャネル」の下にある『オンラインストア』をクリックします
現在のテーマが表示されるので【・・・】の部分をクリックして『コードを編集』をクリックしていきます
セクション内の『main-product.liquid』が商品を出力するために使われているファイルのひとつで、このファイルを直接編集して出力する形が手っ取り早いので『main-product.liquid』を見つけ出してクリックします。
ファイルが開かれるので下の画像を参考に下へスクロールしてsectionの終了タグを探し、sectionの終了タグの上にコードを書いていきます。
追加するコードは以下のような感じで用意しましたのでコピペしたりアレンジしたりしてみてください
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{% if product.metafields.custom.contents.value %} <div class="metajson"> {% for metajson in product.metafields.custom.contents.value %} <div class="metajson_wrap {{ metajson.layout }}"> <div class="metajson_frame"> <img src="{{ metajson.image }}" alt="" class="metajson_image"> </div> <div class="metajson_content"> <div class="metajson_headline">{{ metajson.headline }}</div> <div class="metajson_text">{{ metajson.text }}</div> </div> </div> {% endfor %} </div> {% endif %} |
出力用のコードが追加できたらそのまま次のステップに進みます
JSON用のメタフィールドを装飾するためのcssを追加する
メタフィールドで登録したものを出力するためのコードができたら続けて装飾用のコードを追加していきます
とは言え状況によって出力したいので先程出力したコードの中にstyle要素を入れ込んでみます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
{% if product.metafields.custom.contents.value %} <div class="metajson"> {% for metajson in product.metafields.custom.contents.value %} <div class="metajson_wrap {{ metajson.layout }}"> <div class="metajson_frame"> <img src="{{ metajson.image }}" alt="" class="metajson_image"> </div> <div class="metajson_content"> <div class="metajson_headline">{{ metajson.headline }}</div> <div class="metajson_text">{{ metajson.text }}</div> </div> </div> {% endfor %} </div> <style> .metajson{ padding:30px 0; } .metajson_wrap{ display:flex; justify-content: space-between; margin-top:40px; } .metajson_wrap:first-of-type{ margin-top:0; } .metajson_frame{ width:50%; padding-top:calc(62.5% / 2); position:relative; overflow:hidden; flex-shrink: 0; } .metajson_image{ width:100%; height:100%; object-fit:cover; position: absolute; top:0; left:0; } .image-left .metajson_frame{ order:1; } .image-left .metajson_content{ order:2; width:calc(50% - 20px); } .image-right .metajson_frame{ order:2; } .image-right .metajson_content{ order:1; width:calc(50% - 20px); } </style> {% endif %} |
SPの対応はしてない＆かなり簡単な装飾なんでそのまま使えないとは思いますが、この方法が使えるかどうかの判断材料にしてください
作業が完了したら保存を忘れずにしてください
JSONメタフィールドで使う画像をアップする
JSONのメタフィールドで使う画像は予めアップしてURL（絶対パス）を用意しておきます
画像のアップは管理画面の左下にある『設定』をクリック
サイドバーの下の方に『ファイル』の項目があるのでここをクリック
アップロードする場合は「ファイルをアップロード」をクリックし、画像のURLを取得したいときは一覧内の「リンク」をクリックするとクリップボードにURLがコピーされます
商品管理から商品を選択して定義したメタフィールドを入力する
商品のメタフィールド出力する設定ができたら管理画面に戻り、商品管理をクリックし設定したい商品を選択して商品の編集画面を表示します
下の方までスクロールしていくとメタフィールドの欄が出てくるのでこちらをクリックしてJSONのオブジェクトを入力していきます。
JSON用のメタフィールドを設定したときに試したJSONスキーマを[]の中にペーストして編集します
layoutは画像を表示させたい位置を決めるための値で「image-left」であれば画像が左に、「image-right」だと画像が右側にレイアウトされるようcssを設定していますので必ずどちらかの値を入れ、headlineには見出しにしたい文字列入れ、imageには表示したい画像の絶対パスを入れ、textには表示したい文章を入力します
こんな感じのコードです ※画像のパスはダミーです
一旦この状態で保存をしプレビューしてみるとこんな感じで出力されるはずです
続けてもう一つコンテンツを入れるるためコードを追加します。複数入れたい場合はカンマで区切って記述してください
こんな感じのコードです ※画像のパスはダミーです
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[ { "layout": "image-left", "headline": "完全無農薬", "image": "https://cdn.shopify.com/s/files/tomato01.jpg?v=1669969501", "text": "当農園では防虫機能が特に強化されたビニールハウスを利用し完全無農薬で栽培しています" }, { "layout": "image-right", "headline": "色々なレシピに合う", "image": "https://cdn.shopify.com/s/files/tomato02.jpg?v=1669969507", "text": "そのままはもちろん、加工しても美味しくお召し上がりいただけます" } ] |
保存してプレビューしてみるとやりたかった形になります
現状では残念なことに登録の際にJSONスキーマの入力欄に入力したものは出てきてくれないので、あまりJSONに触れたことがないマーチャントであると難しい作業になってしまいますが、都度コピペをして対応してもらうしかありません
この記事では商品に対してJSONのメタフィールドを追加しましたが、ブログに追加すればよくうざいと言われている吹き出し付き会話形コンテンツを追加したりすることもできるので使いにくさはあるもののおすすめです
