Checkout Blocks でブランディングエディタを使用する

Checkout Branding API を利用した Checkout Blocks のブランディングエディタを使用すると、コードを変更することなく、チェックアウトページとアカウントページのデザインをカスタマイズできます。

ブランディングエディタを使用して、任意のチェックアウト設定の色やチェックアウト要素を編集できます。ブランディングエディタを使用してチェックアウトのデザインに加えた変更は、サンキューページ、注文状況ページ、新しいお客様アカウントページなど、チェックアウトのすべてのページに適用されます。

管理画面からブランディングエディタを起動するには、[アプリ] > [Checkout Blocks] の順にクリックしてから、[ブランディングエディタ] をクリックします。

チェックアウトの色をカスタマイズする

「色」セクションでは、チェックアウトの基本の色をカスタマイズできます。また、デザインをより細かく編集する場合に、個々のセクションに適用する配色を最大4つまでカスタマイズすることもできます。アクセントカラー (リンクなどのインタラクティブな要素用) やブランドカラー (メインボタンやサブボタンなどの要素で使用) といった色の種類を編集できます。

手順：

チェックアウトの要素をカスタマイズする

ブランディングエディタの「カスタマイズ」セクションでは、チェックアウトの以下の要素を編集できます。

• ファビコン：チェックアウト中にお客様のブラウザタブに表示されるアイコンを選択します。
• グローバル：すべての要素 (フォームの入力、ボタン、カード) の角の半径を調整します。
• ヘッダーとロゴ：チェックアウトでのヘッダーの位置を選択するほか、パンくず、カートリンク、ロゴを表示するかどうかも選択します。
• メイン：背景画像、枠線の幅、配色など、チェックアウトのメインコンテンツエリアにデザインスキームを適用します。
• 注文サマリー：お客様の注文サマリーが表示されるチェックアウトのサイドバーに、背景画像、枠線の幅、配色などのデザインスキームを適用します。
• フッター：チェックアウトでのフッターの幅を選択するほか、ストアポリシーを表示するかどうかも選択します。
• タイポグラフィ：最大3レベルの見出しについて、フォントサイズ、フォントファミリー、フォントの太さ、カーニング、大文字と小文字の区別を選択します。
• ボタン：メインボタンとサブボタンの余白、枠線、スタイルを選択します。
• フォーム：チェックボックス、テキストフィールド、リストから選択したオプションなど、チェックアウトフォームの入力のスタイルをカスタマイズします。
• 商品サムネイル：チェックアウトでの商品画像の枠線と角の半径のスタイルを調整します。

手順：

1. 管理画面から、[アプリ] > [Checkout Blocks] の順に移動します。

2. 「ブランディングエディタ」をクリックします。

3. 「カスタマイズ」セクションで、「ヘッダーとロゴ」など、カスタマイズするいずれかの要素をクリックします。

4. 利用可能なカスタマイズオプションを使用して、チェックアウトの要素を好みに合わせて調整します。

5. 「保存」をクリックします。

チェックアウト設定を切り替える

ブランディングエディタを開くと、デフォルトで現在アクティブになっているチェックアウト構成を編集することになります。ただし、ブランディングエディタを使用して編集するチェックアウト構成を変更したり、新しいチェックアウト構成を作成したりすることができます。

アクティブおよび下書きのチェックアウト構成の管理について詳しくはこちらをご覧ください。

手順：

1. 管理画面から、[アプリ] > [Checkout Blocks] の順に移動します。

2. 「ブランディングエディタ」をクリックします。

3. 現在のチェックアウト構成の名前をクリックして、アクティブな構成および下書きの構成のリストを含むドロップダウンメニューを開き、カスタマイズするチェックアウト構成を選択します。

   • 編集する既存の設定を選択します。
   • ⊕ 「新しい設定を作成」をクリックすると、管理画面の「チェックアウト」設定にリダイレクトされます。

チェックアウトをプレビューする

プレビューするチェックアウト設定を選択し、「プレビュー」をクリックすると、ブランディングエディタで行った変更をいつでもプレビューできます。チェックアウトとアカウントのエディタが別のタブで起動してすべての変更が適用されるため、チェックアウトでの表示をプレビューできます。

手順：

1. 管理画面から、[アプリ] > [Checkout Blocks] の順に移動します。

2. 「ブランディングエディタ」をクリックします。

3. 調整する、チェックアウト設定の色やチェックアウトの要素をカスタマイズします。

4. 「プレビュー」をクリックします。

チェックアウト設定のエクスポートとインポート

JSON ファイルを使用して、チェックアウト設定をエクスポートおよびインポートできます。

チェックアウト設定をエクスポートする：

1. 管理画面から、[アプリ] > [Checkout Blocks] の順に移動します。

2. 「ブランディングエディタ」をクリックします。

3. ブランディングエディタを使用してカスタマイズを適用したチェックアウト設定を選択します。

4. 「その他の操作」 > 「設定をエクスポート」の順にクリックします。

チェックアウト設定が .json ファイルとしてローカルデバイスにダウンロードされます。

チェックアウト設定をインポートする：

1. 管理画面から、[アプリ] > [Checkout Blocks] の順に移動します。

2. 「ブランディングエディタ」をクリックします。

3. インポートしたブランディングプロファイルを適用するチェックアウト設定を選択します。

4. 「その他の操作」 > 「設定をインポート」の順にクリックします。

5. 「チェックアウトブランディングをインポートする」ダイアログで、ブランディングの JSON ファイルをアップロードします。

   1. 「ファイルを追加」をクリックします。
   2. デバイスから適切な JSON ファイルを選択します。
   3. 「インポートして続行」をクリックします。

6. プリロードされたカスタマイズ設定を確認し、必要に応じて変更します。

7. 「保存」をクリックします。

チェックアウトのスタイルをデフォルトにリセットする

ブランディングエディタを使用して色やチェックアウトの要素を編集する際、変更した色や要素の横にある「リセット」をクリックすると、特定の値をデフォルト値に戻すことができます。

いつでも、チェックアウト設定のブランディング全体を Shopify のデフォルト値にリセットできます。チェックアウト設定をリセットすると、ブランディングエディタのすべてのページにわたるカスタマイズがすべてクリアされます。この操作は元に戻せません。

手順：

1. 管理画面から、[アプリ] > [Checkout Blocks] の順に移動します。

2. 「ブランディングエディタ」をクリックします。

3. リセットするチェックアウト設定を選択します。

4. [デフォルトにリセット] をクリックします。

5. 「デフォルトのスタイルにリセットしますか？」ダイアログで、[続行] をクリックします。