チェックアウトブロックでブランディングエディタを使用する

Checkout Branding APIで提供されるチェックアウトブロックのブランディングエディタを使用して、コードを変更せずにチェックアウトページとアカウントページの外観をカスタマイズできます。

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

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

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

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

手順

Customize global colors

管理画面で [アプリ] > [チェックアウトブロック] の順にクリックします。
[ブランディングエディタ] をクリックします。
[色] セクションで、[全体的な色] をクリックします。
既存のチェックアウトの色を上書きするには、[全体的な色] セクションで [⊕] アイコンをクリックし、以下のいずれかの操作を行って、目的の色を選択します。
- カラーピッカーを使用して、色を選択します。
- 利用可能なフィールドに16進カラーコードを入力します。
[保存] をクリックします。

Customize color schemes

管理画面で [アプリ] > [チェックアウトブロック] の順にクリックします。
[ブランディングエディタ] をクリックします。
[色] セクションで、[スキーム1]、[スキーム2]、[スキーム3]、または [スキーム4] をクリックして、特定の配色をカスタマイズします。
カスタマイズする以下のコンポーネントのいずれかを選択します。
- メインの色
- フォームコントロール
- プライマリボタン
- サブボタン
[基本] セクションで、カスタマイズする色タイプの横にある [⊕] アイコンをクリックし、以下のいずれかの操作を行って、目的の色を選択します。
- カラーピッカーを使用して、色を選択します。
- 利用可能なフィールドに16進カラーコードを入力します。
任意：[フォームコントロール]、[プライマリボタン]、または[セカンダリボタン] のスキームを編集している場合は、[選択時] または [マウスオーバー時] のインタラクション動作の色もカスタマイズできます。カスタマイズする色タイプの隣にある [⊕] アイコンをクリックし、次のいずれかの操作を行って、目的の色を選択します。
- カラーピッカーを使用して、色を選択します。
- 利用可能なフィールドに16進カラーコードを入力します。
[保存] をクリックします。

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

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

ファビコン：チェックアウト時にブラウザタブでお客様に表示されるアイコンを選択します。
全体：すべての要素 (フォーム入力、ボタン、カード) の角の半径を調整します。
ヘッダーとロゴ：チェックアウト時のヘッダー位置と、パンくず、カートリンク、ロゴを表示するかどうかを選択します。
メイン：背景画像、罫線の幅、配色など、チェックアウトのメインコンテンツエリアにデザインスキームを適用します。
注文サマリー：背景画像、罫線の幅、配色など、お客様の注文サマリーを含むチェックアウトのサイドバーにデザインスキームを適用します。
フッター：チェックアウト時のフッターの幅を選択し、ストアポリシーを表示するかどうかを選択します。
タイポグラフィー：ヘッダーのフォントサイズ、フォントファミリー、フォントの重量、サイズ、カーニング、文字ケースを最大3段階まで選択します。
ボタン：プライマリボタンとセカンダリボタンのパディング、罫線、スタイルを選択します。
フォーム：チェックアウトフォーム入力のスタイル (チェックボックス、テキストフィールド、リストから選択したオプションなど) をカスタマイズします。
商品サムネイル：チェックアウト時の商品画像の枠線と角の半径スタイルを調整します。

手順

管理画面で [アプリ] > [チェックアウトブロック] の順にクリックします。
[ブランディングエディタ] をクリックします。
[カスタマイズ] セクションで、[ヘッダー] や [ロゴ] など、カスタマイズする要素をクリックします。
利用可能なカスタマイズオプションを使用して、チェックアウト要素を好みに合わせて調整します。
[保存] をクリックします。

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

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

ライブチェックアウトと下書きチェックアウトの設定の管理について詳しくは、こちらをご覧ください。

手順

管理画面で [アプリ] > [チェックアウトブロック] の順にクリックします。
[ブランディングエディタ] をクリックします。
現在のチェックアウト設定の名前をクリックして、ライブ設定と下書き設定のリストを含むドロップダウンメニューを開き、カスタマイズするチェックアウト設定を選択します。
- 編集する既存の設定を選択します。
- [⊕新しい設定を作成する] をクリックすると、管理画面のチェックアウト設定にリダイレクトされます。

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

ブランディングエディタで行った変更をいつでもプレビューできます。そのためには、プレビューするチェックアウト設定を選択し、[プレビュー] をクリックします。すべての変更が適用された状態でチェックアウト・アカウントエディタが別のタブで起動するので、変更がチェックアウト時にどのように表示されるかを確認できます。

手順

管理画面で [アプリ] > [チェックアウトブロック] の順にクリックします。
[ブランディングエディタ] をクリックします。
調整するチェックアウト設定の色またはチェックアウト要素をカスタマイズします。
[プレビュー] をクリックします。

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

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

チェックアウト設定をエクスポートします。

管理画面で [アプリ] > [チェックアウトブロック] の順にクリックします。
[ブランディングエディタ] をクリックします。
ブランディングエディタを使用して、カスタマイズが適用されたチェックアウト設定を選択します。
[その他の操作] > [設定をエクスポート] の順にクリックします。

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

チェックアウトの設定をインポートします。

管理画面で [アプリ] > [チェックアウトブロック] の順にクリックします。
[ブランディングエディタ] をクリックします。
インポートしたブランディングプロファイルを適用するチェックアウト設定を選択します。
[その他の操作] > [設定をインポート] の順にクリックします。
[チェックアウトのブランディングをインポート] ダイアログで、ブランディングのJSONファイルをアップロードします。
1. [ファイルを追加する] をクリックします。
2. デバイスから適切なJSONファイルを選択します。
3. [インポートして続行する] をクリックします。
プリロードされたカスタマイズ設定を確認します。必要に応じて修正します。
[保存] をクリックします。

チェックアウトスタイルをデフォルトに戻す

ブランディングエディタを使用して色またはチェックアウト要素を編集した場合、変更した色または要素の横にある [リセット] をクリックして、特定の値をデフォルト値にリセットできます。

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

手順

管理画面で [アプリ] > [チェックアウトブロック] の順にクリックします。
[ブランディングエディタ] をクリックします。
リセットするチェックアウト設定を選択します。
[デフォルトにリセット] をクリックします。
[デフォルトのスタイルに戻しますか？] ダイアログで、[続行する] をクリックします。