Riseで商品ページに価格帯を表示

Topic summary

Shopify の Rise テーマで、バリエーションによって価格が異なる商品に対して「128,000円から178,000円」のような価格帯表示を実装する方法についての質問です。

解決方法:

  • product-template.liquid または product.liquid ファイル内の価格表示部分を修正
  • 提供されたコードを使用して、商品バリエーションの最低価格と最高価格を取得し表示
  • 価格が同一の場合は単一価格、異なる場合は「最低価格から最高価格」の形式で表示

実装の経緯:
初回の実装では該当商品の価格が表示されなくなる問題が発生。その後、price.liquid に元の <price__regular> 定義を残したまま、新たに <price__multiple> 定義を追加することで、価格帯と個別商品価格の両方が正しく表示されるようになりました。

質問者は無事に実装を完了し、回答者をベストアンサーに選定しています。

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.

Shopify初心者です。Riseを利用しておりますが、バリエーションにより価格が異なるため、商品ページで128,000円から178,000円のように価格範囲が表示できるようにしたいのですが、Liquidははじめてで、どこをどのようにカスタマイズすれば良いかご教授いただけないでしょうか?よろしくお願いします。

1 Like

ご質問拝見しました。

こちらまず値段を表示しているファイルを探してください。

一般的にはproduct-template.liquidまたは「Templates」フォルダ内のproduct.liquid などのファイル名が多いです。

そちらの値段を表示している部分を以下のコードを利用して改修していただければと思います。

{% assign prices = product.variants | map: 'price' %}
{% assign min_price = prices | sort | first %}
{% assign max_price = prices | sort | last %}

{% if min_price == max_price %}
  

価格: {{ min_price | money }}

{% else %}
  

価格: {{ min_price | money }} から {{ max_price | money }}

{% endif %}

こちらでバリエーションの最低値段と最高値段を表記できるかと思います!

ご参考にしていただけますと幸いです!

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

ありがとうございます!

解決できました。

ベストアンサーとさせていただきました。

今後ともよろしくお願いします。

本当に感謝です。

1 Like

いただいたアドバイスで対応しましたら、該当商品の価格が表示されずに

価格のバリエーションだけが表示されるようになってしまったので、

アドバイスを参考に、price.liquid に

<price__regular>という元々の定義はそのままにして

<price__multiple>という定義を新たに作り、そこにいただいたコードをつけてやってみたところ、

価格幅とともに、対象製品の価格も表示されるようになりました。

いただいたアドバイスのおかげです。

改めて御礼申し上げます。

Yoshi

1 Like

ご丁寧に対応の報告ありがとうございます!

無事に実装ができたようで安心しました。

また何かありましたらご相談いただけたらと思います!