商品ページで、定期購買プランの選択画面（ウィジェット）が表示される前に、「今すぐ購入」ボタンをクリックしてしまうと、通常商品として購入されてしまう事象が確認されました。

本事象は、Shopify の不具合と想定され、暫定対策として動的チェックアウトボタンを遅れて表示させるコードを作成しました。

こちらのコードを設置いただくことで、定期購買プランの選択画面（ウィジェット）表示後に「今すぐ購入」ボタンが表示されるようになりますので、下記ご確認下さいますようお願いいたします。

Subsc_plan_widget_1200_630.png

<aside> 📢 動的チェックアウトボタンの表示については、「今すぐ購入」のテキストボタン以外にも、「Amazon Pay」や「Shoppay」などの「決済手段で購入ボタン」が表示される場合がございます。動的チェックアウトボタンの種類と利用時の注意事項についても、本ページに解説を記載いたしておりますのでご確認下さいませ。

</aside>

<aside> ▶️ 目次

</aside>

コード設定方法

Shopify管理画面内の「テーマ」>「現在のテーマ」>「カスタマイズ」をクリック

image03.png

画面左上の「･･･」をクリックし、「コードを編集」を選択して下さい。

image04.png

商品ページ用のliquid内に設置頂いている、下記の記述を検索して下さい。

{% render 'huckleberry-subscription-widget-container' %}　

※設置箇所はテーマにより異なりますが 「product-form.liquid」「product.liquid」「product-details.liquid」「product-template.liquid」 などのliquid内に設置されているケースが多いようです。

image05.png

{% render 'huckleberry-subscription-widget-container' %} の直後に以下記述を追記して下さい。

{% if product.selling_plan_groups != empty %}
	<style>
	  .shopify-payment-button {
	    display: none!important;
	  }
	</style>
	<script type="text/javascript">
	  window.addEventListener('renderedSubscriptionWidget', () => {
	    const button = document.querySelector('.shopify-payment-button');
	    if (!button) return;
	
	    button.style.cssText = 'display:block!important';
	  });
	</script>
{% endif %}

image06.png

画面右上の「保存」ボタンをクリックして下さい。

image07.png

設定が完了すると「定期プラン」の選択画面（ウィジェット）表示後に、「今すぐ購入」ボタンが表示されるようになります。

image11.png

※Dawnの場合

Dawnは、huckleberry-subscription-widget-container.liquidが読み込まれない仕様のため、{% render 'huckleberry-subscription-widget-container' %} が存在しません。カスタマイズ画面からカスタムLiquid追加し、以下のコードを追記してください。

{% if product.selling_plan_groups != empty %}
{% style %}
.product-form {display: none !important;}
{% endstyle %}
<script type="text/javascript">
  window.addEventListener('renderedSubscriptionWidget', () => {
    const button = document.querySelector('.product-form');
    if (!button) return;
    button.style.cssText = 'display:block!important';
    });
</script>
{% endif %}

Untitled

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

現在、動的チェックアウトボタンは、サブスクリプション商品には未対応となっています。

参照元：Shopifyヘルプ「動的チェックアウトボタン」より

image01.png

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

動的チェックアウトボタンには「今すぐ購入」のテキストが表示されるものと、「AmazonPay」や「Shoppay」などの「決済手段で購入」ボタンの2種類があります。

参照元：Shopifyヘルプ「動的チェックアウトボタン」より

image02.png

上記2種類のうち、どちらのボタンが表示されるかは、Shopifyヘルプに下記の記載がございます。

参照元：Shopifyヘルプ「動的チェックアウトボタン」より

決済設定で有効化している決済方法のみ、お客様のオプションとして表示されます。外部サービスの簡単なチェックアウト方法を有効にしていない場合、ブランドなしのボタンのみが表示されます。

image10.png

上記の仕様に関して、ご不明な点がございましたらShopifyサポートへお問い合わせいただきますようお願いいたします。

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

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

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

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

Shopifyのサブスクリプション契約対応の決済手段（‣ ）以外が選択された場合には、サブスクリプション非対応のため、通常商品としての購入になります。

上記事象が発生しないようにするには、下記の記事を参考に動的チェックアウトボタンを「非表示」にしていただきますようお願いいたします。 参照元：Shopifyヘルプ「動的チェックアウトボタンを追加および削除する」

<aside> <img src="/icons/checklist_purple.svg" alt="/icons/checklist_purple.svg" width="40px" /> ヘルプページ