ポップアップのカスタマイズ - Popup Customization
ユーザー体験を向上させるために、条件を満たしていない場合に表示される警告ポップアップをカスタマイズしましょう。ポップアップのカスタマイズは、店舗のブランディングに合わせた警告ポップアップを簡単に作成できる強力な方法です。
ポップアップカスタマイズ & 一般翻訳に関するチュートリアルをこちらでご覧ください HERE.
概要
色のカスタマイズ
カスタム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;
}
変更内容をリアルタイムでプレビューセクションで確認できます。これにより、保存して変更を実施する前に、確認した通りの結果を得られることが保証されます。
ポップアップカスタマイズ & 一般翻訳に関するチュートリアルをこちらでご覧ください HERE.
目次
概要
色のカスタマイズ
カスタムCSS
リアルタイムプレビュー
概要
ポップアップカスタマイズを使用して、次の項目を設定できます:
背景色
フォント色
ボタンの色
ボタンのテキスト色
カスタム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;
}
リアルタイムプレビュー
変更内容をリアルタイムでプレビューセクションで確認できます。これにより、保存して変更を実施する前に、確認した通りの結果を得られることが保証されます。
更新日 28/10/2024
ありがとうございます