こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回は、買い物かごページに【あといくらで送料無料】になるかを表示することで、ついで買いをねらえる『あと○円で送料無料』を表示する方法をご紹介します！
※この記事はベーシックモードでの表示方法をご案内します。
クリエイターモードのソース例はクリエイターモードで"あと〇円で送料無料"を表示しようをご参照ください。
ついで買いを訴求できる！"あと〇円で送料無料"を表示しよう
それでは、早速みていきましょう。
設定方法
【1】送料無料にする金額を設定する
【ショップ作成】 > 【配送関連の設定】 > 【配送の設定】
配送方法を登録し『送料設定』で「 注文金額 [ ] 円以上は送料無料」を選択し、
送料無料に設定したい金額を入力します。
設定方法は、オンラインマニュアル「配送の設定」を参考にしてください。
【2】送料無料にする条件を設定する
【ショップ作成】 > 【配送関連の設定】 > 【配送タイプの設定】
『あと○円で送料無料の設定』で「送料無料にする条件」を設定してください。
買い物かごページに表示したい文言がある場合、「買い物カゴ画面での送料無料表示」欄に入力してください。
設定方法は、オンラインマニュアル「配送タイプの設定」を参考にしてください。
・【1】の『送料設定』で「有料」にチェックしている場合、【送料無料にする条件】で「配送方法ごとに設定した注文金額で送料無料」は選択できません。
【3】買い物かごページをデザインする
「ベーシックモード」各カスタマイズテンプレートと、スマートフォンの各テンプレートの初期値のソースを適用することで、買い物かごページに表示することができます。
▼PC HTML例
【ショップデザイン（PC）】>【内部ページ編集Ⅰ】>【買い物かごページ管理】
に下記のタグを入力することで表示できます。
|
1 2 3 4 |
<div class="carriageWrap"> <p class="carriageMsg1">[CARRIAGE_MSG1]<!-- あと○円で送料無料を表示 --></p> <p class="carriageMsg2">[CARRIAGE_MSG2]<!-- ご案内文言を表示 --></p> </div> |
↓このように表示されます。
・「あと○円で送料無料」と送料無料に達した際に表示されるテキストは変更することはできません。
▼スマホ HTML例
【ショップデザイン（スマホ）】>【スマホデザインの設定】
適用中のスマホテンプレートの「編集」をクリック【買い物カゴ画面】
に下記のタグを入力することで表示できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<{* 送料無料 *}> <{if $free_carriage.is_enabled}> <div class="infoCarriage"> <{if $free_carriage.price != 0}> <div class="yetCarriage carriageContent"> <p class="carriageText">あと<em><{$free_carriage.price}></em>円で送料無料です</p> <{if $free_carriage.message}> <p class="carriageMesseage"><{$free_carriage.message}></p> <{/if}> </div> <{else}> <div class="freeCarriage carriageContent"> <p class="carriageText">今回のお買い物は<em>送料無料</em>になります</p> <{if $free_carriage.message}> <p class="carriageMesseage"><{$free_carriage.message}></p> <{/if}> </div> <{/if}> </div> <{/if}> |
↓このように表示されます。
完了！
いかがでしたでしょうか。
あと〇円で送料無料になるならもう一商品購入しようかな、とかんたんについで買いを訴求できる設定ですのでショップの運用に合わせて表示してみましょう。
それではまた！
