こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回はセールを開催するときに便利な、セール時の割引率や期間を指定して、商品詳細に表示する方法をご紹介します！
こんなお悩みありませんか？
・「〇月〇日～〇月〇日」「30％OFF」のような割引を設定して、商品詳細に出す方法を知りたい
セール時の割引率や期間を指定して
商品詳細に表示する方法をしりたい！
それでは、早速みていきましょう！
設定方法
（1）商品に割引率を設定する
まずは、対象の商品の割引率を設定しましょう。
【商品管理】>【商品の設定】>【商品の登録】
で、「商品割引」と「割引期間」を登録します。
オンラインマニュアル「商品の登録」も合わせてご参照ください。
・割引期間に指定がない場合は、「期間制限なし」のチェックボックスにチェックします。
（2）PCの商品詳細ページの表示を確認する
【ショップデザイン（PC）】>【内部ページ編集Ⅰ】>【商品詳細画面管理】
で、商品情報を[INFO]タグを利用して表示している場合は、このようにすぐに表示されます。
▼[INFO]タグ利用の場合
↑【Fashion】テンプレート表示例
▼[INFO]タグを利用していない場合
商品情報を[INFO]タグを利用せず表示している場合は、下記のタグを入力して表示しましょう。
[SALESTART]～[SALEEND]で囲んだ部分が、割引設定されている場合にのみ表示されます。
|
1 2 3 4 5 6 7 |
[SALESTART] <div class="saleBox"> <p class="salePeriod">セール期間：[DCDAY]</p> <p class="Price">通常価格：<span class="strikeout">[ORGPRICE]</span>円</p> <p class="saleRate">割引率：[DCRATE]％OFF</p> </div> [SALEEND] |
・「通常価格」などに取り消し線をつけたい場合は、CSSを追加します！
【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】
に、下記のようなスタイル指定を追記してください。
|
1 |
.strikeout{text-decoration: line-through;} |
（3）スマホの商品詳細ページの表示を確認する
▼テンプレートを適用した場合
テンプレートを利用している場合は、このようにすぐに表示されます。
↑【Primary】テンプレート表示例
▼テンプレートを利用してない場合
【ショップデザイン（スマホ）】> 【スマホデザインの設定】
適用中のスマホテンプレートの「編集」をクリック【商品詳細画面】へ
商品詳細ページ編集「HTML編集」エディターエリアに下記のタグを入力して表示しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<{if $discount_period}> <p class="saleTerm">セール期間：<{$discount_period}></p> <{/if}> <{if $original_price}> <p class="regularPrice">通常価格：<span class="lineThrough"><{$original_price}>円</span></p> <{/if}> <div class="salesPrice"> <p class="price" id="M_usualValue"><span id="taxPrice"><{$price}></span>円(税込)</p> <{if $discount_rate}> <p class="off">(<{$discount_rate}>%OFF)</p> <{/if}> </div> |
・「割引期間」を設定している場合、割引期間外の日時では割引表示されません。
・テンプレートによって表示のデザインは異なります。
・文字色を変更するなど、CSSでカスタマイズして表示することもできます。
完了
いかがでしたでしょうか。
繁忙期に自動でタイマー設定できる便利な機能です。ぜひご活用ください！
