商品ページを開いた時点で「定期決済」「１回決済」がどちらも選択されていない状態にし、お客様が「定期決済」か「１回決済」を自分で選択してから注文に進む導線を作ることができます。
それにより、デフォルトで選択されていることに気づかず、意図せず注文してしまうことを防ぐことができます。
年配のお客様が多いストアでは、次のようなお困りごとが起きることがあります。
商品ページを開くと「定期購入」または「１回購入」のどちらかが最初から選択されている
そのことに気づかないまま注文し、意図していなかった購入方法になってしまう
そのため、「デフォルトではどちらも選択させず、お客様自身に選択してもらってから注文に進ませたい」「初期状態を未選択とし、未選択のまま進もうとするとエラーで止まるようにしたい」というご要望をいただくことがあります。
定期購買アプリのウィジェットは、「定期購入」「１回購入」のいずれか一方が必ず選択された状態が仕様です。
設定によって、どちらを初期選択にするかを変えることはできますが、「どちらも初期選択させない状態」を作ることはできません。
そのため、「初期状態を未選択とし、未選択のまま進もうとするとエラーで止まるようにする」といった挙動をウィジェット上で実現することはできません。
そこで発想を変えます。
ウィジェット経由で選ばせるのをやめ、「定期購入」か「１回購入」か選ぶこと自体を次のページへ進むきっかけにします。
お客様がボタンやリンクを押した瞬間に購入方法が決まる仕組みにすることで、気づかないまま意図しない方法で注文してしまうことがなくなります。
これを実現する方法が2つあります。
商品ページ上にウィジェットを表示させず、「定期購入はこちら」「１回購入はこちら」の2つのボタン（リンク）を設置します。
お客様がどちらかを押すと、それぞれの購入ページへ進みます。（BuyLink機能）
商品を1つで管理したまま導線だけを分けられるため、商品管理はシンプルなままにできます
「定期専用商品」と「一回専用商品」を別々の商品として作成し、それぞれの商品ページから相手の商品ページへリンクを貼ります。
商品自体が分かれているため導線が最も明快ですが、商品や在庫の管理は2つ分になります。
どちらの方法でも「選ばないと次に進めない（=選択が前進を兼ねる）」状態を作ることができます。
商品管理をシンプルに保ちたい場合は方法A、導線の分かりやすさを優先したい場合は方法Bがおすすめです。
こちらのページを参考に、商品ページに「定期購入はこちら」「１回購入はこちら」の2つのボタンを設置してください。
サンプルコードは以下のように変更して挿入してください。
<style>
.subscription-button{
width:100%;
border:1px solid #000;
text-align:center;
padding: 10px;
background-color:#245;
margin-bottom:10px;
}
</style>
<a href="#" style="text-decoration:none;color:#fff; "><div class="subscription-button">定期購入はこちら</div></a>
<a href="#" style="text-decoration:none;color:#fff;"><div class="subscription-button"> １回購入はこちら</div></a>このように表示され、動線を分けることができます。
定期専用商品ページは、こちらのページを参考に作成してください。
テーマのカスタマイズ画面で、各商品ページに相手の商品ページへのリンクを追加します。
イメージとしては、以下のようになります。
定期専用商品のページ → 「１回購入はこちら」のリンクを設定
一回購入専用商品のページ → 「定期購入はこちら」のリンクを設定
こちらのページを参考に、「１回購入はこちら」ボタンを設置してください。
サンプルコードは以下のように変更して挿入してください。
（#に１回購入専用商品のURLを設定）
<style>
.subscription-button{
width:100%;
border:1px solid #000;
text-align:center;
padding: 10px;
background-color:#245;
margin-bottom:10px;
}
</style>
<a href="#" style="text-decoration:none;color:#fff;"><div class="subscription-button">１回購入はこちら</div></a>設定すると、このように表示されます。
こちらのページを参考に、「定期購入はこちら」ボタンを設置してください。
サンプルコードは以下のように変更して挿入してください。
（#に定期購入専用商品のURLを設定）
<style>
.subscription-button{
width:100%;
border:1px solid #000;
text-align:center;
padding: 10px;
background-color:#245;
margin-bottom:10px;
}
</style>
<a href="#" style="text-decoration:none;color:#fff;"><div class="subscription-button">定期購入はこちら</div></a>設定すると、このように表示されます。