ヘルプ
ログイン

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

オンラインストアを使用して商品を販売している場合、チェックアウトとアカウントのエディタでチェックアウトページのスタイルをカスタマイズできます。会社のロゴを追加したり、色を変更したり、新しいフォントを選択したりして、チェックアウトをビジネスに合わせて設定できます。

チェックアウトページで選択したブランディングの一部は、新しいお客様アカウントページにも適用されます。

このページの内容

チェックアウトとお客様アカウントのスタイルをカスタマイズする際の考慮事項

チェックアウトのスタイルをカスタマイズする前に、以下の考慮事項を確認してください。

  • 管理画面の[チェックアウト] 設定セクションにある [設定] エリアは、プランを選択して最初の商品を作成するまで非表示になります。
  • Shopify Plusを利用している場合、Checkout Branding APIを使用して、高度なチェックアウトのブランディングカスタマイズを行えます。
  • カートとチェックアウトのスタイルのカスタマイズについてサポートが必要な場合は、Shopify パートナーに依頼することができます。Shopify パートナーへの依頼について、詳しくはこちら。
  • チェックアウトページに多くの色を加えて興味を引くものにしたいと思うかもしれませんが、デザインはシンプルにすることをおすすめします。お客様はこれらのページで注文の発送情報と支払い情報を入力するため、お客様の注意をそらしたり、情報を読みにくくしたりすることは避けるべきです。コントラストの高い色を選択し、ページ上の言葉から注意をそらさない画像を選択してください。

チェックアウトとお客様アカウントのカラーパレットを作成する

カラーパレットを作成すると、チェックアウトとアカウントのエディターの複数の設定で色をすばやく再利用できます。カラーパレットから色を変更すると、その色を使用しているすべての設定が新しい色に動的に更新されます。また、同じ色を複数回使用する場合に 16 進数コードを覚えておく必要もありません。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウトとアカウントのエディターで 設定 をクリックし、[設定] サイドバーにアクセスします。

  4. [カラーパレット] セクションで + をクリックし、パレットに追加する色を選択します。

  5. オプション：パレットに不要になった色を削除するには、以下の操作を行います。

    1. 色をクリックし、[色を削除] をクリックします。
    2. チェックアウト内でその色が使用されているすべての箇所で、削除した色と置き換える代わりの色を選択します。
    3. [確認] をクリックします。

  6. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 構成セクションで、カスタマイズする構成の 編集 をタップします。

  4. チェックアウトとアカウントのエディタで、[設定] をタップします。

  5. [カラーパレット] セクションで + をタップし、パレットに追加する色を選択します。

  6. オプション：パレットに不要になった色を削除するには、以下の操作を行います。

    1. 色をタップし、[色を削除] をタップします。
    2. チェックアウト内でその色が使用されているすべての箇所で、削除した色と置き換える代わりの色を選択します。
    3. [確認] をタップします。

  7. [保存] または [✓] をタップします。

チェックアウトとアカウントのエディターでカラーピッカーを使用する

チェックアウトとアカウントのエディターで色の指定が必要なフィールドをカスタマイズする際、カラーピッカーを使用すると目的の色を選択しやすくなります。カラーピッカーでは、以下のいずれかの方法で色を選択できます。

  • カラースライダーを使用して、ピッカープレビューで利用可能な色の色相を変更します。
  • 16 進数のフィールドを使用して、標準的な純粋な青を示す #0000FF など、特定の色を示すコードを入力します。
  • スポイト を使用して、画面上の任意の場所からカーソルで特定の色を抽出します。
  • グリッドアイコン を使用して、ピッカープレビューで利用可能な色を 40 色に絞り込みます。

[カラーパレット] セクションには、チェックアウトとアカウントのエディターの カラーパレット に追加したすべての色見本が表示されます。

チェックアウトとアカウントのエディターでのセッション中に、過去に手動で選択した色がある場合は、[最近使用した項目] の色見本から選択することもできます。

ヘッダーの色をカスタマイズする

チェックアウトとお客様アカウントの各ページの上部には、ストア名を表示するヘッダーがあります。このバナーの背景色は変更できます。ブランドに合った色を選択してください。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウトとアカウントのエディターで 設定 をクリックし、[設定] サイドバーにアクセスします。

  4. [ヘッダー] セクションで、以下のいずれかの色のカスタマイズを行います。

    • [背景] を使用して、ヘッダーの背景色を設定します。
    • [アクセント] を使用して、カートアイコンとヘッダーのリンクの色を設定します。

  5. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 構成セクションで、カスタマイズする構成の 編集 をタップします。

  4. チェックアウトとアカウントのエディタで、[設定] をタップします。

  5. [ヘッダー] セクションで、以下のいずれかの色のカスタマイズを行います。

    • [背景] を使用して、ヘッダーの背景色を設定します。
    • [アクセント] を使用して、カートアイコンとヘッダーのリンクの色を設定します。

  6. [保存] または [✓] をタップします。

ストアのロゴをチェックアウトページに追加できます。ロゴは、チェックアウトページのバナー領域の左側、右側、または中央に配置できます。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウトとアカウントのエディターで 設定 をクリックし、[設定] サイドバーにアクセスします。

  4. [ロゴ] セクションで、[画像] フィールドをクリックします。

  5. [ライブラリから選択] をクリックして、ライブラリから既存の画像を選択します。

  6. オプション：[ロゴ] セクションで、以下の設定を使用してロゴを調整します。

    • [幅] を使用して、ロゴのサイズをピクセル単位で選択します。
    • [配置] を使用して、ロゴをバナーの左側、中央、右側のどこに表示するかを選択します。

  7. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 構成セクションで、カスタマイズする構成の 編集 をタップします。

  4. チェックアウトとアカウントのエディタで、[設定] をタップします。

  5. [ロゴ] セクションで、[画像] フィールドをタップします。

  6. [ライブラリから選択] をタップして、ライブラリから既存の画像を選択します。

  7. オプション：[ロゴ] セクションで、以下の設定を使用してロゴを調整します。

    • [幅] を使用して、ロゴのサイズをピクセル単位で選択します。
    • [配置] を使用して、ロゴをバナーの左側、中央、右側のどこに表示するかを選択します。

  8. [保存] または [✓] をタップします。

メインコンテンツエリアに背景色を追加する

チェックアウトページのメインコンテンツエリアに背景色を追加できます。このエリアは、お客様が配送情報と支払い情報を入力する場所であるため、背景に対して入力フィールドの文字がはっきりと読めるようにしてください。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウトとアカウントのエディターで 設定 をクリックし、[設定] サイドバーにアクセスします。

  4. メインセクションで色をクリックしてカラーピッカーを開き、色を選択するか、16進数コードを入力します。

  5. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 構成セクションで、カスタマイズする構成の 編集 をタップします。

  4. チェックアウトとアカウントのエディタで、[設定] をタップします。

  5. メインセクションで色をタップしてカラーピッカーを開き、色を選択するか、16進数コードを入力します。

  6. [保存] または [✓] をタップします。

フォームフィールドの色を変更する

チェックアウトのフォームフィールドの色を変更できます。また、エラーメッセージの色を変更して、白や透明にすることもできます。フィールド内のテキストがはっきりと読めることを確認してください。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウトとアカウントのエディターで 設定 をクリックし、[設定] サイドバーにアクセスします。

  4. [入力フィールド] セクションで、以下のいずれかのカスタマイズを行います。

    • 入力フィールドの色を変更するには、[入力] に移動し、[透明] または [白] をクリックします。
    • エラーメッセージの色を変更するには、[エラー] フィールドをクリックして色を選択します。

  5. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 構成セクションで、カスタマイズする構成の 編集 をタップします。

  4. チェックアウトとアカウントのエディタで、[設定] をタップします。

  5. [入力フィールド] セクションで、以下のいずれかのカスタマイズを行います。

    • 入力フィールドの色を変更するには、[入力] に移動し、[透明] または [白] をタップします。
    • エラーメッセージの色を変更するには、[エラー] フィールドをタップして色を選択します。

  6. [保存] または [✓] をタップします。

注文サマリーに背景画像または背景色を追加する

お客様がチェックアウトページで [注文サマリーを表示する] をクリックすると、購入する商品のリストが表示されます。注文サマリーには、背景画像または背景色を追加できます。テーマエディタのプレビューで [注文サマリーを表示する] をクリックして、注文サマリーの表示に問題がないか確認できます。

タイルと同様に、小さい画像は背景で縦横に繰り返して表示されます。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウトとアカウントのエディターで 設定 をクリックし、[設定] サイドバーにアクセスします。

  4. [注文サマリー] セクションで [注文サマリー] をクリックします。

  5. 背景色または画像を追加します。

    • 色を追加するには、[背景] をクリックしてカラーピッカーを開き、色を選択するか 16 進数コードを入力します。
    • 画像を追加するには、[画像] > [選択] をクリックします。[ライブラリから選択] をクリックして、ライブラリから既存の画像を選択します。

  6. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 構成セクションで、カスタマイズする構成の 編集 をタップします。

  4. チェックアウトとアカウントのエディタで、[設定] をタップします。

  5. [注文サマリー] セクションで [注文サマリー] をタップします。

  6. 背景色または画像を追加します。

    • 色を追加するには、[背景] をタップしてカラーピッカーを開き、色を選択するか 16 進数コードを入力します。
    • 画像を追加するには、[画像] > [選択] をタップします。[ライブラリから選択] をタップして、ライブラリから既存の画像を選択します。

  7. [保存] または [✓] をタップします。

注文サマリーから画像を変更または削除する

注文サマリーに追加した画像は、変更または削除できます。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウトとアカウントのエディターで 設定 をクリックし、[設定] サイドバーにアクセスします。

  4. [注文サマリー] セクションで [注文サマリー] をクリックします。

  5. 置き換える画像の下にある [変更] をクリックして、ライブラリーから画像を選択するか、無料の画像を検索します。

  6. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 構成セクションで、カスタマイズする構成の 編集 をタップします。

  4. チェックアウトとアカウントのエディタで、[設定] をタップします。

  5. [注文サマリー] セクションで [注文サマリー] をタップします。

  6. 置き換える画像の下にある [変更] をタップして、ライブラリーから画像を選択するか、無料の画像を検索します。

  7. [保存] または [✓] をタップします。

画像を削除するには、[変更] > [画像を削除] の順にクリックします。この操作を行っても、Shopifyから画像は削除されません。

チェックアウトページのフォントを変更する

フォントのリストから選択して、チェックアウトページをカスタマイズできます。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウトとアカウントのエディターで 設定 をクリックし、[設定] サイドバーにアクセスします。

  4. [文字体裁] セクションで、[見出し] ドロップダウンメニューまたは [本文] ドロップダウンメニューをクリックしてフォントを選択します。

  5. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 構成セクションで、カスタマイズする構成の 編集 をタップします。

  4. チェックアウトとアカウントのエディタで、[設定] をタップします。

  5. [文字体裁] セクションで、[見出し] ドロップダウンメニューまたは [本文] ドロップダウンメニューをタップしてフォントを選択します。

  6. [保存] または [✓] をタップします。

チェックアウトページのボタンとアクセントの色を変更する

チェックアウトページ上のボタンや、リンクなどのアクセントの色を変更できます。色を変更した場合は、メインコンテンツエリアと注文サマリーの背景に対して、テキストがはっきりと読めることを確認してください。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウトとアカウントのエディターで 設定 をクリックし、[設定] サイドバーにアクセスします。

  4. [アクセントとボタン] セクションで、[アクセント] または [ボタン] の横にあるカラーボックスをクリックしてカラーピッカーを開き、色を選択するか 16 進数コードを入力します。

  5. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 構成セクションで、カスタマイズする構成の 編集 をタップします。

  4. チェックアウトとアカウントのエディタで、[設定] をタップします。

  5. アクセントとボタンセクションで、[アクセント] または [ボタン] の横にあるカラーボックスをタップしてカラーピッカーを開き、色を選択するか 16 進数コードを入力します。

  6. [保存] または [✓] をタップします。

チェックアウトのレイアウトを変更する

デフォルトでは、ストアのチェックアウトレイアウトはワンページチェックアウトに設定されています。管理画面から、ワンページチェックアウトと3ページチェックアウトを切り替えることができます。チェックアウトのレイアウトを変更する前に、ワンページチェックアウトと3ページチェックアウトの違いを確認してください。

チェックアウトのレイアウトを切り替えても、チェックアウト・アカウントエディタのプレビューはリアルタイムで表示されません。変更を保存した後、ストアフロントのチェックアウトに移動して、新しいチェックアウトレイアウトを表示してください。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウトとアカウントのエディタで、歯車アイコンをクリックして [設定] サイドバーにアクセスします。

  4. [チェックアウトのレイアウト] セクションで、現在のレイアウトをクリックして、チェックアウトのレイアウトオプションを開きます。

  5. [ワンページチェックアウト] または [3ページチェックアウト] をクリックして、チェックアウトレイアウトを設定します。

  6. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 「設定」セクションで、[カスタマイズ] をタップします。

  4. チェックアウト・アカウントエディタで、歯車アイコンをタップして「設定」サイドバーにアクセスします。

  5. [チェックアウトのレイアウト] セクションで、[ワンページチェックアウト] または [3ページチェックアウト] をタップして、チェックアウトレイアウトを設定します。

  6. [保存] または [✓] をタップします。

「再購入」ボタンを管理する

お客様が購入したアイテムを再注文できるように、「再購入」ボタンが注文状況ページに表示されます。

手順：

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. [設定] セクションで、カスタマイズする設定の横にある [カスタマイズ] をクリックします。

  3. チェックアウト・アカウントエディタで、「設定」アイコンをクリックします。

  4. [再購入ボタン] セクションで、ボタンをオンまたはオフに切り替えます。

モバイルデバイスでディスカウントコードの入力フィールドをデフォルトで表示する

デフォルトでは、お客様がモバイルデバイスでチェックアウトすると、注文サマリーとディスカウントコードの入力フィールドは非表示になります。お客様は「注文サマリーを表示する」をタップして注文サマリーの詳細を展開し、ディスカウントコードの入力フィールドを表示して、注文にディスカウントコードまたはギフトカードコードを追加できます。

モバイルデバイスでチェックアウトする際に、注文サマリーとディスカウントコードの入力フィールドを常に表示するようにデフォルトの動作を変更できます。お客様は「注文サマリーを非表示にする」をタップして、ディスカウントコードの入力フィールドを非表示にできます。

この設定にアクセスするには、チェックアウトで3ページチェックアウトレイアウトを使用している必要があります。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウト・アカウントエディタで、セクションアイコンをクリックして「セクション」サイドバーにアクセスします。

  4. [情報]、[配送]、または[決済] ページで、[注文サマリー] をクリックします。

  5. [ディスカウントコードの入力フィールドを常に表示する] 設定を有効にします。

  6. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 構成セクションで、カスタマイズする構成の 編集 をタップします。

  4. チェックアウト・アカウントエディタで、[セクション] をタップします。

  5. [情報]、[配送]、または[決済] ページで、[注文サマリー] をタップします。

  6. [ディスカウントコードの入力フィールドを常に表示する] 設定を有効にします。

  7. [保存] または [✓] をタップします。

チェックアウトページにブロックを追加する

ブロックを使用して、カスタムバナーやロイヤルティ特典などの機能をお客様のチェックアウト体験に追加できます。チェックアウトの情報ページ、配送ページ、決済ページをカスタマイズするものを含め、一部のチェックアウトアプリは Shopify Plusプランのストアでのみ利用可能です。チェックアウトに追加するアプリを選択する際は、チェックアウトアプリの利用可否を参照してください。

「セクション」サイドバーまたは「アプリ」サイドバーを使用して、既存のブロックをページのセクションに直接追加できます。

アプリでチェックアウト設定をカスタマイズすることについて、詳しくはこちら。

「セクション」サイドバーを使用してブロックを追加する

「セクション」サイドバーを使用すると、インストールしたアプリのブロックを現在表示しているページに追加できます。ページやセクションにインストールできるブロックのみが、選択可能なオプションとして表示されます。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウト・アカウントエディタで、アプリを追加するページを選択し、Sections をクリックして「セクション」サイドバーにアクセスします。

  4. アプリを追加するセクションで、「⊕ ブロックを追加」をクリックします。

  5. 追加するブロックをクリックします。

  6. 必要に応じてブロックをカスタマイズします。

    • ブロックのロケーションを並べ替えるには、「セクション」リストでブロックを上下にドラッグアンドドロップするか、プレビューウィンドウの移動ボタンを使用します。
    • ブロックをクリックして、ブロックの設定を行います。

  7. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 「設定」セクションで、カスタマイズするチェックアウト設定の [カスタマイズ] をタップします。

  4. チェックアウト・アカウントエディタで、アプリを追加するページを選択してから、[セクション] をタップします。

  5. アプリを追加するセクションで、「⊕ ブロックを追加」をタップします。

  6. 追加するブロックをタップします。

  7. 必要に応じてブロックをカスタマイズします。

    • ブロックのロケーションを並べ替えるには、「セクション」リストでブロックを上下にドラッグアンドドロップするか、プレビューウィンドウの移動ボタンを使用します。
    • ブロックをタップして、ブロックの設定を行います。

  8. [保存] または [✓] をタップします。

「アプリ」サイドバーを使用してブロックを追加する

「アプリ」サイドバーを使用すると、インストール済みのアプリから、現在表示しているページにブロックを追加できます。ブロックを追加する際に、特定のブロックをインストールできるページのみがオプションとして表示されます。

チェックアウト・アカウントエディタで「アプリ」サイドバーを使用することについて、詳しくはこちら。

手順：

デスクトップ

  1. Shopifyの管理画面から、[設定] > [チェックアウト] に移動します。

  2. 構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。

  3. チェックアウト・アカウントエディタで、Apps をクリックして「アプリ」サイドバーにアクセスします。

  4. 追加するブロックの横にある [⊕] をクリックします。

  5. [追加先] ポップアウトで、ブロックを追加するページをクリックします。

  6. 必要に応じてブロックをカスタマイズします。

  7. [保存] をクリックします。

モバイル

  1. Shopify アプリから、Menu をタップし、Settings 設定をタップします。

  2. [ストアの設定] セクションで、[チェックアウト] をタップします。

  3. 「設定」セクションで、カスタマイズするチェックアウト設定の [カスタマイズ] をタップします。

  4. チェックアウト・アカウントエディタで、[アプリ] をタップします。

  5. 追加するブロックの横にある [⊕] をタップします。

  6. [追加先] ポップアウトで、ブロックを追加するページをタップします。

  7. 必要に応じてブロックをカスタマイズします。

  8. [保存] または [✓] をタップします。