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

このページはDec 12, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/checkout-settings/customize-checkout-configurations/checkout-styleをご覧ください。

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

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

目次

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

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

  • 管理画面にある [チェックアウトの設定] セクションの [設定] エリアは、プランを選択して最初の商品を作成するまで表示されません。
  • Shopify Plusを利用しているのであれば、Checkout Branding APIを利用して、高度なチェックアウトブランディングのカスタマイズを行うことができます。

  • カートおよびチェックアウトのスタイルのカスタマイズに関するサポートが必要な場合は、Shopifyパートナーを雇うことができます。Shopifyパートナーを雇うことについて詳しくはこちらをご覧ください。

  • チェックアウトページに多くの色や関心を加えたいと思われるかもしれませんが、このページではデザインをシンプルに保つことが最適です。お客様は、これらのページを使用して注文の配送情報と支払い情報を入力します。そのため、気が散ったり情報が読みにくくなったりないようにする必要があります。コントラストの高い色と、ページ上の単語から注意を引かない画像を選択してください。

バナー用の背景画像をアップロードする

チェックアウトページの一番上のバナーにストア名が表示されます。そのバナーの背景画像は変更できます。ブランドと一致する画像を選択します。たとえば、ジュエリーを販売している場合はカラフルなビーズの画像が適しているでしょう。バナー画像の推奨解像度は、1000 x 400ピクセルです。

手順

デスクトップ

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

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

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

  4. [チェックアウトヘッダー] セクションで、[背景画像] オプションの [画像を追加] をクリックします。

  5. [画像を追加] をクリックして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. [チェックアウトヘッダー] セクションで、[背景画像] オプションの [画像を追加] をタップします。
  6. [画像を追加] をタップして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。
  7. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. [チェックアウトヘッダー] セクションで、[背景画像] オプションの [画像を追加] をタップします。
  6. [画像を追加] をタップして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。
  7. [保存] をタップします。

チェックアウトページにストアロゴを追加できます。バナー画像を使用している場合、ロゴは一番上に表示されます。ロゴは、チェックアウトページのバナーエリアに左揃え、右揃え、または中央揃えで表示できます。

手順

デスクトップ

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

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

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

  4. [ロゴ] セクションで [画像を追加] をクリックします。

  5. [画像を追加] をクリックして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。

  6. 任意：[チェックアウトヘッダー] セクションで、以下の設定でロゴを調整します。

    • [ロゴの最大幅] を使用して、ロゴのサイズをピクセル単位で選択します。
    • [ロゴアラインメント] を使用して、ロゴをバナーの左、中央、右のいずれに表示するかを選択します。
    • [ロゴの位置] を使用して、ロゴがチェックアウトのどこに表示されるかを選択します。

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. [ロゴ] セクションで [画像を追加] をタップします。
  6. [画像を追加] をタップして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。

  7. 任意：[チェックアウトヘッダー] セクションで、以下の設定でロゴを調整します。

    • [ロゴの最大幅] を使用して、ロゴのサイズをピクセル単位で選択します。
    • [ロゴアラインメント] を使用して、ロゴをバナーの左、中央、右のいずれに表示するかを選択します。
    • [ロゴの位置] を使用して、ロゴがチェックアウトのどこに表示されるかを選択します。

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

Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. [ロゴ] セクションで [画像を追加] をタップします。
  6. [画像を追加] をタップして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。

  7. 任意：[チェックアウトヘッダー] セクションで、以下の設定でロゴを調整します。

    • [ロゴの最大幅] を使用して、ロゴのサイズをピクセル単位で選択します。
    • [ロゴアラインメント] を使用して、ロゴをバナーの左、中央、右のいずれに表示するかを選択します。
    • [ロゴの位置] を使用して、ロゴがチェックアウトのどこに表示されるかを選択します。

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

メインコンテンツエリアに背景画像または色を追加する

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

小さい画像は、背景で縦方向や横方向にタイル状に適用されます。背景画像と色の両方を追加することはできません。

手順

デスクトップ

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

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

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

  4. [背景1] セクションで、背景色または背景画像を追加します。

    • 色を追加する場合、[背景の色] をクリックしてカラーピッカーを開き、色を選択するか16進数コードを入力します。
    • 画像を追加する場合、[背景画像] セクションで [画像を追加] をクリックします。[画像を追加] をクリックして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。

  5. [背景1] セクションで、背景色または背景画像を追加します。

    • 色を追加する場合、[背景の色] をタップしてカラーピッカーを開き、色を選択するか16進数コードを入力します。
    • 画像を追加する場合、[背景画像] セクションで [画像を追加] をタップします。[画像を追加] をタップして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。

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

Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。

  5. [背景1] セクションで、背景色または背景画像を追加します。

    • 色を追加する場合、[背景の色] をタップしてカラーピッカーを開き、色を選択するか16進数コードを入力します。
    • 画像を追加する場合、[背景画像] セクションで [画像を追加] をタップします。[画像を追加] をタップして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。

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

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

フィールドの色は白または透明に変更でき、背景画像が見える状態にするにはフィールドを透明にします。ただし、フィールド内のテキストははっきり見えるようにしてください。

手順

デスクトップ

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

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

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

  4. [色] セクションで [フォームフィールドとカードの背景] に移動し、[透明] または [白] をクリックします。

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. [色] セクションで [フォームフィールドとカードの背景] に移動し、[透明] または [白] をタップします。
  6. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. [色] セクションで [フォームフィールドとカードの背景] に移動し、[透明] または [白] をタップします。
  6. [保存] をタップします。

注文概要に背景画像または色を追加する

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

小さい画像は、背景で縦方向や横方向にタイル状に適用されます。

手順

デスクトップ

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

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

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

  4. [背景2] セクションで、背景色または背景画像を追加します。

    • 色を追加する場合、[背景の色] をクリックしてカラーピッカーを開き、色を選択するか16進数コードを入力します。
    • 画像を追加する場合、[背景画像] > [画像を追加] の順にクリックします。[画像を追加] をクリックして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。

  5. [背景2] セクションで、背景色または背景画像を追加します。

    • 色を追加する場合、[背景の色] をタップしてカラーピッカーを開き、色を選択するか16進数コードを入力します。
    • 画像を追加する場合、[背景画像] セクションで [画像を追加] をタップします。[画像を追加] をタップして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。

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

Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。

  5. [背景2] セクションで、背景色または背景画像を追加します。

    • 色を追加する場合、[背景の色] をタップしてカラーピッカーを開き、色を選択するか16進数コードを入力します。
    • 画像を追加する場合、[背景画像] セクションで [画像を追加] をタップします。[画像を追加] をタップして、画像ファイルをアップロードするか、ライブラリーにある既存の画像を選択します。

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

チェックアウトページの画像を変更または削除する

チェックアウトページに追加した画像はどれでも変更または削除できます。

手順

デスクトップ

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

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

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

  4. 置き換えたい画像の下で、[変更] をクリックしてライブラリーから画像を選択するか、無料の画像を探します。

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. 置き換えたい画像の下で、[変更] をタップしてライブラリーから画像を選択するか、無料の画像を探します。
  6. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. 置き換えたい画像の下で、[変更] をタップしてライブラリーから画像を選択するか、無料の画像を探します。
  6. [保存] をタップします。

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

画像の代替テキストを追加する

チェックアウトページに画像を追加した後で、画像のalt属性を追加できます。このテキストは、アクセシビリティとSEOに役立ちます。検索エンジンの最適化 (SEO) について、詳しくはこちらをご覧ください。

手順

  1. 代替テキストを追加する画像で、[編集] をクリックします。
  2. [代替テキスト] の下で、画像の代替テキストを入力します。画像に短い説明的なタイトルを選択します。
  3. [保存] をクリックします。

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

フォントのリストから選択し、チェックアウトページをカスタマイズできます。チェックアウトページのテキストの色は変更できません。

手順

デスクトップ

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

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

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

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

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. [タイポグラフィー] セクションで、[見出し] ドロップダウンメニューまたは [本文] ドロップダウンメニューをタップして、フォントを選択します。
  6. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. [タイポグラフィー] セクションで、[見出し] ドロップダウンメニューまたは [本文] ドロップダウンメニューをタップして、フォントを選択します。
  6. [保存] をタップします。

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

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

手順

デスクトップ

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

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

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

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

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. [色] セクションで、[アクセント]、[ボタン]、[エラー] の横にあるカラーボックスをタップしてカラーピッカーを開き、色を選択するか16進数コードを入力します。
  6. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[設定] をタップします。
  5. [色] セクションで、[アクセント]、[ボタン]、[エラー] の横にあるカラーボックスをタップしてカラーピッカーを開き、色を選択するか16進数コードを入力します。
  6. [保存] をタップします。

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

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

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

手順

デスクトップ

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

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

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

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

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

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、[カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、歯車アイコンをタップして、[設定] サイドバーにアクセスします。
  5. [チェックアウトのレイアウト] セクションで、[ワンページチェックアウト] または [スリーページチェックアウト] をタップして、チェックアウトのレイアウトを設定します。
  6. [保存] をタップします。
Android
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、[カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、歯車アイコンをタップして、[設定] サイドバーにアクセスします。
  5. [チェックアウトのレイアウト] セクションで、[ワンページチェックアウト] または [スリーページチェックアウト] をタップして、チェックアウトのレイアウトを設定します。
  6. [保存] をタップします。

モバイルデバイスでクーポンコードフィールドをデフォルトで表示する

デフォルトでは、お客様がモバイルデバイスでチェックアウトする場合、注文サマリーとクーポンコードフィールドは非表示になります。お客様は [注文サマリーを表示する] をタップすることで、注文サマリーの全体の詳細を展開し、クーポンコードフィールドを表示することができます。これにより、お客様は注文にクーポンコードまたはギフトカードコードを追加することができます。

モバイルデバイスでチェックアウトする際、常に注文サマリーとクーポンコードフィールドが表示されるようにデフォルトの動作を変更することができます。お客様は [注文サマリーを非表示にする] をタップすることで、クーポンコードフィールドを非表示にできます。

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

手順

デスクトップ

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

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

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

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

  5. [クーポンコードフィールドを常に表示] 設定を有効にします。

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[セクション] をタップします。
  5. [情報] にある [配送] または [決済] ページで、[注文サマリー] をタップします。
  6. [クーポンコードフィールドを常に表示] 設定を有効にします。
  7. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウトの [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[セクション] をタップします。
  5. [情報] にある [配送] または [決済] ページで、[注文サマリー] をタップします。
  6. [クーポンコードフィールドを常に表示] 設定を有効にします。
  7. [保存] をタップします。

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

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

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

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

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

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

手順

デスクトップ

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

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

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

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

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

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

    • アプリブロックの位置を変更するには、[セクション] リスト内でアプリブロックを上下にドラッグ&ドロップするか、プレビューウィンドウ内の移動ボタンを使用します。
    • アプリブロック設定を行うには、そのアプリブロックをクリックします。

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウト設定の [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、アプリに追加するページを選択し、[セクション] をタップします。
  5. アプリを追加するセクションで [⊕ アプリブロックを追加] をタップします。
  6. 追加するアプリブロックをタップします。

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

    • アプリブロックの位置を変更するには、[セクション] リスト内でアプリブロックを上下にドラッグ&ドロップするか、プレビューウィンドウ内の移動ボタンを使用します。
    • アプリブロック設定を行うには、そのアプリブロックをタップします。

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

Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウト設定の [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、アプリに追加するページを選択し、[セクション] をタップします。
  5. アプリを追加するセクションで [⊕ アプリブロックを追加] をタップします。
  6. 追加するアプリブロックをタップします。

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

    • アプリブロックの位置を変更するには、[セクション] リスト内でアプリブロックを上下にドラッグ&ドロップするか、プレビューウィンドウ内の移動ボタンを使用します。
    • アプリブロック設定を行うには、そのアプリブロックをタップします。

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

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

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

チェックアウト・アカウントエディタにおける [アプリ] サイドバーの使用方法について、詳しくはこちらをご覧ください。

手順

デスクトップ

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

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

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

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

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

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

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウト設定の [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[アプリ] をタップします。
  5. 追加するアプリブロックの横にある [⊕] をタップします。
  6. [追加先] ポップアウトで、アプリブロックを追加するページをタップします。

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

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

Android
  1. Shopifyアプリで [☰] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [設定] セクションで、カスタマイズするチェックアウト設定の [カスタマイズ] をタップします。
  4. チェックアウト・アカウントエディタで、[アプリ] をタップします。
  5. 追加するアプリブロックの横にある [⊕] をタップします。
  6. [追加先] ポップアウトで、アプリブロックを追加するページをタップします。

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

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

Shopifyで販売を開始する準備はできていますか?

無料体験を試す