「ログイン」画面

ログインフォームやボタンを表示するシステムパーツを配置する特殊なシステムパーツ（システムパーツグループ）です。

futureshop会員エリア（システムパーツグループ）

会員ログインフォームを表示するシステムパーツを配置する特殊なシステムパーツ（システムパーツグループ）です。

ログインパーツ

他社サービスログインエリア（システムパーツグループ）

他社IDによるログインボタンを表示するシステムパーツを配置する特殊なシステムパーツ（システムパーツグループ）です。
以下の各ログイン画面ごとにシステムパーツグループが用意されています。

• 他社サービスログインエリア(カート)（システムパーツグループ）
• 他社サービスログインエリア(定期カート)（システムパーツグループ）
• 他社サービスログインエリア(お気に入り)（システムパーツグループ）
• 他社サービスログインエリア(LINE)（システムパーツグループ）
• 他社サービスログインエリア(レビュー)（システムパーツグループ）

連携ログインパーツ

「ログイン連携」機能については、それぞれAmazon・Apple・Google・LINEをご覧ください。

LINEログインパーツ

※スマートフォンでの表示の場合のみ表示されます。

ログインせずに購入表示

futureshop非会員エリア（システムパーツグループ）

会員登録ボタンなどを表示するシステムパーツを配置する特殊なシステムパーツ（システムパーツグループ）です。
以下の各ログイン画面ごとにシステムパーツグループが用意されています。

• futureshop非会員エリア(お気に入り)（システムパーツグループ）
• futureshop非会員エリア(LINE)（システムパーツグループ）
• futureshop非会員エリア(レビュー)（システムパーツグループ）

会員登録誘導表示

戻るボタン

「ログイン連携」機能については、それぞれAmazon・Apple・Google・LINEをご覧ください。

連携ログイン後表示

Amazonアカウントでログイン済みの場合

Amazonアカウントでログインした際、既に別の会員IDと連携済みである場合、未連携であるが同一アドレスの会員IDがある場合に表示されます。

Apple IDでログイン済みの場合

Apple IDでログインした際、既に別の会員IDと連携済みである場合、未連携であるが同一アドレスの会員IDがある場合に表示されます。

Googleアカウントでログイン済みの場合

Googleアカウントでログインした際、既に別の会員IDと連携済みである場合、未連携であるが同一アドレスの会員IDがある場合に表示されます。

メッセージが表示される画面遷移や条件については、画面遷移について-会員登録済（未ログイン状態含む）のお客様（消費者）の場合をご覧ください。

LINEログイン後表示

LINE IDと同じメールアドレスで会員登録があるが、会員情報とID連携していない場合に表示されます。

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

「Apple」「Google」「Amazon」のボタンの表示順を変更するには、CSSを利用します。
「LINE」は別のシステムパーツで出力されるため、表示位置は一番下か上に限られます。

いくつか並び順の変更例を記載しますので、参考にしてください。

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

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

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

「Apple」「Google」「Amazon」の並び順を変更する方法

.fs-c-loginForm .fs-c-anotherLogin--amazon {
order: 1;
}
.fs-c-loginForm .fs-c-anotherLogin--google {
order: 2;
}
.fs-c-loginForm .fs-c-anotherLogin--apple {
order: 3;
}

.fs-c-linkedServiceLogin__login {
flex-direction: column-reverse;
}

「LINE」を一番上に表示する方法

【方法1】レイアウトの配置のみで変更する

まず最も簡単な方法をご紹介します。

「LINEでログイン」は「LINEログインパーツ（システムパーツ）」に含まれ、「Apple」「Google」「Amazon」のボタンは「連携ログインパーツ（システムパーツ）」に含まれます。
下図を参考に、該当レイアウトで単純にパーツの配置順を入れ替えます。

パーツを操作する階層は、「BODY＞メインエリア＞コンテンツエリア＞ログイン情報表示エリア＞futureshop会員エリア＞他社サービスログインエリア」です。

ただし、この場合 「連携サービスでログイン・会員登録」の見出しが「LINEでログイン」ボタンの下に表示されてしまいます。

上記のような表示になってしまう理由は、「連携サービスでログイン・会員登録」の見出しが、「Apple」「Google」「Amazon」のボタンが含まれる「連携ログインパーツ（システムパーツ）」内に含まれているからです。

【方法2】CSSとフリーパーツで調整する

「見出し」を「LINEでログイン」ボタンの上に表示したい場合は、以下の操作手順をご覧ください。
既存の「連携サービスでログイン・会員登録」の見出しをCSSにて非表示にし、新たな見出しを「フリーパーツ」で用意します。

＜まずはじめに＞ご注意事項

ここでは「デバイス設定」において、スマートフォンからの閲覧時にスマートフォン専用の「テーマ」が設定されている場合の手順について説明します。

「LINEでログイン」ボタンはスマートフォンのみで表示されます。
そのため、スマートフォンに「PC（その他）」と同じテーマを選択している場合、PC画面に「LINEでログイン」ボタンが表示されていないにもかかわらず、「連携サービスでログイン・会員登録」の見出しも表示されなくなります。本手順に沿って操作する場合は、デバイス設定の状況に注意してください。

1．「連携ログインパーツ（システムパーツ）」内に含まれている見出しを非表示にする

  /* LINEログインパーツを連携ログインパーツより上に配置した際の表示調整 */
  /* 「連携ログインパーツ（システムパーツ）」の見出しを非表示に */
  .fs-c-linkedServiceLogin__title {
    display: none;
  }
  /* 追加したフリーパーツ見出しとLINEログインパーツ間の余白を調整 */
  .fs-c-subSection__title + .fs-c-anotherLogin--line {
    margin-top: 0;
  }
  /* LINEログインパーツと連携ログインパーツ間の余白を調整 */
  .fs-c-anotherLogin--line + .fs-c-linkedServiceLogin {
    margin-top: 24px;
  }

2．新たな見出しを作成する

<h2 class="fs-c-subSection__title">連携サービスでログイン・会員登録</h2>

3．レイアウトに必要な「フリーパーツ」を配置し、「LINEログインパーツ」の位置を変更する

例として「マイページログイン(SP)」画面に設定する、として説明します。
「ショッピングカートログイン(SP)」「ショッピングカートログイン(定期)(SP)」「お気に入りログイン(SP)」「レビューログイン(SP)」にも同じ操作を行ってください。

手順［2］で作成したフリーパーツを追加し、既存の「LINEログインパーツ（システムパーツ）」と「連携ログインパーツ（システムパーツ）」の位置を入れ替えます。

パーツを操作する階層は、「BODY＞メインエリア＞コンテンツエリア＞ログイン情報表示エリア＞futureshop会員エリア＞他社サービスログインエリア」です。

上図を参考に、「連携サービスでログイン・会員登録見出し（新規で作成したフリーパーツ）」「LINEログインパーツ」「連携ログインパーツ」の順に配置してください。

4．プレビューで確認し、問題なければ保存する

5．すべての「ログイン連携」や「LINEログイン連携」の利用をやめた場合（オプション解約・利用設定のチェックOFFなど）

忘れずに、手順［1］で記載したCSSを削除し、手順［3］で「連携サービスでログイン・会員登録見出し」用に追加した「フリーパーツ」を該当レイアウトから外してください。