メタフィールドの「評価」を数字ではなく星で表示させたい

Topic summary

メタフィールドの「評価」を数値ではなく星アイコンで表示したいという相談。添付画像は望むUIの例。

提示された方法:

  • Liquid(Shopifyのテンプレート言語)で for i in (1..n) を使い、値n個ぶんの星要素を出力。
  • メタフィールドの値をクラス名に反映し、CSSの背景画像などで星を表現。

補足・注意点:

  • 評価が小数(例: 4.5)の場合は追加のロジックが必要。
  • Liquidの実装が難しい場合は、別手法の検討(例: 「ファイル」メタフィールドに星画像を登録して表示)。

結果・現状:

  • 「評価」ではなく「ファイル」メタフィールドを使う方法で、星表示を実現して解決。
  • 具体的なコードの手順は提示なし。議論は解決済み。
Summarized with AI on February 6. AI used: gpt-5.

よくアパレルサイトで見かけるこれ

をメタフィールドの「評価」を使えば星で表現できるのではと思ったのですが、どうしても数値で出てきてしまいます。

これを数値ではなく星(もしくは何か記号)で表示させることできないのでしょうか、、

正規の使い方かどうかは確認していませんが、数値が取れるなら以下のような方法はあるかなと思います。

  • for i in (1..n) のような形でnにメタフィールドの値を入れて要素を必要数出力
  • クラス名にメタフィールドの値を反映させ、CSSの背景画像などで出力

お返事ありがとうございます!

すみません、当方コードを触ることが得意でなく、、、

なんとなく仰っている意味はわかるのですが、その手順をご教示いただけると助かります。。

手順としては既に記載しました内容がお伝えできるあたりかなと思います。

補足としては、レビューに設定する値が小数点を含むのであればもう少し工夫が必要になる点でしょうか。

「Liquidは書けないがメタフィールドの値は出力できる」ということであれば、「評価」ではなく「ファイル」を使うなど別手法を検討した方が良いようには思います。

以上ですが上記回答では不足するようでしたら、このまま他の方の回答を待たれるか、エキスパートやパートナーに依頼されることをお勧めします。

その場合はお役に立てず申し訳ありません。

ありがとうございます!!

「ファイル」を使用していい感じに表示させることができました!!!