ブランディング【アプリ画面での設定】

 
📝
チェックアウトページの色・フォントスタイル・背景などをカスタマイズできます。

ブランディングを開く

管理画面のアプリから「BiND-Checkout-UI」を選択し、ブランディングを開きます。
このページ内にある「カスタマイズ」へ進みます。
 

基本デザイン／グローバルカラーパレット・カラースキーム1・カラースキーム2

📝
設定項目に適用されるカラーパターンを設定することができます。 ※グローバルカラーパレットが初期値となり、カラースキーム1.2の設定が無い場合、適用されます
 
以下のページに反映されます。
  • 情報
  • 配送
  • 決済
  • サンキューページ
  • 注文状況
  • 注文
  • プロフィール
※サードパーティアプリやストア内のカスタマイズ要素によって、カラーが反映される箇所が異なります
本ページではカスタマイズがない場合の初期値に反映される項目を記載しています
 

グローバルカラーパレット

①アクセント

各ページのアクセントカラーとして主にフレームやリンクテキストに使用されます
 
例）情報ページ・・・フレーム
 
例）注文状況ページ・・・リンクテキスト
 

②クリティカル・・・必須項目の空欄時

注意書きになるため、目立つ仕様になるよう
設定するカラーによってはフロント画面で彩度を調整した状態で表示されます
 

③デコレート・・・

デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、この色が使われます。

④インフォ・・・

デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をインフォに指定している場合、この色が使われます。

⑤サクセス・・・

デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をサクセスに指定している場合、この色が使われます。

⑥ワーニング・・・注文ページ内の決済に関するお知らせ

その他、バリデーション（拡張機能）のお知らせ事項など
 

⑦ブランド・・・ボタンカラー

カラースキーム１

顧客情報の入力画面（チェックアウトページ内、左側のページ）に反映されます

ベース

  • アクセント・・・リンク
 
  • バックグラウンド・・・背景
 
  • ボーダー・・・表示画面の区切り
 
  • デコレート・・・
デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、この色が使われます。
 
  • アイコン・・・パンくずリスト「＞」
 
  • テキスト・・・項目タイトル

コントロール

  • アクセント・・・カーソル選択のフレーム
 
  • バックグラウンド・・・入力項目の背景
 
  • ボーダー・・・カーソル選択以外のフレーム
 
  • デコレート・・・
デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、この色が使われます。
 
  • アイコン・・・
フォーム内のアイコン
 
サンキューページのチェック済みマーク
 
  • テキスト・・・フォーム内テキスト
 

セレクトコントロール

主にカーソル選択時に反映されます。
 
  • アクセント・・・ラジオボタン等
 
  • バックグラウンド・・・背景
 
  • ボーダー・・・フレーム
 
  • デコレート・・・
デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、この色が使われます。
 
  • アイコン・・・
デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアイコンに指定している場合、この色が使われます。
 
  • テキスト・・・テキスト

プライマリーボタン

各ページのボタンに反映されます
以下では情報ページを参照します
 
  • アクセント・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアクセントに指定している場合、この色が使われます。
 
  • バックグラウンド・・・背景
  • ボーダー・・・フレーム
 
  • デコレート・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、この色が使われます。
 
  • アイコン・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアイコンに指定している場合、この色が使われます。
 
  • テキスト・・・テキスト
 

プライマリーボタン ホバー

ボタンにカーソルを当てた際に反映されます
 
  • アクセント・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアクセントに指定している場合、この色が使われます。
 
  • バックグラウンド・・・背景
 
  • ボーダー・・・フレーム
 
  • デコレート・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、この色が使われます。
 
  • アイコン・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアイコンに指定している場合、この色が使われます。
 
  • テキスト・・・テキスト

セカンダリーボタン

デフォルトのチェックアウト画面では反映されません。
各ページでカスタマイズにより２つ目のボタンを設置した際、要素の内容によって反映されます。
 

セカンダリーボタン ホバー

デフォルトのチェックアウト画面では反映されません。
各ページでカスタマイズにより２つ目のボタンを設置した際、要素の内容によって反映されます。
 

カラースキーム２

各ページ内、分割表示の右側に反映されます

ベース

  • アクセント・・・リンク
 
  • バックグラウンド・・・チェックアウト画面背景
 
  • ボーダー・・・セクション区切り等
 
  • デコレート・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、この色が使われます。
 
  • アイコン・・・「？」アイコン
 
  • テキスト・・・ベーステキスト

コントロール

 
  • アクセント・・・フレーム
※グローバルカラーパレットの「アクセント」よりも本設定カラーが優先されます
 
  • バックグラウンド・・・入力項目の背景
 
  • ボーダー・・・カート内メモフレーム
 
  • デコレート・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、この色が使われます。
 
  • アイコン・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアイコンに指定している場合、この色が使われます。
 
  • テキスト・・・カート内テキスト
 

セレクトコントロール

デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色を各項目に指定している場合、その色が使われます。

プライマリーボタン

  • アクセント・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアクセントに指定している場合、その色が使われます。
 
  • バックグラウンド・・・
 
「商品レコメンド」ボタン背景
 
「ストアに移動する」ボタン背景
 
  • ボーダー・・・
「商品レコメンド」ボタンフレーム
 
「ストアに移動する」ボタンフレーム
 
  • デコレート・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、その色が使われます。
 
  • アイコン・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアイコンに指定している場合、その色が使われます。
 
  • テキスト・・・
「商品レコメンド」ボタンテキスト
 
注文、マイページ内「ストアに移動する」ボタンテキスト
 

プライマリーボタン ホバー

ボタンにカーソルを当てた際に反映されます
 
  • アクセント・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアクセントに指定している場合、その色が使われます。
 
  • バックグラウンド・・・
 
「商品レコメンド」ボタン背景
 
「ストアに移動する」ボタン背景
 
ボーダー・・・
「商品レコメンド」ボタンフレーム
 
「ストアに移動する」ボタンフレーム
 
デコレート・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、その色が使われます。
 
  • アイコン・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアイコンに指定している場合、その色が使われます。
 
テキスト・・・
「商品レコメンド」ボタンテキスト
 
「ストアに移動する」ボタンテキスト

セカンダリーボタン

デフォルトのストアでは注文状況ページに反映されます。
 
  • アクセント・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアクセントに指定している場合、その色が使われます。
 
  • バックグラウンド・・・
 
「再購入」ボタン背景
 
「追跡」ボタン背景
 
  • ボーダー・・・
「再購入」ボタンフレーム
 
「追跡」ボタンフレーム
 
  • デコレート・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、その色が使われます。
 
  • アイコン・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアイコンに指定している場合、その色が使われます。
 
  • テキスト・・・
「再購入」ボタンテキスト
 
「追跡」ボタンテキスト

セカンダリーボタン ホバー

デフォルトのストアでは注文状況ページに反映されます。
 
  • アクセント・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアクセントに指定している場合、その色が使われます。
 
  • バックグラウンド・・・
 
「再購入」ボタン背景
 
「追跡」ボタン背景
 
  • ボーダー・・・
「再購入」ボタンフレーム
 
「追跡」ボタンフレーム
 
  • デコレート・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をデコレートに指定している場合、その色が使われます。
 
  • アイコン・・・デフォルトでは反映されません。
他アプリ/カスタマイズで要素の色をアイコンに指定している場合、その色が使われます。
 
  • テキスト・・・
「再購入」ボタンテキスト
 
「追跡」ボタンテキスト
 
 

基本デザイン／角丸

📝
チェックウト内の枠角について、表示設定が可能です。
Shopify上のCSSが適用されます。項目によって適用箇所が変わるため、チェックアウトエディタと連動させ反映箇所を確認ください。
数字が大きいほど角が丸くなります。
 

基本デザイン／タイポグラフィ

📝
Shopifyが提供しているフォントからチェックアウト画面内で使用するフォントを設定する事ができます。
  • 基本ウェイトとボールドウェイトに設定できる値は使用するフォントにより変化します
  • 利用するフォントによってはボールドウェイトを設定できない場合もあります
 

カスタマイズ／ファビコン

📝
チェックアウトページ、ブラウザタブに表示されるファビコンを設定できます。
 

カスタマイズ／グローバル

📝
日本語以外の文言表示の際の設定が可能です。
  1. カーニング 文字間隔の調整を設定できます。 　ベースまたはデフォルトの間隔 　カーニングを緩くし、文字と文字の間にデフォルトよりも多くのスペースを空ける 　文字と文字の間をさらに空ける
  1. レターケース 文字表示の際、どのようなパターンで表示するか設定が可能です。
 
 
 

カスタマイズ／ヘッダー

📝
チェックアウトページ内のヘッダーに関する バナー、ロゴ、ロゴのサイズや位置、配置が設定できます。

カスタマイズ／ヘッドライン

 
📝
チェックアウトページ内の見出しについて、詳細な設定が可能です。
  1. ヘッドライン1 「連絡先」「配達方法」などの項目名を指します。
  1. ヘッドライン2 チェックボックスなどの注意書きを指します。
  1. ヘッドライン3 サンキューページの「配送先住所」項目名などの小見出しを指します。
  1. フォントウェイト 文字の太さを調整できます。 ボルドーを選択すると太い文字になります。

カスタマイズ／ボタン

 
📝
プライマリーボタン、セカンダリーボタンの詳細が可能です。
  1. プライマリーボタン 「配送方法へ進む」、クーポンコードを「適用する」などのボタンです。
  1. セカンダリーボタン 他アプリにてボタンを設置した場合、セカンダリーボタンとなります。
 

カスタマイズ／フォーム

📝
チェックアウト内にフォームを設置している場合の、フォームデザインを設定できます。

カスタマイズ／メイン

📝
メイン部分の背景を編集することが可能です。 ※チェックアウト内左側（配送先入力などをする画面）をメインと呼びます。
 
※カラースキームは現在使用中のスキームの確認用に表示されています。 　Shopifyの仕様上、変更ができない部分となります。
 

カスタマイズ／商品サムネイル

📝
チェックアウト内に表示される、商品サムネイルについて設定できます。

カスタマイズ／オーダーサマリー

📝
背景と、カラーの設定が可能です。 ※チェックアウト画面を左右に分割させた際の右側（商品金額や送料などが更新表示される側）をオーダーサマリーと呼びます。