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

今回はセールを開催するときに便利な、セール時の割引率や期間を指定して、商品詳細に表示する方法をご紹介します!

こんなお悩みありませんか?

・「〇月〇日~〇月〇日」「30%OFF」のような割引を設定して、商品詳細に出す方法を知りたい

セール時の割引率や期間を指定して
商品詳細に表示する方法をしりたい!

それでは、早速みていきましょう!

設定方法

(1)商品に割引率を設定する

まずは、対象の商品の割引率を設定しましょう。

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

で、「商品割引」と「割引期間」を登録します。

商品登録

オンラインマニュアル「商品の登録」も合わせてご参照ください。

・割引期間に指定がない場合は、「期間制限なし」のチェックボックスにチェックします。

(2)PCの商品詳細ページの表示を確認する

【独自デザイン(PC)】>【内部ページ編集Ⅰ】>【商品詳細画面管理】

で、商品情報を[INFO]タグを利用して表示している場合は、このようにすぐに表示されます。

▼[INFO]タグ利用の場合

INFO 出力例
↑【Fashion】テンプレート表示例

▼[INFO]タグを利用していない場合

商品情報を[INFO]タグを利用せず表示している場合は、下記のタグを入力して表示しましょう。
[SALESTART]~[SALEEND]で囲んだ部分が、割引設定されている場合にのみ表示されます。

・「通常価格」などに取り消し線をつけたい場合は、CSSを追加します!
【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】
に、下記のようなスタイル指定を追記してください。

商品詳細ページ

(3)スマホの商品詳細ページの表示を確認する

▼テンプレートを適用した場合

テンプレートを利用している場合は、このようにすぐに表示されます。

スマホ割引価格
↑【Primary】テンプレート表示例

▼テンプレートを利用してない場合

【独自デザイン(スマホ)】> 【スマホデザインの設定】
適用中のスマホテンプレートの「編集」をクリック【商品詳細画面】へ

商品詳細ページ編集「HTML編集」エディターエリアに下記のタグを入力して表示しましょう。

・「割引期間」を設定している場合、割引期間外の日時では割引表示されません。
・テンプレートによって表示のデザインは異なります。
・文字色を変更するなど、CSSでカスタマイズして表示することもできます。

完了

いかがでしたでしょうか。
繁忙期に自動でタイマー設定できる便利な機能です。ぜひご活用ください!