今回はShopifyで「商品の割引率」を表示する方法を解説します。割引率を明記することで、お得感をしっかり伝えることができますので、Shopifyでセール品を扱っている方は是非導入してみてください。必要なコードも一番最後に開示しています。
※今回は無料テーマDawn(ver.13.0.1)を前提に解説します。
今回の成果物(Before/After)
完成イメージ
完成イメージは以下です。割引後の価格の横に割引率を表示させています。
「割引前価格」を設定した際に「何%割引なのか」を表示するカスタマイズです。このような要望はノーコードではできないので、コード編集で対応をします。割引前価格の設定は商品管理画面(以下画像)からできます
Dawnは割引率表示の機能はない
セール品などで、割引設定をしている商品は、完成イメージ左のような形式です。
セール商品であることは一目でわかりますが、ECサイトでは割引率の表示をしているサイトも多く、割引率を表示したいという希望も多いです。確かに、割引率を明示している右の仕様の方が、わかりやすくて親切ですよね。
今回の実装ポイント
今回は「もし割引商品の価格が設定されていたら、割引率を表示してね」というコードを書こうと思います。この際にポイントとなるのは以下2点です
if文での条件分岐
「割引商品のみ表示させる」という仕様にするため、if文で条件分岐を記載します。「もし割引商品の価格が設定されていたら」という部分ですね。if文が分からない人用に、公式ドキュメントのリンクも添付します。
Tags(if)mathフィルターを活用した割引計算
具体的に割引率を計算するために、mathフィルターを使用します。簡単な四則計算ですが、書き方を理解する必要がありますので、こちらもmathフィルターの公式ドキュメントのリンクを添付します。
mathフィルターコードの紹介
それではこれより、実際のコードを紹介していきます。
続きはログインすると閲覧できます
無料で登録/閲覧できますので、会員登録・ログインをお願います。
会員登録（会員登録がまだの方はこちら）
ログイン(会員登録済みの方はこちら)