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

[サトシ2024]

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

商品が割引時の場合、

デフォルトでは

割引前の価格

割引後の価格

となっているのを

割引後の価格　○○％OFF

と表示させたいです。

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

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

[株式会社ナレッジサービス · Accepted solution]

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

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

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

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

3. 以下のコードを削除します。

{%- unless product.price_varies == false and product.compare_at_price_varies %}
          <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
          <span>
            <s class="price-item price-item--regular">
              {% if settings.currency_code_enabled %}
                {{ compare_at_price | money_with_currency }}
              {% else %}
                {{ compare_at_price | money }}
              {% endif %}
            </s>

          </span>
        {%- endunless -%}

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

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

変更前：

<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
        <span class="price-item price-item--sale price-item--last">
          {{ money_price }}   

        </span>

変更後：

        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
        <span class="price-item price-item--sale price-item--last">
          {{ 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 %}
         //ここまで追記
        </span>

5. 最後に「保存」をクリックして完了です。