ブランド設定とテーマ
チェックアウト拡張機能の外観をブランドに合わせてカスタマイズします
最終更新日：2025-01-16
CheckoutOS拡張機能は、Shopifyチェックアウトのブランド設定を自動的に引き継ぎます。色、フォント、スタイルをさらに調整し、ブランドの個性に合った一貫性のある体験を作れます。
Dashboard → Settings → Brandingからブランド設定を開きます。
CheckoutOSはShopifyチェックアウトのブランド設定を尊重します。まずShopify Admin → Settings → Checkoutで基本の外観を設定し、CheckoutOSのブランド設定で拡張機能固有のカスタマイズを行ってください。
ブランドカラー
すべてのチェックアウト拡張機能で使うブランドのカラーパレットを定義します。
メインカラー
ブランドのメインカラーは次に使われます。
- 行動を促すボタン（Accept、Add to Order）
- 進捗バーの塗りつぶし
- 有効状態のインジケーター
- リンクの文字
/* CheckoutOS automatically generates these CSS variables */
--checkoutos-primary: #4F46E5;
--checkoutos-primary-hover: #4338CA;
--checkoutos-primary-light: #EEF2FF;
--checkoutos-primary-contrast: #FFFFFF;補助色
補助色はメインカラーを補完します。
- Accent Color — バッジ、強調表示、補助ボタン
- Success Color — 確認メッセージとチェックマーク
- Warning Color — 緊急性の表示とタイマー
文字の設定
CheckoutOSは既定でShopifyチェックアウトのフォントを使用します。特定の要素では上書きできます。
フォント設定
- Heading Font — アップセルのタイトルと拡張機能の見出し
- Body Font — 説明と本文
- Button Font — 行動を促すボタンの文字
CheckoutOSはGoogle Fontsとウェブセーフフォントに対応しています。独自のフォントはCSSで読み込めます。
独自のフォントの読み込みは、チェックアウトのパフォーマンスに影響する場合があります。追加のネットワークリクエストを避けるため、Shopifyテーマですでに読み込まれているフォントの使用をおすすめします。
ロゴ設定
購入後のアップセルページにロゴを追加し、ブランドの一貫性を保ちます。
ロゴをアップロードする
ロゴの位置を設定する
ダークモード版を設定する
ボタンのスタイル
操作ボタンの外観をカスタマイズします。
ボタンの形状
- Rounded — 柔らかな丸い角（半径8px）
- Pill — 両端を完全に丸める
- Square — 角を丸めない（半径0px）
- Custom — 独自の角丸半径を指定
ボタンのサイズ
- Small — 占有面積の小さいコンパクトなボタン
- Medium — バランスの取れたサイズ（推奨）
- Large — 強調するための目立つボタン
{
"primaryButton": {
"backgroundColor": "#4F46E5",
"textColor": "#FFFFFF",
"borderRadius": "8px",
"fontSize": "16px",
"padding": "12px 24px",
"hoverEffect": "darken"
},
"secondaryButton": {
"backgroundColor": "transparent",
"textColor": "#4F46E5",
"border": "1px solid #4F46E5",
"borderRadius": "8px"
}
}カスタムCSS
高度なカスタマイズには、すべてのCheckoutOS拡張機能に適用する独自のCSSを追加できます。
/* Target upsell offer cards */
.checkoutos-upsell-card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #E5E7EB;
}
/* Customize the accept button */
.checkoutos-accept-btn {
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
/* Style the countdown timer */
.checkoutos-timer {
background: linear-gradient(90deg, #EF4444, #DC2626);
color: white;
padding: 4px 12px;
border-radius: 999px;
}カスタムCSSの詳細度はShopifyチェックアウトのスタイルより低くなります。!importantの使用は控えめにし、さまざまな端末で十分にテストしてください。
プレビューとテスト
ブランド設定の変更は、公開前に必ずプレビューしてください。
- Live Preview — 編集中の変更をリアルタイムで確認
- Device Preview — デスクトップ、タブレット、モバイルの表示でテスト
- Test Mode — テストモードを有効にし、顧客に影響を与えず実際の注文で変更を確認
変更する
すべての端末でプレビューする
テストモードを有効にする
変更を公開する
次のステップ
さらにサポートが必要ですか？ サポートに問い合わせる