アクセス方法
ここでのブランディング編集には Shopify Plus プランが必要です。Shopify がアプリによるチェックアウトブランディングの読み書きを許可しているのは Plus のみのため、他のプランではこれらの設定を保存できません。ストアが Plus でない場合は、代わりに Shopify チェックアウトエディターで同じ変更を行ってください: Shopify 管理画面の設定 → チェックアウト → カスタマイズ。
Design system
Global colors
- Brand – プライマリブランドカラー。
- Accent – インタラクティブな要素やハイライト要素に使用。
- Decorative – 補助的な装飾要素に使用。
- Success – 確認完了の状態。
- Warning – 注意喚起のメッセージ。
- Critical – エラーとアラート。
- Info – 情報メッセージ。
サーフェスとボタンの色はここでは設定しません。Advanced > Color schemes にあります。
タイポグラフィ
- Font size – Base size と、そこから残りのタイプスケールを導出する Scale ratio を設定します。
- Primary font – 通常のテキスト、ボタン、フォームコントロールなど、ほとんどのコンポーネントに使用されます。Font family、Base weight、Bold weight を選択します。
- Secondary font – 見出しコンポーネントに使用され、同じ 3 つのコントロールがあります。
角の丸み
Customizations
- Corner radius – Small、Medium、Large、または None(角ばった形)。
- Background – Solid または None。
- Vertical padding と Horizontal padding。
- Show border。
ボタンの色はカラースキームから継承されます。スキームの値が設定されていない場合はグローバルカラーが使われます。
フォームフィールド
- Corner radius
- Label position – Inside または Outside。
- Show border
商品サムネイル
- Show border
- Border radius
- Fit
- Badge background color – Accent(スキームのアクセントカラー)または Base(スキームのベースカラー)。
ヘッダー
- Layout – Placement(Top bar、Left section、Right section)と Alignment(Left、Center、Right)。
- Container – Padding、Color scheme、Show divider。
コンテンツエリア
メインエリア
- Section containers – 各セクションを囲む背景とボーダー: Background、Show border、Border style、Border weight。
- Section dividers – セクション間に表示される線。
注文サマリー
- Container – 注文サマリーコンテナ全体に適用される Color scheme。
- Section dividers – Show divider、Border style、Border weight。
- Section containers – 各セクションの背景とボーダー: Show border、Background、Border style、Border weight、Color scheme、Corner radius、Padding、Shadow。
- Layout – Placement と Alignment。
- Container – Show footer content、Padding、Color scheme、Show divider。
Advanced
カラースキーム
- Scheme 1 - Main area
- Scheme 2 - Supporting areas
- Buttons – メインの支払いボタンと補助アクションに使用。Primary button と Secondary button は個別に設定し、それぞれにデフォルト状態とホバー状態があります。
- Form controls – テキストフィールド、ドロップダウン、チョイスリストに使用。
- Base surfaces – サーフェスの背景、本文テキスト、および補助的な役割: ボーダー、アクセント(リンクとフォーカス)、装飾(控えめなハイライト)、アイコンカラー。