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

定期購入ご利用には、スマートフォン用ショップの商品詳細ページに定期購入のタグを設定して表示します。

定期購入スマホデザインの設定

【ショップデザイン（スマホ）】>【スマホデザインの設定】から新しくテンプレートを追加します。

1定期購入を利用開始後に、「新しくテンプレートを追加」すると、定期購入に必要なタグが入力されたソースのテンプレートを追加することができます。
2「適用する」をクリックすると商品詳細ページに定期購入デザインが追加された状態で表示します。

定期購入で商品詳細ページに追加されるソース

【ショップデザイン（スマホ）】>【スマホデザインの設定】>【商品詳細ページ編集】
「HTML編集」と「CSS編集」内へ下記のソースが追加されます。

【Primary】

▼HTML編集

<!--定期購入-->
<{if $repeatsale}>
    <div class="repeatsaleWrap">
            <div class="itemSection itemInfo">
                <h1 class="itemName"><{$name}></h1>
                <{if $review.count}>
                    <{$review.star}>
                    <p class="reviewCount">（<a href="#itemReview"><{$review.count}>件</a>）</p>
        		<{/if}>

                <h5 class="repeatTitle">定期購入のご注文</h5>
                
                <{$repeatsale_price}>
                <{$repeatsale_price_table}>
                <{$repeatsale_point}>
                <{$repeatsale_bonus}>
            </div>
                
            <div class="itemSection">
                <div class="itemOption">
                    <{if $repeatsale_option}>
                        <div class="option">
                            <{$repeatsale_option}>
                        </div>
                    <{/if}>
                </div>
                
                <div class="itemAmount">
                    <dl class="amount">
                        <dt>数量</dt>
                        <dd><{$repeatsale_quantity}>
                            <{if $stock}>
                                残りあと<{$stock}>個
                            <{/if}>
                        </dd>
                    </dl>
                    
                    <{if $option_stock_url}>
                        <p class="stock">
						<a href="<{$option_stock_url}>" class="btn btnStock">在庫確認</a></p>
                    <{/if}>
                </div>
            </div>    
    
            <div class="itemSection itemBtn">
            <a href="<{$repeatsale_get_basket}>">
			<input type="button" class="btn btnRepeat" value="定期購入を申し込む"></a>
            </div>
    </div>
<{/if}>
<!--定期購入ここまで-->

<{if $repeatsale}>

<{if $review.count}>

<{$review.star}>

<{/if}>

<h5 class="repeatTitle">定期購入のご注文</h5>

<{$repeatsale_price}>

<{$repeatsale_price_table}>

<{$repeatsale_point}>

<{$repeatsale_bonus}>

</div>

<{if $repeatsale_option}>

<{$repeatsale_option}>

</div>

<{/if}>

</div>

<{if $stock}>

残りあと<{$stock}>個

<{/if}>

</dd>

</dl>

<{if $option_stock_url}>

<a href="<{$option_stock_url}>" class="btn btnStock">在庫確認</a></p>

<{/if}>

</div>

</div>

<{/if}>

▼CSS編集

/* 定期購入 */
.repeatTitle{
    color:#10a764;
    text-align:left;
    font-size:15px;
    margin:24px 0 16px; 
}

.repeatPrice{
    font-weight: bold;  
}

#rs_taxPrice{
    font-size:19px; 
}

.repeatsaleWrap .shopp{
    margin:2px 0;   
    color:#666;
    font-size:13px;
}

.repeatPrice table{
    width:100%; 
    margin-bottom:8px;
}

.repeatPrice th,.repeatPrice td{
    padding:4px 8px;
    text-align:left;    
    border:1px solid #ccc;
}

.repeatPrice th{
    background:#f2f2f2; 
}

#repeatGift{
    margin-top:24px;    
}

#repeatGift .giftName{
    text-align:left;
    font-weight:bold;
    margin-bottom:8px;  
}

#repeatGift .giftImg{
    display:inline-block;
    vertical-align:top;
    width:30%;  
}

#repeatGift .giftImg img{
    max-width:100%; 
}

#repeatGift .giftDetail{
    display:inline-block;   
    text-align:left
}

.btnRepeat{
    background:#10a764; 
    color:#fff;
    width:100%;
    font-size:17px;
    padding:15px 0;
    font-weight:bold;
}

/* 定期購入 */

.repeatTitle{

color:#10a764;

text-align:left;

font-size:15px;

margin:24px 0 16px;

}

.repeatPrice{

font-weight: bold;

}

#rs_taxPrice{

font-size:19px;

}

.repeatsaleWrap .shopp{

margin:2px 0;

color:#666;

font-size:13px;

}

.repeatPrice table{

width:100%;

margin-bottom:8px;

}

.repeatPrice th,.repeatPrice td{

padding:4px 8px;

text-align:left;

border:1px solid #ccc;

}

.repeatPrice th{

background:#f2f2f2;

}

#repeatGift{

margin-top:24px;

}

#repeatGift .giftName{

text-align:left;

font-weight:bold;

margin-bottom:8px;

}

#repeatGift .giftImg{

display:inline-block;

vertical-align:top;

width:30%;

}

#repeatGift .giftImg img{

max-width:100%;

}

#repeatGift .giftDetail{

display:inline-block;

text-align:left

}

.btnRepeat{

background:#10a764;

color:#fff;

width:100%;

font-size:17px;

padding:15px 0;

font-weight:bold;

}

【ベーシック】

▼HTML編集

<{if $repeatsale}>
                        <!--定期購入-->
                        <div id="repeatItem">
                            <h5>定期購入のご注文</h5>
                            <{$repeatsale_price}>
                            <{$repeatsale_price_table}>
                            <{$repeatsale_point}>
                            <table>
                                <col style="width: 25%;" />
                                <col style="width: 75%;" />
                                <tbody>
    <{if $production}>
                                    <tr>
                                        <th class="maker">製造元</th>
                                        <td><{$production}></td>
                                    </tr>
    <{/if}>
    <{if $origin}>
                                    <tr>
                                        <th class="origin">原産地</th>
                                        <td><{$origin}></td>
                                    </tr>
    <{/if}>
                                </tbody>
                            </table>
    <{if $add}>
                            <p class="special"><{$add}></p>
    <{/if}>
                            <{$repeatsale_bonus}>
                            <div id="itemBtn">
                                <p class="cycleTxt">お届けサイクルは決済画面で指定してください。</p>
    <{if $repeatsale_option}>
                                <div class="option">
                                    <{$repeatsale_option}>
                                </div>
    <{/if}>
                                <div class="amount">
                                    数量<{$repeatsale_quantity}>
    <{if $stock}>
                                    <b><font color="red">残りあと<{$stock}>個</font></b>
    <{/if}>
    <{if $option_stock_url}>
                                    <a href="<{$option_stock_url}>">在庫確認</a>
    <{/if}>
                                </div>
<div id="cart"><a href="<{$repeatsale_get_basket}>">
<input type="button" class="gre" value="定期購入を申し込む"></a></div>
                            </div>
                        </div>
                        <!--定期購入ここまで-->
<{/if}>

<{if $repeatsale}>

<h5>定期購入のご注文</h5>

<{$repeatsale_price}>

<{$repeatsale_price_table}>

<{$repeatsale_point}>

<table>

<tbody>

<{if $production}>

<tr>

</tr>

<{/if}>

<{if $origin}>

<tr>

</tr>

<{/if}>

</tbody>

</table>

<{if $add}>

<{/if}>

<{$repeatsale_bonus}>

<p class="cycleTxt">お届けサイクルは決済画面で指定してください。</p>

<{if $repeatsale_option}>

<{$repeatsale_option}>

</div>

<{/if}>

数量<{$repeatsale_quantity}>

<{if $stock}>

<{/if}>

<{if $option_stock_url}>

<{/if}>

</div>

</div>

<{/if}>

▼CSS編集

/*定期購入用*/

#itemContainer #repeatItem{
    margin-bottom:16px;
}

/* 定期購入タイトル */
#itemContainer h5{
    text-align:center;
    border-bottom:1px dashed #999;
    padding-bottom:4px;
    margin-bottom:4px;
}

#itemContainer .repeatPrice{
    overflow:hidden;
}

/* 価格表 */
#itemContainer .repeatPrice table{
    float:right;
    width:70%;
    margin:5px 0;
    border:1px solid #999;
}

#itemContainer .repeatPrice th{
    background:#ffcccc;
}

#itemContainer .repeatPrice td{
    text-align:right;
}

/* お届けサイクル */
#itemContainer #itemBtn .cycleTxt{
    font-size:13px;
    text-align:left;
    margin-bottom:4px;
}

/* 景品 */
#itemContainer #repeatGift{
    margin:8px auto;
    background:#eee;
    overflow:hidden;
    _zoom:1;
}

#itemContainer #giftList li{
    overflow:hidden;
    _zoom:1;
    margin:8px;
    background:#fff;
    border:1px solid #ccc;
}

#itemContainer .giftWrap{
    margin:8px;
    overflow:hidden;
    _zoom:1;
}

#itemContainer .giftName{
    text-align:left;
    font-weight:bold;
    font-size:13px;
    margin-bottom:4px;
}

#itemContainer .giftImg{
    float:left;
    width:100px
}

#itemContainer .giftDetail{
    float:right;
    width:160px;
}

#itemContainer .giftDetail p{
    text-align:left;
    font-size:12px;
}

/*定期購入用*/

#itemContainer #repeatItem{

margin-bottom:16px;

}

/* 定期購入タイトル */

#itemContainer h5{

text-align:center;

border-bottom:1px dashed #999;

padding-bottom:4px;

margin-bottom:4px;

}

#itemContainer .repeatPrice{

overflow:hidden;

}

/* 価格表 */

#itemContainer .repeatPrice table{

float:right;

width:70%;

margin:5px 0;

border:1px solid #999;

}

#itemContainer .repeatPrice th{

background:#ffcccc;

}

#itemContainer .repeatPrice td{

text-align:right;

}

/* お届けサイクル */

#itemContainer #itemBtn .cycleTxt{

font-size:13px;

text-align:left;

margin-bottom:4px;

}

/* 景品 */

#itemContainer #repeatGift{

margin:8px auto;

background:#eee;

overflow:hidden;

_zoom:1;

}

#itemContainer #giftList li{

overflow:hidden;

_zoom:1;

margin:8px;

background:#fff;

border:1px solid #ccc;

}

#itemContainer .giftWrap{

margin:8px;

overflow:hidden;

_zoom:1;

}

#itemContainer .giftName{

text-align:left;

font-weight:bold;

font-size:13px;

margin-bottom:4px;

}

#itemContainer .giftImg{

float:left;

width:100px

}

#itemContainer .giftDetail{

float:right;

width:160px;

}

#itemContainer .giftDetail p{

text-align:left;

font-size:12px;

}

定期購入機能

定期購入スマホデザインの設定

定期購入で商品詳細ページに追加されるソース

【Primary】

【ベーシック】