【Shopify TIPS】
商品レーダーチャートをテーマエディタからノーコードで設定できる実装方法
前回（https://x.com/sh_sakamoto/status/1856547541963420006）のバロメーターのような形で、chart.jsを用いたレーダーチャートを「テーマエディタ上でノーコードでブロック追加できる」ようにするためのカスタマイズ方法です。
chart.jsは様々なプロパティを設定でき、見た目を自由にカスタマイズできるので便利ですね。
◆実装のメリット
・テーマエディタ上で視覚的に設定可能
・商品ごとに表示項目のカスタマイズが容易
・コードを触らずに設定内容の変更が可能
◆具体的な手順
①メタフィールドの設定
・管理画面から必要な数のレーダーチャート項目の定義を追加
・各商品に対してレーダーチャート項目値を設定
②テーマのカスタマイズ
・商品テンプレートに「カスタムLiquidセクション」を追加してバロメーター表示用のコードを挿入
◆実装のポイント
・表示する項目によって最大値・最小値の表示内容を調整する必要あり
