# カートドロワー

> **学べること**
>
> * スライドアウト式カートドロワーの有効化とスタイル設定方法
> * 背景やFOMOタイマーを含む高度なカスタマイズオプション
> * より高いコンバージョンのためにカート体験を最適化する方法

***

## 📋 概要

この **カートドロワー** は、顧客が商品をカートに追加したときに表示されるスライドアウトパネルです。現在のページを離れずにカート内容を確認できることで購入フローが改善され、コンバージョン率の向上とユーザー体験の強化につながります。

> 💡 **注意**：これは従来のカートページに代わるものです。カートドロワーまたはカートページのいずれか一方を使用できますが、同時に両方を使用することはできません。

***

## 🔧 有効化方法

1. 移動先： **テーマ設定** > **カートドロワー**
2. 切り替え： **カートドロワーを有効にする** を `オンにする`
3. 以下のカスタマイズオプションを設定してください

***

## 🎨 基本のスタイリングオプション

### **色と外観**

**背景色**

* メインドロワーパネルの背景をカスタマイズ
* デフォルト： `#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形式を使用してください
* さまざまなネットワーク速度で読み込み時間をテストしてください
* サイト全体のパフォーマンスへの影響を監視してください

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/english-ja/readme-1/theme-settings/cart-drawer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.