チェックアウト、利用規約、ショッピングを続けるをカスタマイズする

カート > チェックアウトボタンを開き、ドロワーのメインアクションと周辺のコントロールを設定します。

ボタンの遷移先とテキストを選択

ボタンの遷移先をチェックアウトまたはカートページに設定します。チェックアウトボタンのテキストを編集し、ラベルにカート合計を表示する場合は{{total}}を残します。ボタンの高さとフォントサイズも調整できます。

ボタンの高さは36から64px、フォントサイズは12から24pxの範囲です。枠線付きのショッピングを続けるボタンもこれらのサイズを共有しますが、「テキストリンク」の外観には独自のコンパクトなスタイルが適用されます。

チェックアウトできる方法を確保してください。標準ボタンをオフにする場合は、高速チェックアウトも有効にします。ウォレットボタンを利用できない場合、ドロワーにはフォールバックとして標準ボタンを表示できます。

利用規約への同意を必須にする

同じチェックアウトボタンブロック内で、利用規約への同意を必須にするを有効にし、利用規約チェックボックスのテキストを編集します。利用規約必須メッセージは、詳細設定 > メッセージ > エラーメッセージで設定します。

チェックボックスはチェックアウトボタンの上に表示されます。ボックスがオンになるまで、ドロワーはチェックアウト操作をブロックします。高速ボタンも、この必須条件が満たされるまで待機します。これはドロワーのコントロールであり、Shopifyのチェックアウトに至るすべての経路に対する検証ルールではありません。

デモでは、「このデモカートを確認しました」というサンプルラベルを使用してゲートをテストします。メモを入力済みでもチェックボックスが空の場合、チェックアウトは無効のままです。実際のチェックボックスを設定する際は、ストアに適した文言を使用してください。

ショッピングを続けるボタンを追加

「ショッピングを続ける」ボタンを表示を有効にします。テキストを設定し、カートドロワーを閉じる、カートページに移動、またはリンクに移動のいずれかを選択します。カスタムリンクの場合は移動先を入力します。空欄にするとドロワーが閉じます。

外観で、ボタンまたはテキストリンクを選択します。テキストリンクはボックスのない下線付きテキストなので、フッターのスペースを節約できます。

このセカンダリボタンはチェックアウトボタンの下に表示されます。独立したドラッグ可能なブロックではなく、ここで設定します。

保存して、ストアフロントで各ボタンをテストします。チェックアウトが無効になっている場合は、必須の注文メモも有効になっているか確認してください。

フッター全体をテスト

カートに実際の商品を入れ、パソコンとスマートフォンでテストします。必須のメモとチェックボックスを完了してからチェックアウトを開き、商品と割引額を比較してください。この例では、「2個購入」割引後のクリーム2個の価格は$50.40です。「ショッピングを続ける」を選択すると、商品を削除せずにドロワーが閉じます。