こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回は、クリエイターモードで「定価（希望小売価格）」を表示する方法をご紹介します！
クリエイターモードで使えるタグはタグリファレンスをご確認ください。

※クリエイターモード【Complete】【Basics】【Manabito】【BRothers】テンプレートにはあらかじめ「定価（希望小売価格）」を表示するソースが【商品詳細】に入力されています。
※テンプレートごとに初期値のデザインは異なります。
それ以外のテンプレートをご利用の場合や、トップページなどへも「定価（希望小売価格）」を表示したい場合は、ソースを追記して表示することができます。

価格の設定

【商品管理】>【商品の設定】>【商品の登録】

で「販売価格」「定価（希望小売価格）」を設定できます。
価格
オンラインマニュアル「商品の登録」

価格は誤解をあたえないように設定しましょう。
外部サイト：消費者庁「二重価格表示」

クリエイターモードで「定価（希望小売価格）」を表示する方法

「販売価格」が「定価」より安い場合、「定価」も表示するとよりお得感が引き立ちます！
早速定価を表示する方法をみていきましょう。

定価（希望小売価格）を表示させる

【1】商品詳細ページに表示する

【ショップデザイン】>【クリエイターモード】>【商品詳細】

変数タグ<{$item.fixed_price}>を使用して「定価（希望小売価格）」のソースをご追記ください。

▼HTML例

※記述する位置は「販売価格」<{$item.price_html}>　の前や、「割引価格」の開始の
<{if $item.is_soldout}> の前など、「定価（希望小売価格）」を表示させたい位置に記述してください。

▼CSS例

「定価（希望小売価格）」に打消し線をつける場合は「CSS」に以下のように装飾のスタイルをご追記ください。

・税抜きでも税込みでも書き方は同じです。入力された数値が表示されます。
・p、spanなどのマークアップはお好みでご追記ください。
・「希望小売価格」のテキストはお好みでご変更ください。「定価の表記」で設定した名称を表示したい場合は定価名タグ<{$item.fixed_price_name}>を利用して表示することもできます。

↓商品詳細ページに「希望小売価格」が表示され打消し線つきで表示されました！
商品詳細定価表示

【2】トップページ（新商品、おすすめ商品など）、カテゴリーページ、商品検索結果ページに表示する

それぞれの商品リストのループのソース内に変数タグを使用して「定価（希望小売価格）」のソースを追記してください。関連記事：クリエイターモードの「ループ処理」について覚えよう

▼HTML例

※$●●●.item　の●●●にそれぞれの商品リストの変数を記述してください。
記述する位置は「販売価格」　<{$●●●.item.list[i].price|number_format}>　の前など、
「定価（希望小売価格）」を表示させたい位置に記述してください。

▼CSS例

「定価（希望小売価格）」に打消し線をつける場合は「CSS」に以下のように装飾のスタイルをご追記ください。

↓カテゴリーページに「希望小売価格」が表示され、打消し線つきで表示されました！
カテゴリー定価表示

完了

・ソースは一例となります。自由にデザインを調整して表示しましょう。
・ソースの作成・修正方法、最適なサイズなどの作り方についてはサポート対象外です。
・有料となりますが、ショップ制作代行サービスとして、おてがるリニューアルサービスをご紹介させていただきます。

いかがでしたでしょうか。
クリエイターモードでも「定価（希望小売価格）」を表示してみましょう。

それではまた！