割引価格の横に「〇〇%OFF」を表示する【Shopify】

対象テーマはDAWNとSenseです。デフォルトでは

と表示されていますが、これを

と表示させる方法を解説します。

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

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

3.「スニペット」フォルダ内のprice.liquidファイルを選択します。

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

{%- 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. 最後に「保存」をクリックして完了です。