運用サポート(平日10:00~17:00) 06-6485-6485
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

「お申込み手続き(定期・頒布会)」レイアウトのシステムパーツ

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

表示イメージ:「お申込み手続き(定期・頒布会)」画面

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

定期・頒布会機能には、複数お届け先機能はありません。
また、クーポン発行機能をご利用の場合でも、クーポンはご利用いただけません。
ポイント機能をご利用の場合、ポイントは付与されますが、お申込み時に利用することはできません。

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

お申し込み手続きエリア(システムパーツグループ)

お申込み情報を処理するパーツを配置する特別なシステムパーツ(システムパーツグループ)で、以下のパーツを含みます。

お客様情報パーツ

お申込者情報を確認・変更できます。
各種メッセージやボタンラベルはご注文手続き(単数)と共通となります。

お客様情報モーダルについて

お届け先情報パーツ

お届け先情報を確認・変更できます。
各種メッセージやボタンラベルはご注文手続き(単数)と共通となります。

お届け先入力モーダルについて

[変更]ボタンを押下した際に表示されるモーダルです。

お届け先リストモーダルについて

[お届け先リストから選ぶ]ボタンを押下した際に表示されるモーダルです。

お支払い方法フォーム

選択可能な決済方法を表示します。
各種メッセージやボタンラベルはご注文手続き(単数)と共通となります。

定期・頒布会商品のお申込みで利用可能な決済は、「銀行振込」「代金引換」「郵便振込」「クレジットカード(SBPS)」「クレジットカード(F-REGI)」 「NP後払い」「任意決済1~3」となります。

決済表示名 決済に関する説明文
コマースクリエイター>メッセージ
選択不可メッセージ
コマースクリエイター>メッセージ
設定>決済>決済一覧>銀行振込-表示設定-決済表示名 構築メニュー>送料・決済設定>銀行振込-銀行振込設定-決済表示名 銀行振込メッセージ 銀行振込選択不可メッセージ
設定>決済>決済一覧>代金引換-表示設定-決済表示名 構築メニュー>送料・決済設定>代金引換-代金引換設定-決済表示名 代金引換メッセージ 代金引換選択不可メッセージ
設定>決済>決済一覧>郵便振込-表示設定-決済表示名 構築メニュー>送料・決済設定>郵便振込-郵便振込設定-決済表示名 郵便振込メッセージ 郵便振込選択不可メッセージ
設定>決済>決済一覧>NP後払い-表示設定-決済表示名 構築メニュー>送料・決済設定>NP後払い-NP後払い設定-決済表示名 NP後払いメッセージ NP後払い選択不可メッセージ
設定>決済>決済一覧>任意決済(1~3)-表示設定-決済表示名 構築メニュー>送料・決済設定>任意決済(1~3)-任意決済設定-決済表示名 任意決済1(~3)メッセージ 任意決済1(~3)選択不可メッセージ

クレジットカート決済をお客様(消費者)にご利用いただく場合

クレジットカード(SBPS)(決済オプション「SBPS」)/ クレジットカード(F-REGI)(決済オプション「F-REGI」)のいずれかをご契約ください。 SBPS/F-REGIとは決済代行会社です。お客様(消費者)は、ECサイト上でSBPS/F-REGIを選択できません。

※決済オプション「SBPS」をご利用の場合は、SBペイメントサービス株式会社(SBPS)とご契約後に設定>決済>SBペイメントサービス設定構築メニュー>ページ設定>SBペイメントサービス設定が必要となります。

利用設定については、設定>決済>決済一覧構築メニュー>送料・決済設定>決済方法設定(一覧)にて行います。
各決済設定の「利用設定(使用設定)」で「利用する(設定する)」にチェックしてください。
ご利用のクレジットカード決済によって表示される項目が変更されます。

カード情報入力モーダルについて

[カード情報を入力する]ボタンを押下した際に表示されるモーダルです。

カード情報入力モーダルでクレジットカード情報を入力して、設定ボタンを押下します。
クレジットカード情報は、決済代行会社(株式会社エフレジ、またはSBペイメントサービス株式会社)が運営する決済サーバーに、トークン方式(カード情報非通過方式)により直接送信されるため、オンラインショップサーバーを通過いたしません。

  • 見出し「カード情報入力」
    それぞれコマースクリエイター>メッセージにある以下のメッセージが表示されます。
    SBPS:「クレジットカード(SBPS)モーダル見出し」
    F-REGI:「クレジットカード(F-REGI)モーダル見出し」
  • セキュリティコード説明文
    「セキュリティコードはクレジットカード裏面の末尾3桁(一部4桁)の数字です。
    (一部のクレジットカードの場合、カード表面右上にある4桁の数字となります)」

    それぞれコマースクリエイター>メッセージにある以下のメッセージが表示されます。
    SBPS:「クレジットカード(SBPS)セキュリティコードメッセージ」
    F-REGI:「クレジットカード(F-REGI)セキュリティコードメッセージ」
  • [設定]ボタン
    コマースクリエイター>テーマ>ボタンの「設定-注文」ボタンが表示されます。
  • [キャンセル]ボタン
    コマースクリエイター>テーマ>ボタンの「キャンセル-共通」ボタンが表示されます。

クレジットカードの変更

カードを登録すると、下図のような画面が表示されます。
一度登録したカードを変更し、選択することができます。

  • [変更]ボタン
    コマースクリエイター>テーマ>ボタンにある「変更-注文」ボタンが表示されます。
    変更ボタンを押下すると、カード情報入力モーダルが表示され、カードを変更することができます。

登録済みのクレジットカード(クレジットカード番号保持機能)

クレジットカード番号保持機能をご利用の場合、表示される画面です。
ご利用には、お使いのクレジットサービス会社が提供するオプションのお申込みが必要です。
SBPS:『決済オプション「SBPS」クレジットカード情報お預かりサービス(SBPS無償オプションサービス)』
F-REGI:『決済オプション「F-REGI」カード登録型サービス(別途費用がかかります)』

新規でカードを登録できます。
すでに登録済みのクレジットカードがある場合は、「登録済みのクレジットカード」が選択肢として表示され、いずれか選択してご注文いただけます。

お申し込みコース・お届け日指定フォーム

設定>定期・頒布会>定期サイクル設定-申込サイクル設定構築メニュー>定期・頒布会設定>定期サイクル設定-お届けサイクル設定で選択されているパターンにより表示が異なります。

全パターン共通

全パターンに共通の見出しやメッセージについては下記のとおりです。

  • 見出し「お申し込みコース・お届け日指定」
    コマースクリエイター>メッセージの「申込コース・お届け日指定見出し」を表示できます。
  • メッセージ「お申し込みコースとお届けサイクルを指定してください。なお、ご指定のお届け日への配送が難しい場合、事前に連絡いたします。」
    コマースクリエイター>メッセージの「お届けサイクルメッセージ」を表示できます。

申込サイクル【お申込み時に選択】【購入者によるサイクル指定】

お客様がサイクルを選択できる申込みパターンです。
設定>定期・頒布会>定期サイクル設定-定期サイクル設定-期間・回数構築メニュー>定期・頒布会設定>定期サイクル設定-申込コース設定の設定により表示が異なります。

【お申込み時に選択】【購入者によるサイクル指定】期限ありコース(販売期間を指定)

設定>定期・頒布会>定期サイクル設定定-定期サイクル設定-期間・回数「期間」が選択されている場合です。

構築メニュー>定期・頒布会設定>定期サイクル設定-申込コース設定お届け月コース(期限有コース)が選択されている場合です。

定期サイクル設定-お届け日選択肢で「曜日」をチェック(左)/「日付」をチェック(右)
定期サイクル設定-お届けサイクル設定「購入者によるサイクル指定」で「曜日指定」をチェック(左)/「日付指定」をチェック(右)

【お申込み時に選択】【購入者によるサイクル指定】期限ありコース(販売回数を指定)/期限なしコース

設定>定期・頒布会>定期サイクル設定-定期サイクル設定-期間・回数「回数」または「制限なし」が選択されている場合です。

構築メニュー>定期・頒布会設定>定期サイクル設定-申込コース設定お届け回数コース(期限有コース)または期限無コースが選択されている場合です。

定期サイクル設定-お届け間隔の「日付を選択可能にする」にチェック(左)/「曜日を選択可能にする」にチェック(右)
定期サイクル設定-お届けサイクル設定「購入者によるサイクル指定」で「日付指定」をチェック(左)/「曜日指定」をチェック(右)
定期サイクル設定-お届け間隔の「お届け間隔を日数で選択可能にする」にチェック
初回お届け選択設定なし(左)/あり(右)
定期サイクル設定-お届けサイクル設定「購入者によるサイクル指定」の「サイクル指定」にチェック
初回お届け選択設定なし(左)/あり(右)

「コース」「初回お届け日」プルダウンの表示は共通です。

  • 「サイクル指定」ラジオボタン
    設定>定期・頒布会>定期サイクル設定-定期サイクル設定-お届け間隔「お届け間隔を日数で選択可能にする」構築メニュー>定期・頒布会設定>定期サイクル設定-お届けサイクル設定「購入者によるサイクル指定-サイクル指定」をチェックすると表示されます。
  • 「サイクル指定」選択肢内の「初回お届け日」
    サイクル指定の場合のみ表示されます。
    設定>定期・頒布会>定期サイクル設定-定期サイクル設定-初回お届け希望日選択設定「利用する」構築メニュー>定期・頒布会設定>定期サイクル設定-定期サイクル設定-初回お届け希望日設定(コマースクリエイター)「初回お届け日を変更可にする」の設定により異なります。
    「サイクル指定」の場合のみ、選択必須となります。
    ・チェックしていない場合:サイクル開始日を決定するため、初回のお届け日を設定するプルダウンが表示されます。(上図左)
    ・チェックしている場合:「初回お届け日」プルダウン(共通)が表示され、選択した日付が固定文言として表示されます。(上図右)「初回お届け日」プルダウン(共通)が未選択の場合は、「指定してください」と表示されます。
    ※表示される日付について、注意事項がございます。初回お届け日時の「選択肢」表示についてをご覧ください。

【お申込み時に選択】【購入者によるサイクル指定】頒布会

頒布会サイクル設定-お届け日で「日付」をチェック(左)/「曜日」をチェック(右)
頒布会サイクル設定-お届けサイクル設定「購入者によるサイクル指定」で「日付指定」をチェック(左)/「曜日指定」をチェック(右)

申込サイクル【店舗設定】【店舗によるサイクル固定】

店舗がお届け日のサイクルを指定するパターンです。お客様(消費者)は変更できません。
さらに、設定>定期・頒布会>定期サイクル設定-定期サイクル設定-期間・回数構築メニュー>定期・頒布会設定>定期サイクル設定-申込コース設定の設定により以下にように表示されます。

【店舗設定】【店舗によるサイクル固定】期限ありコース(販売期間を指定)

設定>定期・頒布会>定期サイクル設定-定期サイクル設定-期間・回数「期間」が選択されている場合です。

構築メニュー>定期・頒布会設定>定期サイクル設定-申込コース設定お届け月コース(期限有コース)が選択されている場合です。

定期サイクル設定-お届け日選択肢で「日付」を選択(左)/「曜日」を選択(右)
定期サイクル設定-お届けサイクル設定「店舗によるサイクル固定」で「日付指定」を選択(左)/「曜日指定」を選択(右)

【店舗設定】【店舗によるサイクル固定】期限ありコース(販売回数を指定)/期限なしコース

設定>定期・頒布会>定期サイクル設定-定期サイクル設定-期間・回数「回数」または「制限なし」が選択されている場合です。

構築メニュー>定期・頒布会設定>定期サイクル設定-申込コース設定お届け回数コース(期限有コース)または期限無コースが選択されている場合です。

定期サイクル設定-お届け日の「日付」を選択(左)/「曜日」を選択(右)
定期サイクル設定-お届けサイクル設定「店舗によるサイクル固定」で「日付指定」を選択(左)/「曜日指定」を選択(右)

【店舗設定】【店舗によるサイクル固定】頒布会

頒布会サイクル設定-お届け日で「日付」を選択(左)/「曜日」を選択(右)
頒布会サイクル設定-お届けサイクル設定「店舗によるサイクル固定」で「日付指定」を選択(左)/「曜日指定」を選択(右)

お届け日プレビューエリア

定期販売(左)/頒布会販売(右)

お届けサイクルがお客様の選択(あるいは店舗指定)により決定されると、お届け予定日が2回分プレビューされ、「すべてのお届け日を表示」リンクが表示されます。

  • お届け予定日
    お届け予定日がプレビューされます。
  • お届け予定商品名
    頒布会の場合、各回にお届け予定の商品名が表示されます。
  • [すべてのお届け日を表示]リンク
    押下すると、お届け予定日一覧がモーダルにて表示されます。
    設定>定期・頒布会>定期サイクル設定-定期サイクル設定-期間・回数「制限なし」構築メニュー>定期・頒布会設定>定期サイクル設定-定期サイクル設定-申込コース設定「期限無コース」を選択した場合(期限なしコース)は、12回分が表示されます。
    頒布会の場合は、各回ごとにお届け予定の商品名が表示されます。

お届け予定日一覧モーダルについて

定期販売(左)/頒布会販売(右)

配送方法表示フォーム

コマースクリエイター運用中の店舗様は、定期・頒布会の配送・送料は設定>配送・送料>配送サービス一覧構築メニュー>送料・決済設定>配送サービス設定(一覧)にて、通常商品とは別途設定します。

各種メッセージやボタンラベルは、ご注文手続き(単数)と共通のものと、お申し込み手続き(定期)個別のものが混在していますのでご注意ください。特に記載のないものは「ご注文手続き(単数)と共通」です。

配送方法モーダルについて

(左)選択不可の配送方法がある場合(右)クール便・お届け時間帯・詳細指定事項欄がある場合

通信欄フォーム

設定>カート>購入画面設定-申込手続きページ設定-通信欄構築メニュー>定期・頒布会設定>ページ設定-お支払方法選択ページ-通信欄にて「利用する(設置する)」のチェックを設定すると、通信欄を表示できます。

各種メッセージやボタンラベルはご注文手続き(単数)と共通となります。

通信欄入力モーダルについて

ご注文内容パーツ

各種メッセージやボタンラベルはご注文手続き(単数)と共通となります。

返品特約表示

各種メッセージやボタンラベルはご注文手続き(単数)と共通となります。

コマースクリエイター>メッセージにある「返品特約メッセージ」を表示できます。
リンク先となる返品特約ページを別途ご用意しています。
表示内容は「返品特約について(フリーパーツ)」となります。
詳しくは告知ページと表示内容についてをご覧ください。

お支払い金額エリア(レイアウトパーツ)

お支払い金額パーツ

[申込を確定する]ボタンの上段・下段に金額を表示します。

「お支払い金額」表示スペースと、「各回のお支払い金額」表示スペースの入れ替えはCSSを調整頂くことで可能です。
また、「各回のお支払い金額」表示スペースの表示デザイン(文字色やフォントサイズなど)の調整もCSSにて行って頂けます。
詳しくは「各回のお支払い金額」表示スペースのカスタマイズ方法をご覧ください。

期限ありコース・送料後ほどご連絡(左上)/期限なしコース(左下)/期限ありコース(右)

「お支払い金額」表示スペースについて

商品合計金額、送料、手数料、合計金額と獲得する購入ポイントなどが表示されます。税込金額で表示されます。

「各回のお支払い金額」表示スペースについて

「お支払い金額/各回のお支払い金額」表示スペースのカスタマイズ方法

改正特定商取引法に基づく消費者庁のガイドラインに、より沿った形でのカスタマイズも可能ですので、サンプルコード(CSS)をご参照ください。

(左)[申込を確定する]ボタンの上に「各回のお支払い金額」「お支払い総額」を表示
(右)お支払い金額を強調する

コマースクリエイター>フリーパーツを利用します。

  1. フリーパーツを新規作成し、各サンプルコードを参考に記述してください。
  2. コマースクリエイター>テーマ(各デバイス)>レイアウト-お申し込み手続きにて「お支払い金額パーツ」の「head設定」に配置してください。レイアウト配置方法については、コマースクリエイター>レイアウト変更をご覧ください。

[申込を確定する]ボタンの上に「各回のお支払い金額」「お支払い総額」を表示

<style>
.fs-body-checkout-subscribe .fs-c-totalAndActions {
  display: flex;
  flex-wrap: wrap;
}
.fs-body-checkout-subscribe .fs-c-totalAndActions > * {
  width: 100%;
  order: 1;
}
.fs-body-checkout-subscribe .fs-c-totalAndActions .fs-c-confirmSubscription {
  order: 2;
}
</style>
			

お支払い金額を強調する

<style>
.fs-c-subscriptionTotal__title,
.fs-c-subscriptionTotalTable {
  font-size: 1.4rem;
}
.fs-c-subscriptionTotalTable__grandTotal .fs-c-price,
.fs-c-subscriptionGrandTotal__value .fs-c-price {
  font-size: 1.8rem;
}
</style>
			
[カートに戻る]ボタンをつける

コマースクリエイター>フリーパーツを利用します。レイアウトパーツの作成が必要になりますので手順をご確認ください。

  1. フリーパーツを新規作成し、サンプルコードを参考に記述してください。
  2. コマースクリエイター>テーマ(各デバイス)>レイアウト-お申し込み手続きにて「お支払い金額パーツ」を開き、「お申し込み手続きエリア」を開きます。
  3. [レイアウトパーツを追加する]を押下し、新規レイアウトパーツを作成します。
    任意の名前とclass(例:amountLayout)を指定してください。
  4. (3)で作成したレイアウト内に「お支払い金額パーツ」と(1)で作成したフリーパーツを配置します。配置方法はコマースクリエイター>レイアウト変更をご覧ください。
  5. (3)のレイアウトパーツの幅を調整します。レイアウトパーツ幅調整用サンプルをご参照ください。

[カートに戻る]ボタンをつける

<div class="fs-c-buttonContainer">
  <a href="/p/cart?type=subscribe" class="fs-c-button--change--small fs-c-button--standard">
    <span class="fs-c-button__label">カートに戻る</span>
  </a>
</div>
			

レイアウトパーツ幅調整用サンプル((3)で作成したレイアウトパーツのclassにamountLayoutを指定した場合の例です。適宜変更してください。)

.amountLayout {
  flex-grow: 1;
  flex-basis: 320px;
  min-width: 320px;
}
			

お支払い方法メッセージ

「お支払い方法フォーム」にて選択した決済方法に関して、[申込を確定する]ボタン下に、それぞれメッセージを表示できます。(初期値は設定されていません。)

選択した決済方法 メッセージ(説明)
コマースクリエイター>メッセージにて設定
銀行振込 銀行振込 手続き説明メッセージ
代金引換 代金引換 手続き説明メッセージ
郵便振込 郵便振込 手続き説明メッセージ
クレジットカード(SBPS) クレジットカード(SBPS) 手続き説明メッセージ
クレジットカード(SBPS)登録済みカード クレジットカード(SBPS)登録済みカード 手続き説明メッセージ
クレジットカード(F-REGI) クレジットカード(F-REGI) 手続き説明メッセージ
クレジットカード(F-REGI)登録済みカード クレジットカード(F-REGI)登録済みカード 手続き説明メッセージ
NP後払い NP後払い 手続き説明メッセージ
任意決済1(~3) 任意決済1(~3) 手続き説明メッセージ

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。