要点
カートドロワーの送料計算ツールは、ドロワーを第二のチェックアウトにすることなく、配送先と送料の疑問に答えるべきです。小計や購入ボタンの近くに配置し、折りたたんだ状態はコンパクトに保ち、ドロワーの閉じるボタンと購入ボタンを残し、カートが変わったら再計算し、キーボード、タッチ操作、スマートフォン、テーマ更新後の動作をテストしましょう。ドロワーはテーマ固有のため、実際に公開しているテーマで互換性を確認する必要があります。
ドロワー本来の役割を損なわない
カートドロワーは、カートを確認して買い物を続けるかチェックアウトするためのものです。送料計算ツールはその判断を支えるもので、主役になってはいけません。短い案内、段階的な表示、小計や購入ボタンの横でも読みやすいコンパクトな結果を心がけましょう。
カートが変わったら更新する
古い見積もりは、見積もりがないより悪い結果を招きます。商品の追加、削除、数量変更によって、重量、小計、プロファイルの組み合わせ、送料無料の条件が変わることがあります。計算ツールは状態を更新するか、新しい計算をはっきり促すべきです。
狭く動的なスペースに合わせて設計する
ドロワーは幅が狭く、スクロールすることがよくあります。横方向にはみ出さないようにし、タップしやすい大きさを保ち、購入ボタンを隠さず、結果の変化を支援技術に伝えましょう。読み込み中もスペースを確保し、ドロワーの表示がずれないようにします。
テーマの変更後に再テストする
テーマの更新で、ドロワーのマークアップ、クラス名、表示方法が変わることがあります。使用したバージョンとセレクターを記録し、テーマ更新時の確認項目に計算ツールを必ず含めましょう。
チェックリスト
- 小計や購入ボタンの近くに表示
- 折りたたんだ状態はコンパクト
- 横方向のはみ出しなし
- 購入ボタンを操作できる
- カート更新後に再計算
- 読み込み中と「料金なし」の表示が収まる
- キーボードのフォーカス順が自然
- 結果の変化が読み上げられる
- スマートフォンでテスト済み
- テーマ更新時に再テスト
よくある質問
Shopifyのテーマはすべて同じカートドロワーを使っていますか？
いいえ。ドロワーのマークアップと動作はテーマやバージョンによって異なるため、互換性のテストが必要です。
計算ツールは自動で開くべきですか？
商品カタログで送料が最大の判断材料でない限り、通常はお客様が見積もりを求めるまでコンパクトにしておきましょう。
結果はどこに表示すべきですか？
入力欄と小計の近くに表示し、購入ボタンが見えて操作できる状態を保ちましょう。