割引価格の横に「〇〇%OFF」と表示させたい

日本語 ディスカッション 技術的なQ＆A

Topic summary

Senseテーマを使用している環境で、商品割引時の価格表示をカスタマイズする方法についての質問と回答。

質問内容：

  • デフォルトの「割引前価格 割引後価格」表示を、「割引後価格 ○○%OFF」という形式に変更したい
  • price.liquidファイルのコード調整方法を知りたい

提案された解決方法：

  1. 管理画面から「オンラインストア」>「テーマ」>「コードを編集」に移動
  2. 既存の比較価格表示コード（compare_at_priceを含むセクション）を削除
  3. 割引率を計算・表示する新しいコードを追加：
    • {{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | append: ' %OFF' }}
  4. 変更を保存

注意点：

  • コード編集前に必ずバックアップを取ること
  • 意図しない表記崩れやエラーが発生する可能性がある
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

テーマはSenseを使用しています。

商品が割引時の場合、

デフォルトでは

割引前の価格

割引後の価格

となっているのを

割引後の価格 ○○％OFF

と表示させたいです。

price.liquidのコードを調整すればいけそうなのですが、突破口が見つからずにいます。

お手数をおかけしますが、コードなどをご教示いただければ幸いです。

2

以下の手順をお試しください。

なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。

1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

  1. 以下のコードを削除します。
{%- unless product.price_varies == false and product.compare_at_price_varies %}
          {{ 'products.product.price.regular_price' | t }}
          
            <s>
              {% if settings.currency_code_enabled %}
                {{ compare_at_price | money_with_currency }}
              {% else %}
                {{ compare_at_price | money }}
              {% endif %}
            </s>

          
        {%- endunless -%}

これで「割引前の価格」が表示されなくなります。

  1. 「○○％OFF」を表示するために、コードを以下のように変更します。

変更前：

{{ 'products.product.price.sale_price' | t }}
        
          {{ money_price }}

変更後：

{{ 'products.product.price.sale_price' | t }}
        
          {{ money_price }}   
          // 以下を追記
          {% if product.compare_at_price > product.price %}
            {{ ' ' | append: product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | append: '% OFF' }}
          {% endif %}
         //ここまで追記
  1. 最後に「保存」をクリックして完了です。
1 Like