お客様アカウントページのカスタマイズ

ストアのお客様アカウントページをカスタマイズすることで、よりパーソナライズされた顧客体験を提供できます。ほとんどのカスタマイズはチェックアウトとアカウントのエディタで行い、お客様アカウントページとログインページ全体に適用されます。

次の方法でお客様アカウントをカスタマイズできます。

• ストアのブランディングやスタイルを、お客様アカウントページとログインページに適用します。
• お客様がログインした後のリダイレクト先をカスタマイズします。
• お客様がストアの各セクションやアカウントに簡単にアクセスできるよう、お客様アカウントのメニューをカスタマイズします。
• お客様アカウントでストアのプライマリードメインを使用できるように、サブドメインを作成します。
• アプリを使用して、お客様アカウントにブロックやページを追加し、お客様アカウントの機能を拡張します。
• 特定のマーケットや地域に合わせて、お客様アカウントページを調整します。

お客様アカウントのブランディングとスタイルのカスタマイズ

チェックアウトとアカウントのエディタで共有ブランディング設定を編集することで、お客様アカウントページのブランディングをカスタマイズできます。共有ブランディング設定に加えた変更は、お客様アカウントやサインインページにも自動的に適用されます。たとえば、共有ブランディング設定にロゴをアップロードすると、そのロゴはチェックアウトページ、お客様アカウントページ、サインインページに表示されます。

お客様アカウントページとログインページ上で、共通のブランディングから継承した設定の一部を直接上書きして、お客様アカウントページのスタイルをさらに細かく管理できます。

• お客様アカウントページのロゴをカスタマイズする。
• お客様アカウントページの色をカスタマイズする。
• ログインページのスタイルをカスタマイズする。
• 注文がないお客様向けの注文ページをカスタマイズする。

お客様アカウントページのロゴをカスタマイズする

メインの共通ブランディング設定にロゴをアップロードすると、そのロゴはお客様アカウントページとログインページにも表示されます。継承したロゴの画像とサイズは、お客様アカウントページやログインページから直接上書きできます。

手順:

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

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

3. チェックアウトとアカウントのエディタで、ページセレクターメニューからロゴを変更するお客様アカウントページを選択します。

4. をクリックし、[ヘッダー] をクリックします。

5. ロゴセクションで、[画像] フィールドをクリックして新しいロゴを選択します。

6. オプション: [幅] スライダーを使用してロゴのサイズを調整します。

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

お客様アカウントページの色をカスタマイズする

メインの共通ブランディング設定に背景色とアクセントカラーを追加すると、それらの色はお客様アカウントページとログインページでも使用されます。お客様アカウントページとログインページで、継承した色設定を直接上書きできます。各ページの色は独立して上書きできます。

手順:

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

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

3. チェックアウトとアカウントのエディタで、ページセレクターメニューから色設定を変更するお客様アカウントページを選択します。

4. ページヘッダーの背景色をカスタマイズする:

   1. をクリックし、[ヘッダー] をクリックします。
   2. [色] セクションで、[背景] の設定をクリックし、ヘッダーの新しい背景色を選択します。

5. ページ本文の背景色またはアクセントカラーをカスタマイズする:

   1. をクリックし、[メイン] をクリックします。
   2. [背景] の設定をクリックし、メインページ本文の新しい背景色を選択します。
   3. [アクセント] の設定をクリックし、メインページ本文の新しいアクセントカラーを選択します。

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

ログインページのスタイルをカスタマイズする

ログインページは、お客様がオンラインストアのアカウントにログインするための独立したランディングページです。チェックアウトページやお客様アカウントページに選択した設定とは別に、ロゴや色をカスタマイズすることで、ブランディングをより際立たせることができます。デスクトップデバイスでのヒーロー画像として機能する画像をアップロードすることもできます。

手順:

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

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

3. チェックアウトとアカウントのエディタで、ページセレクターメニューから [ログイン] ページを選択します。

4. をクリックし、[メイン] をクリックします。

5. ログインページの以下のスタイル要素を調整できます。

   • ロゴセクションで、[画像] フィールドに新しいロゴをアップロードします。ロゴの幅を手動で調整することもできます。
   • [色] セクションで、[背景] または [アクセント] フィールドを使用して、ログインページの色をカスタマイズします。
   • [メディア] セクションで、[画像] フィールドを使用して、ログインページのヒーロー画像をアップロードします。この画像はデスクトップデバイスでのみ表示されます。

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

注文がないお客様向けの注文ページをカスタマイズする

お客様は、ストアで一度も注文をしたことがなくてもアカウントを作成できます。注文したことがないお客様がログインした場合、表示する注文履歴がないため、[注文] ページにはストアのホームページに誘導する [今すぐ購入] ボタンが表示されます。

お客様の関心を引き、商品の閲覧を促すために、デフォルトの [今すぐ購入] ボタンに加えて、お客様アカウントの [注文] ページに表示するコレクションをストアから選択できます。

手順:

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

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

3. チェックアウトとアカウントのエディタで、ページセレクターメニューから [注文] ページを選択します。

4. をクリックし、[メイン] をクリックします。

5. [注文なし] セクションで、空の状態を設定します。

   1. オプション: [プレビュー] をクリックして、プレビューウィンドウに空の [注文] ページを表示します。
   2. [コレクション] メニューで、[コレクションを選択] をクリックします。
   3. 既存のコレクションを選択するか、[コレクションを作成] をクリックして、空の状態用に新しいコレクションを作成します。

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

お客様アカウントのログインリダイレクトをカスタマイズする

お客様がストアのアカウントにログインした後のリダイレクト先を設定できます。たとえば、お客様がログインしたときに表示していたページにリダイレクトしたり、特定の商品コレクションにリダイレクトしたりすることができます。

このガイドに従って、お客様アカウントのログインリダイレクトをカスタマイズしてください。

お客様アカウントのメニューをカスタマイズする

お客様アカウントのメインメニューは、ログインしているお客様向けに、お客様アカウントの [メイン] セクションに表示されます。メニューは、お客様が使用しているデバイスに応じて異なる場所に表示されます。

• デスクトップ: メニューはページの左側に垂直に配置されます。これは、最大 3 レベルのネストされたナビゲーションオプションなど、多数のメニューリンクを表示するのに最適で、デスクトップユーザーがすばやく確認しやすくなります。
• モバイル: メニューはページの上部に水平に配置されます。これにより、お客様は自分のお客様アカウントのページ間を簡単に切り替えることができます。メニューに 5 つ以上の項目がある場合は、代わりに アイコンが表示されます。

最新バージョンのお客様アカウントを使用すると、ストアにお客様アカウントメニューが自動的に作成されます。デフォルトでは、ストアのホームページへのリンクとお客様の注文へのリンクが含まれます。デフォルトの customer-account-main-menu のお客様アカウントメニューは、既存のメニューに置き換えることも、デフォルトメニューを編集することもできます。

デフォルトのお客様アカウントメニューを編集する

管理画面の [コンテンツ] > [メニュー] セクション、またはチェックアウトとアカウントのエディタから、お客様アカウントのメニューを編集できます。

お客様がアカウント関連情報に簡単にアクセスできるように、お客様アカウントのメインメニューに以下のリンクを追加することを検討してください。

• プロフィール: 名前や住所などの個人情報を管理できるお客様のプロフィールページ。
• アプリ: ロイヤルティリワードやサブスクリプションアプリなど、お客様のアカウントに関連付けられたアプリページ。
• オンラインストアのその他のテンプレート。
• 外部リンク。

お客様アカウントのメニューでは、URLリダイレクトはサポートされていません。

手順:

お客様アカウントページのサブドメインを作成する

お客様アカウントページは、ストアのプライマリードメインをベースドメインとして使用します。たとえば、プライマリードメインが your-store.com の場合、お客様アカウントのサブドメインは account.your-store.com として作成されます。プライマリードメインを変更すると、お客様アカウントのドメインもそれに応じて更新されます。プライマリードメインを確認または変更するには、Shopify 管理画面で [設定] > [ドメイン] に移動します。

オンラインストアのプライマリードメインを使用し、お客様をアカウントページに誘導する、お客様アカウント用のサブドメインを作成できます。作成するドメイン名は、ストアで使用するプライマリードメイン名のサブドメインです。このサブドメインは、すべてのお客様アカウントページのプライマリードメイン名になるため、サインインからアカウント管理まで、一貫したブランド体験を提供できます。たとえば、サブドメインが account.your-store.com の場合、お客様は account.your-store.com/authentication/login からサインインページにアクセスします。

お客様アカウントページのサブドメインについて詳しくはこちらをご覧ください。

アプリを使用してお客様アカウントをカスタマイズする

アプリを使用してお客様アカウントをカスタマイズすることで、ストアでより充実した体験をお客様に提供できます。アプリを使用すると、返品、定期購入、アップセル、レビュー、ウィッシュリストなどの便利なセルフサービス機能を追加し、ブランディングの一貫性を保ちながらサインインプロセスをシンプルに維持できます。ブロックを使用すれば、既存のお客様アカウントページに機能を追加したり、お客様アカウントに新しいページを追加したりできます。たとえば、アプリページに対応しているウィッシュリストアプリを使用している場合、お客様アカウントにウィッシュリストページを追加して、お客様がウィッシュリストを管理できるようにすることが可能です。

チェックアウトとアカウントエディタを使用すると、以下のカスタマイズを行うことができます。

• 注文ページ、注文サマリー、プロフィールなど、既存のお客様アカウントページにブロックを追加する。
• お客様アカウントに新しいアプリページを追加する。お客様アカウントに新しいアプリページを追加した後、アプリが直接リンクをサポートしている場合は、それをお客様アカウントメニューに追加できます。

お客様アカウント向けアプリの完全なリストについては、Shopify App Store を確認してください。アプリを使用したチェックアウトとお客様アカウントのカスタマイズについて詳しくはこちらをご覧ください。

ブロックを使用してお客様アカウントにページを追加する

アプリによっては、お客様アカウントのヘッダーに新しいページを追加できるブロックが提供されています。たとえば、ウィッシュリストアプリでは、お客様アカウントに新しいウィッシュリストページを追加できるブロックが提供されている場合があります。

チェックアウトとアカウントエディタの [アプリ] サイドバーからアプリページを作成できます。一部のアプリページでは直接リンクがサポートされており、チェックアウトとアカウントエディタから、または管理画面の [メニュー] ページから、お客様アカウントメニューにそのページをリンクできます。

新しいページを追加した後、[アプリ] サイドバーの [追加済み] タブ、またはチェックアウトとアカウントエディタのページセレクターメニューから、そのページにアクセスできます。

手順:

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

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

3. [アプリ] セクションで、ページを作成するアプリを見つけます。

4. [+] アイコンをクリックし、[ページの追加先] セクションで [アカウント] をクリックします。

5. [ブロック] 設定で、アプリの設定を行います。

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

7. オプション: お客様アカウントメニューにお客様向けのアプリページを表示するには、[メニューに追加] をクリックします。[お客様アカウントのメインメニュー] ダイアログで、以下の操作を行います。

   1. チェックアウトとアカウントエディタから自動的に入力される [ラベル] と [リンク] を確認します。リンクの名前を変更する場合は、[ラベル] フィールドを更新します**。
   2. オプション: [お客様アカウントのメインメニュー] に追加するその他のメニュー項目を追加します。
   3. [保存] をクリックします。

特定のマーケット向けのお客様アカウントページのカスタマイズ

チェックアウトとアカウントエディタを使用すると、特定のマーケットや地域に合わせてお客様アカウントページをカスタマイズできます。これにより、国内マーケットのお客様向けに追加のアカウント機能を含めたり、海外地域のお客様アカウントに配送遅延に関するカスタムメッセージを表示したりするなど、特定の地域に合わせてお客様アカウントページを調整することができます。

お客様アカウントページでは、ブランディング、設定、ブロックのマーケット固有のオーバーライドに加えて、以下の種類のカスタマイズのマーケット固有のオーバーライドもサポートされています。

• 外部サービスのアプリが提供するサブスクリプション管理ページなど、フルページ拡張機能の追加または削除。
• お客様アカウントページの [ヘッダー] セクションに適用されるデフォルトの customer-account-main-menu からの変更など、お客様アカウントメニューの変更。
• 返品をリクエストするボタンなど、注文アクションの追加または削除。

特定のマーケットに向けたチェックアウトページとアカウントページの調整について詳しくはこちらをご覧ください。