└デザインの設定（PC） | makeshopオンラインマニュアル

定期購入ご利用には、ショップデザインで商品詳細画面を設定する必要があります。

定期購入デザインの設定

【ショップデザイン（PC）】>【内部ページ編集Ⅰ】>【商品詳細画面管理】のデザインを設定します。

カテゴリーデザイン

1【商品管理】>【カテゴリーの設定】>【カテゴリーの設定】にて登録したカテゴリーがリストに表示されます。
定期購入のデザイン設定したいカテゴリーをプルダウンから選択してください。

カテゴリーごとの個別のデザインを優先表示する場合【ショップデザイン（PC）】> 【ショップデザインオプション】で
「カテゴリーごとの個別のデザインを優先」を選択しているかご確認ください。

※カテゴリーとその中に属する下階層カテゴリーのデザインを分けることはできません。
2HTMLタグを利用して、商品詳細画面のデザインを登録します。
⇒定期購入で追加するソース例

利用できるタグの種類とソース例

定期購入で使用するタグの種類

変数	動作内容
[INFO]	※[INFO]タグは必須で入力する必要があります。【商品管理】>【商品の設定】>【商品の登録/修正】で「定期購入商品」を選択している場合は、画面上に何も表示されません。「通常商品と定期購入商品」を選択している場合は、通常商品の販売価格などが表示されます。
[REPEATSALE_START]	定期購入商品の設定をしている場合、[REPEATSALE_START]～[REPEATSALE_END]で囲まれた内容を表示します。
[REPEATSALE_PRICE]	定期購入販売価格を表示します。回数割引を設定している場合は何も表示されません。
[REPEATSALE_PRICE_TABLE]	1回数割引を設定している場合、定期購入価格の一覧を表形式で表示します。商品単価は【ショップ作成】>【決済・注文関連の設定】>【消費税の設定】「消費税の設定」で設定した方法で価格表示します。 ※回数割引を設定していない場合は何も表示されません。
[REPEATSALE_POINT]	定期購入の発行ポイントを表示します。
[REPEATSALE_REMARKS]	2【ショップの作成】>【定期購入の設定】>【お届けサイクル設定】ご案内文「商品詳細画面表示用」の入力内容を表示します。
[REPEATSALE_OPTION1]	3商品登録の際、オプション設定した【商品管理】>【商品の設定】>【商品の登録/修正】（オプション設定1）を設定している場合オプション1を表示します。オプションが設定されていない場合は何も表示しません。 ※定期購入ではオプション設定は表示しますが、オプショングループの表示はできません。
[REPEATSALE_OPTION2]	4商品登録の際、オプション設定した【商品管理】>【商品の設定】>【商品の登録/修正】（オプション設定2）を設定している場合オプション2を表示します。
[REPEATSALE_QUANTITY]	5定期購入商品の数量入力フォームを出力します。
[REPEATSALE_GETBASKET]	6かごに入れるパスを出力します。使用例）<a href=”[REPEATSALE_GETBASKET]”>定期購入する</a>
[REPEATSALE_SUGU]	すぐに注文するパスを出力します。使用例）<a href=”[REPEATSALE_SUGU]”>定期購入ですぐに注文する</a>
[REPEATSALE_BONUS]	7【商品管理】>【商品の設定】>【商品の登録/修正】(定期購入)の景品設定をしている場合は、景品を表示します。
[IF_REPEATSALE] 　在庫あり [END_REPEATSALE] [ELSE_REPEATSALE] 　在庫なし [ENDIF_REPEATSALE]	8在庫状況に応じて表示を変更します。・売り切れではない状態の場合 [IF_REPEATSALE]～[END_REPEATSALE]で囲まれた内容を表示します。通常はかごに入れるボタンを設置します。・売り切れになった場合 [ELSE_REPEATSALE]～[ENDIF_REPEATSALE]で囲まれた内容を表示します。
[REPEATSALE_END]	定期購入の場合、[REPEATSALE_START]～[REPEATSALE_END]で囲まれた内容を表示します。

定期購入で追加するソース例

▼【ショップデザイン（PC）】>【内部ページ編集Ⅰ】>【商品詳細画面管理】内へ下記のソースを追加します。

<!--定期購入ここから-->
[REPEATSALE_START]
[REPEATSALE_PRICE]
[REPEATSALE_PRICE_TABLE]
[IF_REPEATSALE]<p class="stockY">在庫あり</p>
<div class="repeatMgn">[REPEATSALE_POINT]</div>
<div class="repeatMgn">[REPEATSALE_REMARKS]</div>
<div class="repeatMgn">[REPEATSALE_OPTION1] </div>
<div class="repeatMgn">[REPEATSALE_OPTION2]</div>
<div class="repeatMgn">[REPEATSALE_QUANTITY]</div>
<ul class="basketBlock">
<!--<div class="buyBtn">-->
<div id="basketBtn2">
<a class="repeat_basket_btn" href="[REPEATSALE_GETBASKET]">定期購入する</a>
</div>
[END_REPEATSALE]
[ELSE_REPEATSALE]<p class="stockN">在庫なし</p>[ENDIF_REPEATSALE]
[REPEATSALE_BONUS] 
[REPEATSALE_END]
<!--定期購入ここまで-->

※テンプレート【プレーン】ホワイトご利用の場合の入力箇所例をご参考ください。

デモショップをみる

▼【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】内へ下記のCSSを追加します。

/*------------------------
	定期購入
------------------------*/
#M_repeatPriceTable{
	border-top:1px solid #999;	
	border-left:1px solid #999;
	width:100%;
	margin:8px 0;
}
#M_repeatPriceTable th{
	text-align:center;	
	background:#ffc;
}
#M_repeatPriceTable th,
#M_repeatPriceTable td{
	border-bottom:1px solid #999;	
	border-right:1px solid #999;
	font-size:13px;
	padding:3px;
}
#M_repeatPriceTable th{
	font-weight:normal;	
}
#M_repeatPriceTable .M_taxIn{
	font-size:11px;	
	color:#666;
}
#M_repeatPriceTable td{
	color:#CC0000;
	font-weight:bold;	
	text-align:center;
}
#M_repeatBonus{
	clear:both;
	overflow:hidden;
	_zoom:1;
	margin-top:16px;
	border:1px solid #999;
}
.M_repeatBonusWrap{
	margin:8px;
	padding:10px;
	width:310px;
	float:left;
}
.M_repeatBonusName{
	font-weight:bold;
	font-size:14px;
	margin-bottom:8px;	
}
.M_repeatBonusClear{
	overflow:hidden;
	_zoom:1;	
}
.M_repeatBonusImg{
	float:left;
	width:100px;
	margin-right:4px;
}
.M_repeatBonusImg img{
	width:100px;
}
.M_repeatBonusDetail{
	float:right;
	width:200px;	
}
h4.regular{
	font-weight:bold;
    background: none repeat scroll 0 0 #E6E6E6;
	margin: 8px 0;
    padding: 8px;
	font-size:14px;
}
.stockY{
	font-weight:bold;
}
.repeatMgn{
	margin-bottom:8px;
	text-align:left;
}
.M_repeatPrice span{
	color:#CC0000;
}
#basketBtn2 {
    margin-top: 10px;
    padding: 10px;
}
a.repeat_basket_btn {
    background: #b60500;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    margin: 16px auto;
    padding: 14px 32px;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	width: 70%;
}
a.repeat_basket_btn:hover {
    background: #be605d;
}
#buyInfo {
	margin:20px 0 30px;
	overflow:hidden;
	_zoom:1;
}
#buyInfo h4 {
	background:#ccc;
	padding:8px;
	margin:8px 0;
	font-size:16px;
	font-weight:bold;
}
#buyInfo .repeatDescription{
	padding:6px 12px;
	border:#333 solid 1px;
}
#buyInfo .buyBtn{
	margin:16px 0;
}
#M_usualValue td,
#M_usualValue td input{
	font-size:18px;
	font-weight:bold;
}
#M_usualValue td input{
	width:70px;
}
div.M_infoEmbedded {
float:left;
}
.M_repeatPrice{
	margin:10px auto;
	font-size:16px;
}
.M_repeatPrice,
.M_repeatPrice input.m_price {
	font-weight:bold;
}
.M_repeatPrice input.m_price {
	width:60px;
	font-size:18px;
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
.stockN {
	background:#eee;
	padding:10px;
	font-size:20px;
	color:#cc0000;
	text-align:center;
}

※CSSは管理しやすい箇所、または、ご不明な場合は、最下位置へご追記ください。

定期購入機能

定期購入デザインの設定

利用できるタグの種類とソース例

定期購入で使用するタグの種類

定期購入で追加するソース例