1. HOME
  2. お店をカスタマイズ
  3. 機能をカスタマイズ
  4. 商品詳細画面に「○%OFF!」と表示させる値引き強調系テクニック

商品詳細画面に「○%OFF!」と表示させる値引き強調系テクニック

  • 更新日:2017/08/08

買い物をするときに、ネットや店舗問わず「○%OFF」と書かれていて、つい「安い!」と思って買ってしまったなんてはありませんか?

実はこの値引きを強調する「○%OFF」の表示、カラーミーショップでも表示できるんですよ!

しかも、定価と販売価格で自動計算して各商品に表示してくれるというスグレモノ。

今回はこの値引き強調系テクニック「○%OFF」のカスタマイズテクニックをご紹介します。

discount_rateを使えば解決!?

実は既にカラーミーショップには割引率を表示するタグが用意されている。

discount_rate
割引率(○○%の形式で出力されます。割引フラグ[discount_flg]がTRUEの場合のみ出力されます。)

とのことだそうですが、discount_flgという新しいタグが出てきました。

discount_flg
割引フラグ(ログイン中の場合、販売価格より会員価格の方が価格が低い場合はTRUE、それ以外はFALSE)

とのことだそうだが、ログイン中の場合・・・つまりdiscount_rateは、会員機能オンにしていて、なおかつ会員でログインしていなければdiscount_rateは動作せず割引率を表示できないということ。

※詳しくはカラーミーショップの独自タグ一覧をご覧ください。

まとめると・・・

discount_rateを使って割引率が表示される人
会員機能オンにしているお店の会員
discount_rateを割引率が表示されない人
初めてくるお客さんなど、その店の会員ではない人

てことは、初めてのお客さんには割引率が見えない!これでは、ちょっと使えない・・・・

ということで、会員には定価から会員価格の割引率が見えて、会員じゃない人も定価から販売価格の割引率が見えるようにする方法をご紹介します。

 

まずは商品情報を入力

まず商品情報に、定価と販売価格を必ず入力してください。

また当たり前なのですが、販売価格は定価より低くなければいけません。

会員機能をオンにしているお店は会員価格も入力して試してみてください。

今回はわかりやすくテスト商品を下記のように設定しました。

item_register

定価 1,000円(税込)
販売価格 680円(税込)

割引率 32%

 

ちなみに割引率の算出式はこんな感じです。

( 定価(円) – 販売価格(円) )  ÷ 販売価格(円) * 100 = 割引率(%)

そして、小数点以下を四捨五入します。

割引率の表示部分を記入

※今回はテンプレート『nano』を使用しています。

デザイン編集の【商品詳細】の上級モードで編集の[HTML CSS編集]を開いてください。

表示させたい箇所に下記を貼り付けてください。

※2017/01/29 更新:定価未入力及び販売価格以下の場合に対応。

最後に、値引き表示部分をCSSで目立たせるとさらに良いと思います。

discount_disp

まとめ

今回ご紹介した値引き強調系テクニックはどこでもよく使われていて、みなさんもよく見るテクニックだと思います。

新規のお客さんにもアピールしたいという方は、コピペで簡単に実装できるので、ぜひ使ってみてください。

Request βリクエスト ベータ版

カラーミーショップのカスタマイズテクニックリクエストを大募集。あなたのリクエストがカラテクッ!に掲載されてお悩みも素早くスッキリ解決。

  • ※掲載をお約束するものではございません
  • ※掲載のご連絡はいたしませんので、こまめにチェックしてください

Keyword Searchキーワード検索

Recommendedおすすめ参考書籍