成功
購入ボタン
チェックアウトオプション、購入詳細、固定購入動作を使って商品購入エリアをカスタマイズします。
このブロックを使用して、商品ページの主な購入アクションを制御します。テーマコンテンツの構成全体については、セクションとブロックに関するShopifyドキュメントをご覧ください。カート追加ボタンに加えて、より速いチェックアウトオプション、フルフィルメントの詳細、支払いに関する案内、スクロールしても主要なアクションを表示し続ける固定購入バーを表示できます。
これらの設定では、主なボタンの周囲にどの程度の購入サポートを表示するかを調整します。商品がシンプルで判断しやすい場合は、最小限の構成が適しています。より詳しい構成にすると、追加の情報が必要な商品で迷いを減らせます。
ボタンアイコンは、主なアクションを補強する小さな視覚要素です。特に商品フォームの近くに複数のコントロールがある場合、カート追加ボタンを目立たせるのに役立ちます。
追加のチェックアウトボタンは、購入意欲の高い顧客が購入までの手順を短縮したいときに便利です。ページ内ですでに商品フォーム周辺に多くの要素がある場合は、これらをオフにすると主なカート追加アクションに注意を集められます。
送料無料情報、ローカル受け取りオプション、支払いアイコンは、ボタンの近くで購入前によくある質問に答えるのに役立ちます。明確さが増す場合に使用し、購入エリアが混み合って見え始める場合は、サポート要素を詰め込みすぎないようにしてください。
スクロール時の固定バーは、長い商品ページで特に役立ちます。購入者が最初の購入エリアを離れて詳細を読んだり、メディアを閲覧したり、情報を比較したりしても、購入アクションをすぐ使える位置に保てます。
ギフトカード受取人オプションは、ギフトカード商品にのみ適用されます。有効にすると、ギフトカードをメールで他の人に送るオプションが追加されます。
このブロックは、意思決定と購入アクションに集中させてください。利用可能なすべてのオプションを有効にすると、購入エリアが煩雑に見え、主なボタンの存在感が弱まる場合があります。
分割払い情報は、支払いの柔軟性が安心感につながる高価格帯の商品で特に有用です。このメッセージがカタログや設定に関係しない場合は、オフのままにするとブロックをすっきり保てます。
標準ブロック設定
Section titled “標準ブロック設定”このブロックでは、ここで上書きしない限り、テーマの主要ボタンのスタイルが使用されます。購入ボタンにより強いコントラスト、周囲のレイアウトとのよりよい視覚的な整合性、この特定の商品エリア向けのカスタムホバー状態が必要な場合は、カラーコントロールを使用してください。
デフォルト状態とホバー状態を視覚的につなげ、ボタンが一貫した1つのアクションとして感じられるようにしてください。読みやすさと存在感を保つために、テキスト、枠線、背景の組み合わせを慎重に確認してください。
表示コントロールを使用して、このブロックをデスクトップまたはモバイルで表示・非表示にします。これは、より小さな画面とより大きな画面で異なる商品ページレイアウトを作成している場合に便利です。
ブロックをいずれかのデバイスサイズで非表示にする場合、そのレイアウトの別の場所で購入導線がはっきり表示されていることを確認してください。
使用上の注意
Section titled “使用上の注意”- 購入エリアはシンプルに保ってください。 顧客の判断を助ける補足情報だけを表示し、ノイズを増やすものは削除します。
- 長いページでは固定購入を使ってください。 購入者がメインの商品フォームを大きく過ぎてスクロールする可能性がある場合は、固定バーを有効にします。
- 機能を商品タイプに合わせてください。 ギフトカード受取人オプションはギフトカード商品に適しており、分割払いメッセージは高価格帯の商品でより有用です。
- ボタンのコントラストを確認してください。 色を上書きする場合は、デフォルト状態とホバー状態の両方でボタンが見やすく読みやすいことを確認してください。
- モバイルとデスクトップを別々に計画してください。 表示コントロールを使う場合は、両方のビューポートサイズを確認してください。購入エリアはレイアウトによって異なる表示になることがあります。
- フォームの状態を読みやすく保ってください。 購入エリアに顧客入力が含まれる場合は、空欄、検証、送信済みの各状態が見やすいことを確認してください。特に複数の購入オプションを表示する場合は重要です。