メインコンテンツへスキップ

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

  • 更新

ショップデザイン / テンプレート選択・編集 / スマホデザインの設定

ショップデザイン（ベーシックモード）で有料オプション『定期購入』をご利用の場合、スマートフォン用ショップの商品詳細ページに定期購入のタグを設定して表示します。

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

ショップデザイン / テンプレート選択・編集 / スマホデザインの設定　から新しくテンプレートを追加します。

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

  • 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}>
<!--定期購入ここまで-->

▼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;
}

【ベーシック】

▼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}>
<!--定期購入ここまで-->

▼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;
}

関連記事