テーマと共有コントロール
DEUNA チェックアウトウィジェットで共通して使用する色、タイポグラフィ、寸法、境界線、入力動作を設定します。
Live CustomStyle example
ライブプレビュー
YOURSTORE
Secure checkoutChoose a payment method
CardWallet
以下の theme オブジェクトは、チェックアウト全体で一貫させる視覚設定に使用します。個別画面の上書きを追加する前に、これらのデフォルトを設定してください。
色#
プライマリ／セカンダリ背景、メインテキスト、プライマリボタンの色を設定します。すべての色値は HEX 形式で指定してください。
JSON
{
"theme": {
"colors": {
"primaryTextColor": "#323237",
"backgroundSecondary": "#FFFFFF",
"backgroundPrimary": "#FFFFFF",
"buttonPrimaryFill": "#17171A",
"buttonPrimaryHover": "#69696E",
"buttonPrimaryText": "#FFFFFF",
"buttonPrimaryActive": "#116C8E"
}
}
}フォント#
サポートされる書体は Heeb, Hind, Lato, Montserrat, Mukta, Nunito, Open Sans, Quicksand, Roboto, Raleway, San Francisco, および Ubuntuです。別の書体を使用する前に、DEUNA Technical Account Manager（TAM）にお問い合わせください。
JSON
{
"theme": {
"typography": {
"primaryFontFamily": "Lato"
}
}
}コントロールの寸法#
と borderRadius および height をピクセル単位で指定します。コントロールのデフォルトの高さは 40pxです。使いやすさを保つため、 30px から 60px までの値を使用してください。
JSON
{
"theme": {
"buttons": {
"borderRadius": "20px",
"height": "50px"
},
"inputs": {
"borderRadius": "50px",
"height": "50px"
}
}
}状態別の入力境界線#
| 州 | 意味 | デフォルトの色 |
|---|---|---|
| 無効 | 顧客はこの項目を編集できません。 | #B4B4B7 |
| 有効 | 項目は利用可能ですが、まだ入力されていません。 | #D9D9DB |
| フォーカス | 顧客が項目を操作しています。 | #404046 |
| 入力済み | 項目に有効なデータが含まれています。 | #8E8E92 |
| エラー | 項目が無効か、必須値が不足しています。 | #E11900 |
JSON
{
"theme": {
"colors": {
"inputBorder": "#D9D9DB",
"inputBorderError": "#F1998E",
"inputEnhancerFill": "#1AE1D7",
"inputBorderPositive": "#66D19E"
}
}
}入力動作#
設定 inputMode ～ clearable でリセットコントロールを表示、 validated で成功／エラーアイコンを表示、または none でどちらも表示しません。リセットコントロールと検証コントロールを同時に有効にすることはできません。
JSON
{
"theme": {
"inputs": {
"inputMode": "clearable"
}
}
}サポートされるすべての項目と型については、 CustomStyle プロパティリファレンス.