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

日本語 ディスカッション 技術的なQ＆A
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