定期購買プランの選択画面表示後に「今すぐ購入」ボタンを表示させる方法

商品ページで、定期購買プランの選択画面(ウィジェット)が表示される前に、「今すぐ購入」ボタンをクリックしてしまうと、通常商品として購入されてしまう事象が確認されました。 本事象は、Shopify の不具合と想定され、暫定対策として動的チェックアウトボタンを遅れて表示させるコードを作成しました。
こちらのコードを設置いただくことで、定期購買プランの選択画面(ウィジェット)表示後に「今すぐ購入」ボタンが表示されるようになりますので、下記ご確認下さいますようお願いいたします。
notion image
📢
動的チェックアウトボタンの表示については、「今すぐ購入」のテキストボタン以外にも、「Amazon Pay」や「Shoppay」などの「決済手段で購入ボタン」が表示される場合がございます。動的チェックアウトボタンの種類と利用時の注意事項についても、本ページに解説を記載いたしておりますのでご確認下さいませ。

コード設定方法

Shopify管理画面内の「テーマ」>「現在のテーマ」>「カスタマイズ」をクリック
notion image
 
画面左上の「・・・」をクリックし、「コードを編集」を選択して下さい。
notion image
 
商品ページ用のliquid内に設置頂いている、下記の記述を検索して下さい。
JavaScript
※設置箇所はテーマにより異なりますが 「product-form.liquid」「product.liquid」「product-details.liquid」「product-template.liquid」 などのliquid内に設置されているケースが多いようです。
notion image
 
{% render 'huckleberry-subscription-widget-container' %} の直後に以下記述を追記して下さい。
Plain Text
notion image
 
画面右上の「保存」ボタンをクリックして下さい。
notion image
 
設定が完了すると「定期プラン」の選択画面(ウィジェット)表示後に、「今すぐ購入」ボタンが表示されるようになります。
notion image

定期購入(サブスク)商品の動的チェックアウトボタンの仕様について

現在、動的チェックアウトボタンは、サブスクリプション商品には未対応となっています。
参照元:Shopifyヘルプ「動的チェックアウトボタン」より
notion image

動的チェックアウトボタンの種類について

動的チェックアウトボタンには「今すぐ購入」のテキストが表示されるものと、「AmazonPay」や「Shoppay」などの「決済手段で購入」ボタンの2種類があります。
参照元:Shopifyヘルプ「動的チェックアウトボタン」より
notion image
上記2種類のうち、どちらのボタンが表示されるかは、Shopifyヘルプに下記の記載がございます。
参照元:Shopifyヘルプ「動的チェックアウトボタン」より
 
決済設定で有効化している決済方法のみ、お客様のオプションとして表示されます。外部サービスの簡単なチェックアウト方法を有効にしていない場合、ブランドなしのボタンのみが表示されます。
notion image
上記の仕様に関して、ご不明な点がございましたらShopifyサポートへお問い合わせいただきますようお願いいたします。

動的チェックアウトボタン別の注意事項について

「今すぐ購入」ボタン利用時

定期購買プランの選択画面(ウィジェット)が表示される前に「今すぐ購入」ボタンをクリックしてしまうと、通常商品として購入されてしまうため、本ページに記載のコード設置をお願いいたします。

「決済手段で購入」ボタン利用の場合

Shopifyのサブスクリプション契約対応の決済手段(利用できる決済方法について )以外が選択された場合には、サブスクリプション非対応のため、通常商品としての購入になります。
上記事象が発生しないようにするには、下記の記事を参考に動的チェックアウトボタンを「非表示」にしていただきますようお願いいたします。 参照元:Shopifyヘルプ「動的チェックアウトボタンを追加および削除する