「ログイン連携」画面

表示イメージ:「ログイン連携」画面

「ログイン連携」画面
マイページトップにある、[ログイン連携]リンクを押下して遷移します。

[ログイン連携]リンクの表示方法は、「マイページトップ」に「ログイン連携」画面へ遷移するメニューを表示するをご覧ください。

<ページURL>

https://ご利用店舗ドメイン/my/linked-accounts

表示イメージはスタートアップテーマ(カスタマイズ前)です。

利用するパーツや項目設定により表示内容やレイアウトを変更することができます。詳しくは各システムパーツの説明をご覧ください。

Amazon/LINE/Google/AppleのログインID連携機能を利用している場合のみに表示可能です。

各連携機能については、「ログイン連携」に関するマニュアルのリンクよりご確認ください。

パーツごとの表示イメージと解説


参照

ログイン連携エリア(レイアウトパーツ)

ログイン連携表示

ログイン連携表示

「連携サービスを利用してログインするには、ご利用のサービスのボタンよりお進みください。なお、連携はいつでも停止できます。」(メッセージ)

コマースクリエイター>メッセージにある「ログイン連携コメント」を表示できます。


ログイン連携パーツ

未連携中の場合

未連携中の場合の表示

「未連携」(連携ステータス)

コマースクリエイター>メッセージにある「ログイン連携メッセージ(未連携)」を表示できます。
このメッセージが表示されている場合は、各連携サービスとの未連携状態ですので、連携用ボタンが表示されます。

「Apple/Google/Amazon」の連携ボタン(ボタン)

コマースクリエイター>テーマ>テーマ設定にある Apple設定/Google設定/ Amazon設定で設定したボタンが表示されます。
押下すると、各アカウント情報とECサイトの会員IDが連携されます。

[LINE ID連携](ボタン)(スマートフォンのみ)

コマースクリエイター>テーマ>ボタンにある「LINE ID連携-ログイン連携ボタン」を表示できます。
押下すると、「LINE ID連携」画面(スマートフォンのみ)に遷移します。

連携済みの場合

連携済みの場合の表示

「連携中」(連携ステータス)

コマースクリエイター>メッセージにある「ログイン連携メッセージ(連携中)」を表示できます。
このメッセージが表示されている場合は、各連携サービスとの連携済みですので、連携停止用のボタンが表示されます。

[停止する](ボタン)

コマースクリエイター>テーマ>ボタンにある「停止する-ログイン連携」を表示できます。
押下すると、「ログイン連携停止」モーダルが開きます。

「ログイン連携停止」モーダル

「ログイン連携停止」モーダル

「ログイン連携停止」(見出し)

コマースクリエイター>メッセージにある「ログイン連携停止タイトル」を表示できます。

[ログイン連携を停止する]ボタン

コマースクリエイター>テーマ>ボタンにある「 ログイン連携停止-ログイン連携」ボタンが表示されます。
押下すると、該当のサービスとの連携が解除されます。

[キャンセル]ボタン

コマースクリエイター>テーマ>ボタンにある「キャンセル-共通」ボタンが表示されます。
押下すると、該当のサービスとの連携解除をキャンセルし、「ログイン連携」画面に戻ります。

※本モーダルでの連携解除は、ECサイト側のみの連携解除となります。各サービスでは、連携しているサイトとして情報が残っている場合があります。完全に連携を解除するには、お客様(消費者)が各サービスの管理画面上で連携解除を行う必要があります。

[参考]ボタンの並び替え方法

「Apple」・「Google」「Amazon」「LINE」の、すべての連携オプションを利用している場合、各ログイン連携用のボタンは、初期値では「Apple」「Google」「Amazon」「LINE」の並びで表示されます。

ボタンの表示順を変更するには、CSSを利用します。
いくつか並び順の変更例を記載しますので、参考にしてください。

CSSは、オリジナルCSSアイテムにて追加してください。

「Apple」「Google」の順序を変更する方法

.fs-c-linkService--google {
  order: -1;
}

スマートフォンでの表示

スマートフォンでの表示

PCでの表示

PCでの表示

並び順をすべて指定して表示する方法

表示順を「Amazon」「Google」「LINE」「Apple」にする場合を例示します。

.fs-c-linkService--amazon {
  order: 1;
}
.fs-c-linkService--google {
  order: 2;
}
.fs-c-linkService--line {
  order: 3;
}
.fs-c-linkService--apple {
  order: 4;
}

スマートフォンでの表示

スマートフォンでの表示

PCでの表示

PCでの表示