カートドロワー
Plain Jane および Plain Jane Interactive 向け
学べること
スライド式カートドロワーの有効化とスタイリング方法
背景やFOMOタイマーを含む高度なカスタマイズオプション
コンバージョン向上のためのカート体験の最適化方法
📋 概要
この カートドロワー は、顧客が商品をカートに追加したときに表示されるスライド式パネルです。現在のページを離れることなくカートを確認できるため、ショッピングフローが改善され、コンバージョン率の向上とユーザー体験の強化に寄与します。
💡 注意：これは従来のカートページの代わりになります。カートドロワーまたはカートページのどちらか一方を使用できますが、同時に両方を使用することはできません。
🔧 有効化方法
に移動 テーマ設定 > カートドロワー
切り替え カートドロワーを有効化 を
をオンにする以下のカスタマイズオプションを設定してください
🎨 基本のスタイリングオプション
色と外観
背景色
メインのドロワーパネルの背景をカスタマイズ
デフォルト：
#ffffff（白）任意の16進カラー値に対応
本文色
ドロワー内の一般的な文字色を制御します
デフォルト：
#000000（黒）商品名、数量、および一般的なコンテンツに影響します
ボタンのスタイリング
ボタンカラー：主要アクションボタンの背景（カートに追加、チェックアウト）
ボタンの文字色：ボタン上の文字色
デフォルト：黒背景に白文字
ドロワーの寸法
ドロワー幅
300pxから320pxまで調整可能な幅
デフォルト：
320pxモバイルとデスクトップ表示に最適化されています
⏰ FOMOタイマーフィーチャー
組み込みのFOMO（見逃しの恐れ）タイマーで緊急性を作り、購入決定を促進します。
タイマーの設定
FOMOタイマーを表示
緊急性タイマーを有効/無効に切り替えます
デフォルト：有効
タイマーのスタイリング
FOMOタイマーの背景色：アラートバナーの背景（デフォルト：
#ffeb3b− 黄色）FOMOタイマーの文字色：タイマーの文字色（デフォルト：
#333333− ダークグレー）
タイマーの内容
FOMOタイマーのテキスト：カスタマイズ可能な緊急メッセージ
デフォルト：「オファーはあと：で終了します」
例：「期間限定オファー！」「カートの有効期限が近づいています！」「急いで！残りわずかです！」
タイマーの期間
FOMOタイマーの期間：カウントダウン時間を設定（1〜72時間）
デフォルト：24時間
タイマーは各新しいカートセッションでリセットされます
💰 価格と通貨のオプション
通貨の表示
通貨とともに価格を表示
価格に通貨記号／コードを表示するかどうかを切り替えます
デフォルト：無効（通貨表示なしで価格を表示）
国際的なストアやマルチカレンシー設定に便利です
🖼️ 高度な背景カスタマイズ
カート項目の背景
カートドロワーをカスタム背景画像で変身させましょう：
背景画像
カート項目エリア用のカスタム背景画像をアップロード
標準的な画像フォーマット（JPG、PNG、WebP）に対応
推奨サイズ：500x600px以上
背景サイズのオプション
カバー：領域全体を覆うように画像を拡大（切り抜かれる場合あり）
コンテイン：領域内に収まるように画像を縮尺（画像全体を表示）
自動：画像の自然なサイズを使用
背景の位置
中央：利用可能なスペースの中央に画像を配置
左上：画像を左上に配置
右上：画像を右上に配置
左下：画像を左下に配置
右下：画像を右下に配置
🚀 ベストプラクティス
デザインの推奨事項
色の調和
全体のテーマに合う色を使用してください
アクセシビリティのために十分なコントラストを確保する
異なるデバイスでの可読性をテストしてください
FOMOタイマーの使い方
効果を維持するために控えめに使用してください
緊急性はあるが攻撃的でないメッセージを選んでください
対象ユーザーに応じて異なる期間設定をテストしてください
背景画像
テキストの邪魔をしない、控えめで低コントラストの画像を使用してください
読み込みを速くするために画像ファイルサイズを最適化してください
モバイルでの表示を考慮してください
コンバージョン最適化
明確なコールトゥアクション
チェックアウトボタンを目立たせ、アクセスしやすくしてください
重要なボタンにはコントラストのある色を使用してください
購入までの導線をシンプルで明確に保ってください
モバイル体験
実際のモバイル端末でドロワーの機能をテストしてください
タッチターゲットのサイズが適切であることを確認してください
小さい画面でもテキストが読みやすいことを確認してください
読み込みパフォーマンス
ウェブ向けに背景画像を最適化してください
遅い接続でのドロワーの開く速度をテストしてください
サイト全体のパフォーマンスへの影響を監視してください
🔧 トラブルシューティング
一般的な問題
ドロワーが表示されない場合
「カートドロワーを有効化」がオンになっているか確認してください
カートページが競合していないか確認してください
ドロワーをトリガーするために商品を追加してテストしてください
FOMOタイマーが動作しない場合
設定でタイマーが有効になっていることを確認してください
ブラウザのlocalStorageのサポートを確認してください
タイマーの期間が正しく設定されていることを確認してください
背景画像の問題
画像が正しくアップロードされていることを確認してください
画像のファイルサイズとフォーマットを確認してください
異なる背景サイズ設定をテストしてください
モバイル表示の問題
実際のモバイル端末でテストしてください
小さい画面でのドロワー幅を確認してください
タッチ機能が正しく動作することを確認してください
📱 モバイルに関する考慮点
ドロワーは自動的にモバイル画面サイズに適応します
タッチに優しいコントロールとボタン
指での操作に適した間隔の最適化
小さい画面向けに簡素化されたレイアウト
⚡ パフォーマンスティップス
可能な場合は背景画像を200KB以下に抑えてください
より良い圧縮のためにWebP形式を使用してください
さまざまなネットワーク速度で読み込み時間をテストしてください
サイト全体のパフォーマンスへの影響を監視してください
最終更新