└定期購入 デザインの設定（ベーシックモード・PC）

定期購入をベーシックモードでご利用の場合、ショップデザインで商品詳細画面を設定する必要があります。

デモショップをみる

定期購入デザインの設定

ショップデザイン / テンプレート選択・編集 / 内部ページ編集Ⅰ / 商品詳細画面管理　のデザインを設定します。

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

  カテゴリーごとの個別のデザインを優先表示する場合ショップデザイン / テンプレート選択・編集 / デザインオプション / ショップデザインオプションで
  「カテゴリーごとの個別のデザインを優先」を選択しているかご確認ください。
  ※カテゴリーとその中に属する下階層カテゴリーのデザインを分けることはできません。

• 2HTMLタグを利用して、商品詳細画面のデザインを登録します。
  ⇒定期購入で追加するソース例

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

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

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

▼ショップデザイン / テンプレート選択・編集 / 内部ページ編集Ⅰ / 商品詳細画面管理　内へ下記のソースを追加します。

<!--定期購入ここから-->
[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]
<!--定期購入ここまで-->

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

デモショップをみる

▼ショップデザイン / テンプレート選択・編集 / トップページ編集 / 共通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は管理しやすい箇所、または、ご不明な場合は、最下位置へご追記ください。