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

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

価格の設定

商品管理 / 商品一覧 / 商品編集

で「販売価格」「定価」を設定できます。

マニュアル「商品登録・編集：詳細」

クリエイターモードで「定価」を表示する方法

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

定価を表示させる

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

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

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

▼HTML例

<{if $item.fixed_price}>
<p class="fixed-price">希望小売価格：<span>￥<{$item.fixed_price|number_format}></span></p>
<{/if}>

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

▼CSS例

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

.fixed-price{
    text-decoration: line-through;
}

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

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

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

▼HTML例

<{if $●●●.item.list[i].fixed_price}>
<p class="item-list-price item-list-fixed-price">希望小売価格：￥<{$●●●.item.list[i].fixed_price|number_format}><span class="tax">(税込)</span></p>
<{/if}>

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

▼CSS例

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

.item-list-fixed-price {
    text-decoration: line-through;
    font-size: 12px;/*テキストのサイズを小さくする*/
}

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

完了

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

それではまた！