> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://molsoft.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# ポップアップのカスタマイズ - Popup Customization

ユーザー体験を向上させるために、条件を満たしていない場合に表示される警告ポップアップをカスタマイズしましょう。ポップアップのカスタマイズは、店舗のブランディングに合わせた警告ポップアップを簡単に作成できる強力な方法です。

ポップアップカスタマイズ & 一般翻訳に関するチュートリアルをこちらでご覧ください [HERE](https://www.loom.com/share/a5e4b80f1241434d81f3bbe2446ebb2f?sid=bc851b26-ee24-4c5c-be8f-82a4c52eafb6).

---

## 目次

1. [概要](#2-overview)
2. [色のカスタマイズ](#2-color-customization)
3. [カスタムCSS](#2-custom-css)
4. [リアルタイムプレビュー](#2-real-time-preview)

---

## 概要

ポップアップカスタマイズを使用して、次の項目を設定できます:

* **背景色**
* **フォント色**
* **ボタンの色**
* **ボタンのテキスト色**
* **カスタムCSS**

---

## 色のカスタマイズ

### 背景色

ポップアップの背景色を設定する色を選択します。

### フォント色

ポップアップに表示されるテキストの色を選択します。

### ボタンの色

ポップアップ内のボタンの色を選択します。

### ボタンのテキスト色

ボタンに表示されるテキストの色をカスタマイズします。

---

## カスタムCSS

より細かいコントロールを望む方のために、「カスタムCSS」テキストボックスが利用可能です。特定のスタイル設定には、以下のIDを使用してください:

* #mincart-popup-container
* #mincart-title
* #mincart-limit-list
* #mincart-button

**CSSの例:**

#mincart-popup-container {  
  border-radius: 5px;  
}

#mincart-title {  
  font-size: 50px;  
}

#mincart-limit-list {  
  font-size: 20px;  
}

#mincart-button {  
  font-size: 16px;  
}

ポップアップのサイズを調整する場合は、以下を追加してください:
#mincart-popup-container {  
  max-width: 500px;  
}

---

## リアルタイムプレビュー

変更内容をリアルタイムでプレビューセクションで確認できます。これにより、保存して変更を実施する前に、確認した通りの結果を得られることが保証されます。

---