定期購買ウィジェットの表示前に、購入ボタンが押されてしまう。
商品ページで、定期購買プランの選択画面（ウィジェット）が表示される前に、「今すぐ購入」ボタンをクリックしてしまうと、通常商品として購入されてしまう事象が確認されました。
本事象は、Shopify の不具合と想定され、暫定対策として動的チェックアウトボタンを遅れて表示させるコードを作成しました。
こちらのコードを設置いただくことで、定期購買プランの選択画面（ウィジェット）表示後に「今すぐ購入」ボタンが表示されるようになりますので、下記ご確認下さいますようお願いいたします。
動的チェックアウトボタンの表示については、「今すぐ購入」のテキストボタン以外にも、「Amazon Pay」や「Shoppay」などの「決済手段で購入ボタン」が表示される場合がございます。動的チェックアウトボタンの種類と利用時の注意事項についても、本ページに解説を記載いたしておりますのでご確認下さいませ。
コード設定方法
Shopify管理画面内の「テーマ」>「現在のテーマ」>「カスタマイズ」をクリック
画面左上の「･･･」をクリックし、「コードを編集」を選択して下さい。
商品ページ用のliquid内に設置頂いている、下記の記述を検索して下さい。
※設置箇所はテーマにより異なりますが
「product-form.liquid」「product.liquid」「product-details.liquid」「product-template.liquid」
などのliquid内に設置されているケースが多いようです。
{% render 'huckleberry-subscription-widget-container' %} の直後に以下記述を追記して下さい。
画面右上の「保存」ボタンをクリックして下さい。
設定が完了すると「定期プラン」の選択画面（ウィジェット）表示後に、「今すぐ購入」ボタンが表示されるようになります。
定期購入（サブスク）商品の動的チェックアウトボタンの仕様について
現在、動的チェックアウトボタンは、サブスクリプション商品には未対応となっています。
動的チェックアウトボタンの種類について
動的チェックアウトボタンには「今すぐ購入」のテキストが表示されるものと、「AmazonPay」や「Shoppay」などの「決済手段で購入」ボタンの2種類があります。
上記2種類のうち、どちらのボタンが表示されるかは、Shopifyヘルプに下記の記載がございます。
決済設定で有効化している決済方法のみ、お客様のオプションとして表示されます。外部サービスの簡単なチェックアウト方法を有効にしていない場合、ブランドなしのボタンのみが表示されます。
上記の仕様に関して、ご不明な点がございましたらShopifyサポートへお問い合わせいただきますようお願いいたします。
動的チェックアウトボタン別の注意事項について
「今すぐ購入」ボタン利用時
定期購買プランの選択画面（ウィジェット）が表示される前に「今すぐ購入」ボタンをクリックしてしまうと、通常商品として購入されてしまうため、本ページに記載のコード設置をお願いいたします。
「決済手段で購入」ボタン利用の場合
Shopifyのサブスクリプション契約対応の決済手段（ ）以外が選択された場合には、サブスクリプション非対応のため、通常商品としての購入になります。
上記事象が発生しないようにするには、下記の記事を参考に動的チェックアウトボタンを「非表示」にしていただきますようお願いいたします。
参照元：Shopifyヘルプ「動的チェックアウトボタンを追加および削除する」
ヘルプページ