運用サポート(平日10:00~17:00) 06-6485-6485
コマースクリエイター未利用コマースクリエイター移行中(有効)コマースクリエイター利用中説明を表示 ▼

「商品グループ」レイアウトのシステムパーツ

×

マニュアル閲覧上の注意

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

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

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

表示イメージ:「商品グループ」画面
(カテゴリ数・商品数は省略しています。)

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

「商品グループ」「バンドル商品一覧」「クーポン対象商品一覧」レイアウトに配置されるシステムパーツは以下となります。画像は「スタートアップテーマ」のものとなります。
一部、フリーパーツもご紹介しています。

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

パンくずリストパーツ

最上位階層の名称・リンク先など設定>商品・商品グループ>商品ページ設定-パンくずリスト設定構築>ページ設定>商品ページ設定-パンくずリスト設定にて設定できます

エラー表示

カートに商品を投入した際、エラーがあった場合に表示され、「×」を押下すると消去できます。

処理が成功した場合の表示もこちらのパーツによるものです。

商品グループ表示

下部階層となる子グループへのリンクが表示されます。

1行あたりの商品グループ表示数は、画面幅に応じて変更(レスポンシブ対応)していますが、CSSデザインにて変更できます。

詳しくはスタートアップテーマ 商品グループの子グループ表示数(横)を変更をご覧ください。

<表示される商品グループの設定>

運用>商品管理>商品グループ管理(子グループ一覧/順序設定)にてご確認いただけます。

公開中の子グループの運用>商品管理>商品グループ管理(新規登録・編集)-グループ基本情報に登録した「グループ名」「グループイメージ画像」「商品グループコメント」が表示されます。

<商品グループ画像のサイズ>

構築>ページ設定>商品ページ設定-商品グループ 画像幅設定 (コマースクリエイター)-商品グループ画像の設定によります。

  • 「リサイズなし」が選択されている場合:アップロードされた画像(オリジナルサイズ画像)が表示されます。
  • 「リサイズあり」が選択されている場合:リサイズ処理によって作成した画像が表示されます。

設定>商品・商品グループ>商品一覧ページ設定-商品グループ画像幅設定-商品グループ画像幅設定の設定によります。

  • 「リサイズする」をチェックしていない場合:アップロードされた画像(オリジナルサイズ画像)が表示されます。
  • 「リサイズする」をチェックした場合場合:リサイズ処理によって作成した画像が表示されます。

表示イメージ

商品一覧を配置するシステムパーツグループ

商品情報を表示するパーツを配置するシステムパーツグループ並び替え・ページャーパーツを配置するシステムパーツグループです。

「商品グループ一覧(商品検索結果一覧)」「バンドル商品一覧」「クーポン対象商品一覧」画面に表示されます。

商品グループエリア(システムパーツグループ)

商品一覧を表示するシステムパーツを配置する特殊なシステムパーツ(システムパーツグループ)です。商品グループレイアウトに配置されます。

検索結果0件の場合

「商品グループエリア」内に、商品一覧0件メッセージが表示されます。 初期状態では「現在登録されている商品はありません。」と表示されています。

「商品グループエリア」内に配置したパーツは表示されません。予めご了承ください。

「現在登録されている商品はありません。」(メッセージ)
コマースクリエイター>メッセージ-商品一覧0件メッセージにて設定できます。

バンドル商品エリア(システムパーツグループ)

通常・定期商品、定期商品・頒布会商品のみの場合は配置されません。

商品一覧を表示するシステムパーツを配置する特殊なシステムパーツ(システムパーツグループ)です。バンドル商品一覧レイアウトに配置されます。

「バンドル商品エリア」内は、商品グループと同様の表示となります。(以下を除く)

検索結果0件の場合

「バンドル商品エリア」内に配置したパーツは表示されません。予めご了承ください。

「現在登録されている商品はありません。」(バンドル商品用メッセージ)
商品グループと同様の表示となります。
コマースクリエイター>メッセージ-バンドル商品0件メッセージにて設定できます。

クーポン対象商品エリア(システムパーツグループ)

通常・定期商品、定期商品・頒布会商品のみの場合は配置されません。

商品一覧を表示するシステムパーツを配置する特殊なシステムパーツ(システムパーツグループ)です。クーポン対象商品一覧レイアウトに配置されます。

「クーポン対象商品エリア」内は、商品グループと同様の表示となります。

検索結果0件の場合

商品グループと同様の表示となります。
「クーポン対象商品エリア」内に配置したパーツは表示されません。予めご了承ください。

「現在登録されている商品はありません。」(クーポン対象商品用メッセージ)
コマースクリエイター>メッセージ-クーポン対象商品0件メッセージにて設定できます。

並び替え・ページャーパーツ

商品一覧に表示された商品を並び替えることができます。
また商品一覧に表示される商品件数が表示されます。

表示される「並び替えリンク」の設定

設定>商品・商品グループ>商品一覧ページ設定-並び替えリンク表示設定構築>ページ設定>商品ページ設定-並び替えリンク表示設定-並び替えリンク設定にて設定できます。

「並び替えリンク」のリンクテキスト・表示順も変更できます
「並び替えリンクを表示する」のチェックを設定しない場合、並び替えリンクは表示されません。

※「キーワードヒット順」は商品検索結果ページのみに表示されます。

<「バンドル商品エリア」「クーポン対象商品エリア」の並び替え>

以下のソートは、表示されません。

  • 優先度順
  • レビュー順

ページャーの表示

設定>商品・商品グループ>商品一覧ページ設定-商品一覧表示件数設定-商品グループページの商品一覧に表示する商品数構築>ページ設定>商品ページ設定-商品表示件数設定 (コマースクリエイター)-商品一覧に表示する商品数にて設定できます。

設定された件数以上の商品がある場合、ページャー(前・後など各ページへのリンク)が表示されます。

商品情報を表示するパーツを配置するシステムパーツグループ

「商品グループ一覧(商品検索結果一覧)」「バンドル商品一覧」「クーポン対象商品一覧」画面に表示されます。

商品一覧エリアは、formタグにて構成されています。
HTMLタグの動作上、商品一覧エリア内にformタグを含むパーツを配置すると、正しく動作しません。

formタグを含むパーツを配置する場合は、コマースクリエイター>レイアウト変更にて、「商品一覧エリア」の外に配置してください。

商品一覧(システムパーツグループ)

商品情報を一覧表示するための特殊なシステムパーツ(システムパーツグループ)です。
商品情報を表示するシステムパーツや商品情報置換文字を記載したフリーパーツは、このパーツの下部階層に配置します。
配置されたパーツは、一覧表示される商品の数だけ繰り返し表示されます。

<商品一覧に表示される件数>

設定>商品・商品グループ>商品一覧ページ設定-商品一覧表示件数設定-商品グループページの商品一覧に表示する商品数構築>ページ設定>商品ページ設定-商品表示件数設定 (コマースクリエイター)-商品一覧に表示する商品数にて設定できます。

<商品一覧の1行あたりの表示商品数>

画面幅に応じて変更(レスポンシブ対応)していますが、CSSデザインにて変更できます。

詳しくはスタートアップテーマ 商品一覧の商品表示数(横)を変更するをご覧ください。

<商品の並び順>

商品一覧(バンドル)(システムパーツグループ)

バンドル販売機能をご利用の場合に、同じバンドル割引の対象となる商品を一覧表示します。
商品グループと同様の表示となります。(以下を除く)

<商品の並び順>

通常・定期商品、定期商品・頒布会商品はバンドル販売対象外のため、表示されません。

商品一覧(クーポン)(システムパーツグループ)

クーポンの対象商品に指定された商品を一覧表示します。
マイページの「クーポン情報」ページに表示された「このクーポンの対象商品」にある「クーポン対象商品一覧へ」リンクから遷移します。
商品グループと同様の表示となります。(以下を除く)

<商品の並び順>

通常・定期商品、定期商品・頒布会商品はクーポン割引対象外のため、表示されません。

商品画像・拡大パーツ

<画像の登録>

運用>商品管理>商品画像設定(コマースクリエイター)にて登録します。

「商品サムネイル画像に指定する」を選択した画像が、「商品一覧」のサムネイル画像として表示されます。

詳しくはメイン画像と拡大画像の表示順についてをご覧ください。

一括登録をされる際は、商品画像登録(コマースクリエイター)をご覧ください。

[拡大]ボタン(虫眼鏡マーク)について
押下すると、画像を拡大表示します。
(虫眼鏡マーク)を変更する場合は、コマースクリエイター>テーマ>ボタンにある「他の画像を見る-商品一覧」の「画像」に表示したい画像を登録します。
※「ラベル」は表示されません。
拡大画像について
拡大画像は画面幅に合わせて表示します。
拡大画面でボタン押下にて前後送り、またはフリックできます。
画面下部にドットナビゲーションが表示されます。
表示順は、メイン画像と拡大画像の表示順についてをご覧ください。
バリエーション登録がある場合、バリエーション名を画面上部に表示します。

商品名パーツ

運用>商品管理>商品新規登録・商品基本情報編集-商品基本情報にあるキャッチコピーと商品名が表示されます。

商品マークパーツ

商品マークパーツには「商品マーク」「バンドルアイコン」「予約商品マーク」「クール便マーク」が表示されます。

「商品マーク」とは、商品一覧・商品詳細で、商品ごとに表示できるマークです。
新製品やセール表示、あるいは製品の特長を示すなどの使い方ができます。

<商品マーク登録方法>

  1. 運用>商品管理>商品新規登録・商品基本情報編集-商品基本情報編集-タグにて商品タグを設定します。
  2. コマースクリエイター>テーマ>商品マークにて、「追加する」ボタンを押下し、「商品タグ」と商品タグが設定された商品に表示する「商品マーク」のラベル(表示文言)とカラーを選択します。必要に応じて、classを指定できます。
    (例:商品タグ「2019年春新製品」、商品マーク設定・ラベル「NEW」・カラー「イエロー」)
    商品マークのラベルや色、classはテーマごとに変更できます。
  3. 商品マークの表示順はコマースクリエイター>商品マーク一覧にて設定できます。商品マークの次に「バンドルアイコン」または「予約商品マーク」、そして「クール便」が表示されます。

定期・頒布会商品に関するマークについて

表示マークと表示される条件については、下表をご覧ください。なお、「バンドルアイコン」「予約商品マーク」は表示されません。

マーク名 表示される商品の条件 商品マークの設定
「1回のみ・定期販売」マーク 通常・定期商品の場合

1.設定>商品・商品グループ>商品ページ設定-商品設定-定期・頒布会商品マーク表示設定にて「定期・頒布会商品に「定期・頒布会マーク」を表示する」にチェック

1.構築>定期・頒布会設定>定期・頒布会ページ設定-商品ページ-商品スタイル表示設定にて「「定期・頒布会商品マーク」表示」にチェック

2.運用>商品管理>商品情報(定期・頒布会設定)-定期・頒布会設定-商品の種類にて「通常・定期商品」を選択

コマースクリエイター>テーマ>ボタンの「通常・定期購入-商品共通」
「定期販売」マーク 定期商品の場合

1.設定>商品・商品グループ>商品ページ設定-商品設定-定期・頒布会商品マーク表示設定にて「定期・頒布会商品に「定期・頒布会マーク」を表示する」にチェック

1.構築>定期・頒布会設定>定期・頒布会ページ設定-商品ページ-商品スタイル表示設定にて「「定期・頒布会商品マーク」表示」にチェック

2.運用>商品管理>商品情報(定期・頒布会設定)-定期・頒布会設定-商品の種類にて「定期商品」を選択

コマースクリエイター>テーマ>ボタンの「定期購入-商品共通」
「頒布会販売」マーク 頒布会商品の場合

1.設定>商品・商品グループ>商品ページ設定-商品設定-定期・頒布会商品マーク表示設定にて「定期・頒布会商品に「定期・頒布会マーク」を表示する」にチェック

1.構築>定期・頒布会設定>定期・頒布会ページ設定-商品ページ-商品スタイル表示設定にて「「定期・頒布会商品マーク」表示」にチェック

2.運用>商品管理>商品情報(定期・頒布会設定)-定期・頒布会設定-商品の種類にて「頒布会商品」を選択

コマースクリエイター>テーマ>ボタンの「頒布会購入-商品共通」
「初回特別価格あり」マーク 定期・頒布会販売価格(初回)が設定されている場合

1.設定>商品・商品グループ>商品ページ設定-商品設定-定期・頒布会商品マーク表示設定にて「定期・頒布会商品に「定期・頒布会マーク」を表示する」にチェック

1.構築>定期・頒布会設定>定期・頒布会ページ設定-商品ページ-商品スタイル表示設定にて「「定期・頒布会商品マーク」表示」にチェック

2.運用>商品管理>商品情報(定期・頒布会設定)-商品価格-定期・頒布会販売価格(初回)を設定

コマースクリエイター>テーマ>ボタンの「初回価格-商品共通」
「お届けサイクル(定期商品)」マーク

1.運用>商品管理>商品情報(定期・頒布会設定)-定期・頒布会設定-商品の種類にて「通常・定期商品」「定期商品」「頒布会商品」を選択

2.設定>定期・頒布会>定期サイクル設定-サイクル表示マークを設定

2.構築>定期・頒布会設定>定期サイクル設定-定期サイクル設定-サイクル表示名を設定

設定>定期・頒布会>定期サイクル設定-サイクル表示マーク
ラベル名、カラー、class設定、画像を設定できます。

構築>定期・頒布会設定>定期サイクル設定-定期サイクル設定-サイクル表示名

「お届けサイクル(頒布会商品)」マーク

1.運用>商品管理>商品情報(定期・頒布会設定)-定期・頒布会設定-商品の種類にて「通常・定期商品」「定期商品」「頒布会商品」を選択

2.設定>定期・頒布会>頒布会サイクル設定-サイクル表示マークを設定

2.構築>定期・頒布会設定>頒布会サイクル設定-頒布会サイクル設定-サイクル表示名を設定

設定>定期・頒布会>頒布会サイクル設定-サイクル表示マーク
ラベル名、カラー、class設定、画像を設定できます。

構築>定期・頒布会設定>頒布会サイクル設定-頒布会サイクル設定-サイクル表示名

入出荷予定日表記名パーツ

通常・定期商品、定期商品・頒布会商品の場合は表示されません。

バリエーションが登録されていない商品が予定在庫機能をご利用の場合に表示されます。

<予定日の設定>

運用>商品管理>商品情報(予定在庫設定)-予定在庫設定-入出荷予定日-表記名にて設定します。

「商品詳細ページに表示する」のチェックボックスが非選択の場合は表示されません。

バリエーションが登録されている商品は、カートボタンパーツに表示されます。

予約コメントパーツ

予約販売商品に、コマースクリエイター>メッセージの「商品一覧予約商品メッセージ」が表示されます。

商品価格パーツ

通常(予約/通常・定期)商品の場合

通常商品
予約商品

運用>商品管理>商品新規登録・商品基本情報編集-商品価格にある商品の販売価格、会員(ステージ)価格、通常価格(定価)が表示されます。

予約販売時は運用>商品管理>商品情報(予約)-予約設定-予約販売価格が表示されます。

「定価」「のところ」「当店特別価格」(価格キャプション)
設定>商品・商品グループ>商品ページ設定-価格表示設定-通常価格(定価)・販売価格表示設定構築>ページ設定>商品ページ設定-価格表示設定-定価表示設定にて、変更できます。
「通常販売価格」「のところ」「予約販売価格」(予約価格キャプション)
設定>商品・商品グループ>商品ページ設定-価格表示設定-販売価格・予約販売価格表示設定構築>ページ設定>商品ページ設定-価格表示設定-予約販売価格表示設定にて、変更できます。
「会員特別価格」(会員価格キャプション)
設定>商品・商品グループ>商品ページ設定-価格表示設定-会員価格表示設定構築>ページ設定>商品ページ設定-価格表示設定にて設定できます。
消費税(税込・税抜)表示設定
コマースクリエイター>テーマ設定-価格表示パターン-商品詳細にて設定できます。
消費税計算(税込・税抜)の設定
全商品一律で設定する場合は、設定>店舗共通>消費税設定構築>送料・決済設定>消費税設定にて設定できます。
特定の商品にのみ税込金額を設定する場合は、運用>商品管理>商品新規登録・商品基本情報編集-商品価格にある「下記すべて税込価格を設定する」のチェックを設定してください。

定期・頒布会商品の場合

定期・頒布会商品

定期商品、頒布会商品の場合、運用>商品管理>商品情報(定期・頒布会設定)-商品価格-定期・頒布会販売価格(通常回)にて設定した通常回価格のみが表示されます。

※通常・定期商品の場合、通常商品(予約商品を除く)と同様になりますので、通常(予約/通常・定期)商品の場合をご覧ください。

「定期販売価格(通常回/1回あたり」(定期価格キャプション)
設定>商品・商品グループ>商品ページ設定-価格表示設定-定期・頒布会販売価格表示設定構築>定期・頒布会設定>定期・頒布会ページ設定-商品ページ-定期・頒布会販売価格キャプション設定)にて変更できます。
消費税(税込・税抜)表示設定
コマースクリエイター>テーマ設定-価格表示パターン-商品詳細にて設定できます。
消費税計算(税込・税抜)の設定
全商品一律で設定する場合は、設定>店舗共通>消費税設定構築>送料・決済設定>消費税設定にて設定できます。
特定の商品にのみ税込金額を設定する場合は、運用>商品管理>商品新規登録・商品基本情報編集[定期・頒布会]タブ-商品価格「税込設定」にある「下記すべて税込価格を設定する」のチェックを設定してください。

販売期間表示

通常商品/通常・定期商品/定期商品/頒布会商品の場合

販売期間開始前
販売期間終了後
「販売期間 2021/09/01 0:00 〜 2021/09/30 18:00」(販売期間)
運用>商品管理>商品新規登録・商品基本情報編集-詳細情報-販売期間を設定すると表示されます。
「販売開始前です。」(販売期間前メッセージ)
コマースクリエイター>メッセージにある「商品一覧販売開始前メッセージ」を表示します。(販売期間とともに表示されます。)
「販売を終了しました。」(販売期間終了後メッセージ)
コマースクリエイター>メッセージにある「商品一覧販売終了後メッセージ」を表示します。(販売期間は表示されません。)

予約販売商品の場合

予約受付期間開始前
予約受付期間終了後
「予約受付期間 2020/12/01 0:00 〜 2021/12/21 18:00」(販売期間)
運用>商品管理>商品情報(予約)-予約受付期間を設定しすると表示されます。
「受付期間前です。」(受付期間前メッセージ)
コマースクリエイター>メッセージにある「商品一覧予約受付期間開始前メッセージ」を表示します。(予約受付期間とともに表示されます。)
「予約受付を終了しました。」(予約受付期間終了後メッセージ)
コマースクリエイター>メッセージにある「商品一覧予約受付期間終了後メッセージ」を表示します。(予約受付期間は表示されません。)
運用>商品管理>商品情報(予約)-予約受付期間にある「予約期間を終了しても通常商品として販売しない(販売期間を入力しても無効となります)」のチェックがOFFの場合は、表示されません。
チェックOFFの場合は、運用>商品管理>商品情報(予約)-販売期間の期間が表示されます。
販売期間が設定されていない場合は、何も表示されません。

在庫なし表示テキスト

予約商品の場合
「在庫切れ」
通常商品が在庫切れの場合に、コマースクリエイター>メッセージにある「商品一覧在庫切れメッセージ」を表示できます。
「予約在庫切れ」
予約販売商品が予約在庫切れの場合には、コマースクリエイター>メッセージにある「商品一覧予約在庫切れメッセージ」を表示できます。

定期・頒布会商品の在庫数(申込上限数)在庫数(申込上限数)については、表示設定の有無にかかわらず、表示されません。

商品一言説明表示

商品一言説明は、商品グループ/商品一覧に表示する短い商品説明です。
商品レイアウト・SEO設定(コマースクリエイター)-商品コメント(コマースクリエイター)-商品一言説明が表示されます。

カートボタンパーツ

概要

  • 「カート・バリエーションごとにボタンパーツ」「カート・セレクトボックスのみパーツ」の2種類ご用意しています。
    いずれか1つを必ず配置してください
  • 通常販売・予約商品の両方に対応しています。
  • バリエーション登録のない商品・バリエーション登録のある商品の両方に対応しています。
  • 商品に「項目選択肢」「オプション価格」がある場合は、「カートに入れる」ボタンではなく「詳細を見る」ボタンが表示されます。
  • 「通常・定期商品」「定期商品」「頒布会商品」の場合は[詳細をみる]ボタンの表示になります。
  • 設定>入荷お知らせメール>入荷お知らせメール基本設定-利用設定運用>入荷お知らせメール>基本設定-基本設定-利用設定にて「利用する」のチェックをし、かつ商品登録にて入荷お知らせメール申込にチェックしている場合、「入荷お知らせメール」ボタンを表示できます。

ボタン押下時の遷移・挙動

  • バリエーション登録がない商品は、「カートに入れる」ボタンを押下すると、カートに商品を入れられます。
  • バリエーション登録がある商品は「カートに入れる」ボタンを押下すると、バリエーション選択モーダルが表示されます。
    バリエーションを選んで「カートに入れる」または「お気に入り登録(解除)」できます。
  • 商品に「項目選択肢」「オプション価格」がある場合に表示される「詳細を見る」ボタンを押下すると、商品詳細に遷移します。
    商品詳細にて「項目選択肢」「オプション価格」を選択した上でカートに入れられます。
  • 「入荷お知らせメール」ボタンを押下すると、「入荷お知らせ申し込みモーダル」が表示されます。
    商品が入荷された際にお知らせメールを受信するメールアドレスを登録をすることができます。

カートボタンパーツは、バリエーション画像表示・在庫の有無や僅少表示・カートボタン/再入荷お知らせボタン・お気に入り登録済み/未登録などの詳細な制御を行っています。そのため、JavaScirptなどを使用してHTMLを変更した場合、正常に動作しなくなる可能性があります。予めご了承ください。

カート・バリエーションごとにボタンパーツ

バリエーション登録がない商品

項目選択肢やオプション登録がある場合
再入荷お知らせ設定をしている場合
[カートに入れる]ボタン
押下すると、カートに商品1点が入ります。
コマースクリエイター>テーマ>ボタンにある「カートに入れる-商品一覧」ボタンを表示できます。
[詳細を見る]ボタン
押下すると、商品詳細に遷移します。
商品詳細にて「項目選択肢」「オプション価格」を選択した上でカートに入れられます。
コマースクリエイター>テーマ>ボタンにある「商品詳細を見る-商品一覧」ボタンを表示できます。
[再入荷お知らせ]ボタン
入荷お知らせ設定をしている場合、「入荷お知らせメール」ボタンを表示できます。
コマースクリエイター>テーマ>ボタンにある「入荷お知らせメール申込-商品一覧」ボタンを表示できます。
[お気に入り登録(解除)ボタン]
コマースクリエイター>テーマ>ボタンにある「お気に入り登録(アイコン)-商品共通」「お気に入り解除(アイコン)-商品共通」ボタンを表示できます。
在庫表示
在庫数は表示されません。
在庫切れの場合は、在庫切れ表示テキストが表示されます。
入荷予定日については、「入出荷予定日表記名パーツ」に表示されます。

バリエーション登録がある商品

バリエーション選択モーダル
[カートに入れる]ボタン
押下すると、バリエーションを選択するモーダルが開きます。
コマースクリエイター>テーマ>ボタンにある「カートに入れる(バリエーション)-商品共通」ボタンを表示できます。

バリエーション選択モーダルが表示された場合は、以下の通りとなります。

バリエーション画像の表示
運用>商品管理>商品画像設定(コマースクリエイター)にて登録したバリエーション画像が表示されます。
「カラー/サイズ」(バリエーション軸の表示設定)
設定>商品・商品グループ>商品ページ設定-バリエーション表示設定-バリエーションごとにカートボタン表示-バリエーション縦横表示設定構築>ページ設定>商品ページ設定-バリエーション表示設定-バリエーションごとにカートボタン表示-バリエーション縦横配置で、先に記載にするバリエーションを設定できます。
[お気に入り登録(解除)ボタン]
コマースクリエイター>テーマ>ボタンにある「お気に入り登録(アイコン)-商品共通」「お気に入り解除(アイコン)-商品共通」ボタンを表示できます。

在庫表示について

バリエーションの登録がある商品については以下の通りです。

在庫数の表示設定
<すべての商品に共通の設定をする場合>
設定>商品・商品グループ>商品ページ設定-在庫切れ設定-在庫表示設定構築>ページ設定>商品ページ設定-在庫切れ設定-在庫表示設定にて設定します。
<商品個別に設定をする場合>
運用>商品管理>商品情報(上級デザイン)-上級デザイン設定-在庫数表示設定にて設定します。
在庫切れのみ表示し、在庫数は表示しない場合
「表示しない」を選択
在庫数を表示する場合
「在庫数表示」を選択
在庫数に関するメッセージを表示する場合
「在庫僅少表示」を選択
コマースクリエイター>メッセージにある「バリエーション在庫僅少メッセージ」(残りわずか)を表示できます。
メッセージ表示の閾値は、運用>商品管理>商品情報(バリエーション在庫設定)の「僅少表示閾値」にて設定します。
設定値以下になると表示されます。
「在庫切れ」(在庫切れの場合のメッセージ)
コマースクリエイター>メッセージにある「バリエーション在庫切れメッセージ」を表示できます。
在庫切れの場合のボタン表示
カートボタンの代わりに、以下を表示することができます。
設定は、設定>商品・商品グループ>商品ページ設定-バリエーション表示設定-バリエーションごとにカートボタン表示-在庫切れ表示設定にて行います。
ボタンではなく「—」を表示する
[―]が表示されます。
在庫切れバリエーションは表示しない
バリエーション選択肢が行ごと削除されます。
「入荷お知らせメール」ボタンを表示する
カートボタンに代わって再入荷お知らせボタンを表示できます。
運用>入荷お知らせメール>基本設定-基本設定-利用設定にて「利用する」のチェックを設定してください。
チェックOFFの場合は、カートボタンは表示されません。
ボタンラベルは、コマースクリエイター>テーマ>ボタンにある「入荷お知らせメール申込(バリエーション)-商品共通」ボタンで変更できます。
押下すると、「入荷お知らせメール申し込みモーダル」に遷移します。 詳しくは、入荷お知らせメール申し込みモーダルをご覧ください。
商品ごとに再入荷お知らせボタンを非表示にする場合は、運用>商品管理>商品新規登録・商品基本情報編集-詳細情報-入荷お知らせメール申込にて設定します。
カートボタンの代わりに、以下を表示することができます。
設定は、構築>ページ設定>商品ページ設定-バリエーション表示設定-バリエーションごとにカートボタン表示-在庫切れ表示設定にて行います。
「—」を表示する
[―]が表示されます。
行を削除する(バリエーションを非表示)
バリエーション選択肢が行ごと削除されます。
入荷お知らせメール表示
カートボタンに代わって再入荷お知らせボタンを表示できます。
運用>入荷お知らせメール>基本設定-基本設定-利用設定にて「利用する」のチェックを設定してください。
チェックOFFの場合は、カートボタンは表示されません。
ボタンラベルは、コマースクリエイター>テーマ>ボタンにある「入荷お知らせメール申込(バリエーション)-商品共通」ボタンで変更できます。
押下すると、「入荷お知らせメール申し込みモーダル」に遷移します。 詳しくは、入荷お知らせメール申し込みモーダルをご覧ください。
商品ごとに再入荷お知らせボタンを非表示にする場合は、運用>商品管理>商品新規登録・商品基本情報編集-詳細情報-入荷お知らせメール申込にて設定します。

予定在庫機能について

  • 予定在庫機能をご利用で、かつ通常在庫切れの場合は運用>商品管理>商品情報(予定在庫設定)-予定在庫設定-入出荷予定日-表記名が表示されます。
    「商品詳細ページに表示する」のチェックボックスが非選択の場合は表示されません。

予約販売在庫について

在庫数の表示設定
<すべての商品に共通の設定をする場合>
設定>商品・商品グループ>商品ページ設定-予約商品在庫切れ設定-予約在庫表示設定構築>ページ設定>商品ページ設定-予約設定-予約在庫表示設定にて設定します。
<商品個別に設定をする場合>
運用>商品管理>商品情報(予約)-予約在庫数表示設定にて設定します。
予約在庫切れのみ表示し、予約在庫数は表示しない場合
「表示しない」を選択
予約在庫数を表示する場合
「予約在庫数表示」を選択
予約在庫数に関するメッセージを表示する場合
「予約在庫僅少表示」を選択
コマースクリエイター>メッセージにある「バリエーション予約在庫僅少メッセージ」(残りわずか)を表示できます。
メッセージ表示の閾値は、運用>商品管理>商品情報(予約)- 予約数設定の「予約在庫僅少表示閾値」にて設定します。
設定値以下になると表示されます。
「予約在庫切れ」(予約在庫切れの場合のメッセージ)
コマースクリエイター>メッセージにある「バリエーション予約在庫切れメッセージ」を表示できます。
予約在庫切れの場合のボタン表示
カートボタンの代わりに、以下を表示することができます。
設定は、設定>商品・商品グループ>商品ページ設定-バリエーション表示設定-バリエーションごとにカートボタン表示-予約在庫切れ表示設定にて行います。
ボタンではなく「—」を表示する
[―]が表示されます。
在庫切れバリエーションは表示しない
バリエーション選択肢が行ごと削除されます。
カートボタンの代わりに、以下を表示することができます。
設定は構築>ページ設定>商品ページ設定-バリエーション表示設定-バリエーションごとにカートボタン表示-予約在庫切れ表示設定にて行います。
「—」を表示する
[―]が表示されます。
行を削除する(バリエーションを非表示)
バリエーション選択肢が行ごと削除されます。
表示内容 メッセージ
「在庫切れ」「在庫僅少」時の表示メッセージと初期値
通常販売商品
残りわずか バリエーション在庫僅少メッセージ
在庫切れ バリエーション在庫切れメッセージ
予約販売商品
残りわずか バリエーション予約在庫僅少メッセージ
予約在庫切れ バリエーション予約在庫切れメッセージ

カート・セレクトボックスのみパーツ

バリエーション登録がない商品

カート・バリエーションごとにボタンパーツと同様です。

バリエーション登録がある商品

バリエーション選択モーダル
[カートに入れる]ボタン
押下すると、バリエーションを選択するモーダルが開きます。
コマースクリエイター>テーマ>ボタンにある「カートに入れる(バリエーション)-商品共通」ボタンを表示できます。

バリエーション選択モーダルが表示された場合は、以下の通りとなります。
セレクトボックスでバリエーションをいずれか1つ選択して、お気に入りボタン、カートボタンを押下できます。

「カラー/サイズ」(バリエーション軸の表示設定)
設定>商品・商品グループ>商品ページ設定バリエーション表示設定-セレクトボックスのみ表示-バリエーション縦横表示設定構築>ページ設定>商品ページ設定-バリエーション表示設定-すべてをセレクトボックス表示-バリエーション縦横配置で、先に記載にするバリエーションを設定できます。
「選択してください」(選択肢の初期表示)
設定>商品・商品グループ>商品ページ設定バリエーション表示設定-セレクトボックスのみ表示-セレクトボックスの初期値構築>ページ設定>商品ページ設定-バリエーション表示設定-すべてをセレクトボックス表示-セレクトボックスの初期値
[お気に入り登録(解除)ボタン]
コマースクリエイター>テーマ>ボタンにある「お気に入り登録(アイコン)-商品共通」「お気に入り解除(アイコン)-商品共通」ボタンを表示できます。

在庫表示について

在庫数の表示設定
<すべての商品に共通の設定をする場合>
設定>商品・商品グループ>商品ページ設定-在庫切れ設定-在庫表示設定構築>ページ設定>商品ページ設定-在庫切れ設定-在庫表示設定にて設定します。
<商品個別に設定をする場合>
運用>商品管理>商品情報(上級デザイン)-上級デザイン設定-在庫数表示設定にて設定します。
在庫の有無のみ表示し、在庫数は表示しない場合
「表示しない」もしくは「在庫数表示」を選択
在庫がある場合は「〇」在庫切れの場合は「×」を表示します。
「在庫数表示」を選択しても、在庫数は表示できません。
在庫数に関するメッセージを表示する場合
「在庫僅少表示」を選択
「僅少表示閾値」より多い場合は「〇」を、「僅少表示閾値」以下になった場合は「△」を、在庫切れの場合は「×」を表示します。
メッセージ表示の閾値は、運用>商品管理>商品情報(バリエーション在庫設定)の「僅少表示閾値」にて設定します。
凡例として欄外にコマースクリエイター>メッセージにある以下の3つのメッセージを表示できます。
  • 「バリエーション在庫あり凡例メッセージ(セレクトボックス)」
  • 「バリエーション在庫僅少凡例メッセージ(セレクトボックス)」
  • 「バリエーション在庫切れ凡例メッセージ(セレクトボックス)」
なお、「〇」「△」「×」は変更できません。
「入荷お知らせメール」ボタン(在庫切れの場合のボタン表示)
カートボタンに代わって再入荷お知らせボタンを表示できます。
設定>入荷お知らせメール>入荷お知らせメール基本設定-利用設定運用>入荷お知らせメール>基本設定-基本設定-利用設定にて「利用する」のチェックを設定してください。
チェックOFFの場合は、カートボタンは表示されません。
ボタンラベルは、コマースクリエイター>テーマ>ボタンにある「入荷お知らせメール申込(バリエーション)-商品共通」ボタンで変更できます。
押下すると、「入荷お知らせメール申し込みモーダル」に遷移します。 詳しくは、入荷お知らせメール申し込みモーダルをご覧ください。
商品ごとに再入荷お知らせボタンを非表示にする場合は、運用>商品管理>商品新規登録・商品基本情報編集-詳細情報-入荷お知らせメール申込にて設定します。

予定在庫機能について

  • 予定在庫機能をご利用で、かつ通常在庫切れの場合は運用>商品管理>商品情報(予定在庫設定)-予定在庫設定-入出荷予定日-表記名が表示されます。
    「商品詳細ページに表示する」のチェックボックスが非選択の場合は表示されません。

予約販売在庫について

在庫数の表示設定
<すべての商品に共通の設定をする場合>
設定>商品・商品グループ>商品ページ設定-予約商品在庫切れ設定-予約在庫表示設定構築>ページ設定>商品ページ設定-予約設定-予約在庫表示設定にて設定します。
<商品個別に設定をする場合>
運用>商品管理>商品情報(予約)-予約在庫数表示設定にて設定します。
予約在庫の有無のみ表示し、予約在庫数は表示しない場合
「表示しない」もしくは「予約在庫数表示」を選択
予約在庫がある場合は「〇」予約在庫切れの場合は「×」を表示します。
「予約在庫数表示」を選択しても、予約在庫数は表示できません。
予約在庫数に関するメッセージを表示する場合
「予約在庫僅少表示」を選択
「予約在庫僅少表示閾値」より多い場合は「〇」を、「予約在庫僅少表示閾値」以下になった場合は「△」を、在庫切れの場合は「×」を表示します。
メッセージ表示の閾値は、運用>商品管理>商品情報(バリエーション在庫設定)の「予約在庫僅少表示閾値」にて設定します。
凡例として欄外にコマースクリエイター>メッセージにある以下の3つのメッセージを表示できます。
  • 「バリエーション予約在庫あり凡例メッセージ(セレクトボックス)」
  • 「バリエーション予約在庫僅少凡例メッセージ(セレクトボックス)」
  • 「バリエーション予約在庫切れ凡例メッセージ(セレクトボックス)」
なお、「〇」「△」「×」は変更できません。
表示内容(変更可) メッセージ
「在庫切れ」「在庫僅少」時の表示メッセージと初期値
通常販売商品
○:在庫がございます。 バリエーション在庫あり凡例メッセージ(セレクトボックス)
△:残りわずかです。 バリエーション在庫僅少凡例メッセージ(セレクトボックス)
×:ただいま在庫がございません。 バリエーション在庫切れ凡例メッセージ(セレクトボックス)
予約販売商品
○:予約在庫がございます。 バリエーション予約在庫あり凡例メッセージ(セレクトボックス)
△:残りわずかです。 バリエーション在庫僅少凡例メッセージ(セレクトボックス)
×:ただいま予約在庫がございません。 バリエーション在庫切れ凡例メッセージ(セレクトボックス)

お気に入りボタンのみ・カートボタンなしパーツ

商品グループでカートボタンを使用しない場合に、カートボタンパーツカート・バリエーションごとにボタンパーツカート・セレクトボックスのみパーツ)の代わりに配置できるパーツです。

お気に入りボタンのみが表示されます。
シンプルな商品一覧にしたい場合にご利用いただけます。

入荷お知らせメール申し込みモーダル

メールアドレスは必須項目となります。

「入荷お知らせメール申し込み」(見出し)
コマースクリエイター>メッセージにある「入荷お知らせ申込モーダル見出し」を表示できます。
「商品が入荷次第、メールにてお知らせいたします。」(メッセージ)
コマースクリエイター>メッセージにある「入荷お知らせ申込メッセージ」を表示できます。
「個人情報保護方針」に関する表示
チェックボックスの表示・非表示やメッセージの設定について、くわしくは、個人情報保護方針への同意についてをご覧ください。
[再入荷お知らせメールを申し込む]ボタン
コマースクリエイター>テーマ>ボタンにある「入荷お知らせメール申込処理-商品共通」ボタンを表示できます。

申し込みが完了すると「入荷お知らせの申し込みを受け付けました。」と表示されます。

<「入荷お知らせメール申込完了メール」の設定>
設定>メール>メール設定一覧>入荷お知らせメール申込完了メール設定運用>入荷お知らせメール>入荷お知らせメール申込完了メール設定を設定すると、お客様(消費者)が「入荷お知らせメール」の申込を完了すると、お客様(消費者)と管理者へメールを自動送信できます。

<「入荷お知らせメール」の停止について>
「再入荷お知らせメール停止」をご覧ください。

「個人情報保護方針への同意」を表示しない場合
「同意チェックボックス」を表示しない場合
「同意チェックボックス」を表示する場合

個人情報保護方針への同意について

「個人情報保護方針への同意」の表示
設定>店舗共通>個人情報の取扱いについて-個人情報保護方針同意設定-個人情報保護方針同意確認欄「表示する」構築>店舗公開情報>個人情報の取扱いについての設定-個人情報取得に関する設定(コマースクリエイター)-表示設定「個人情報保護方針同意確認欄を表示する」にチェックすると表示されます。
「同意チェックボックス」の表示
「個人情報保護方針への同意」を表示する設定にした場合のみ、チェックボックスを表示するか、リンクを表示するかを設定できます。
設定>店舗共通>個人情報の取扱いについて-個人情報保護方針同意設定-同意チェックボックス表示設定にて「同意チェックボックスを表示する」にチェックすると表示されます。
構築>店舗公開情報>個人情報の取扱いについての設定-個人情報取得に関する設定(コマースクリエイター)-同意チェックボックスの有無にて「あり」を選択すると表示されます。

「同意チェックボックス」を表示しない設定にした場合

「個人情報保護方針に同意のうえ、ご登録ください。」(リンクメッセージ)
コマースクリエイター>メッセージにある「個人情報保護方針同意メッセージ」を表示できます。
チェックボックスはありませんが、個人情報保護方針へのリンクを表示できます。

「同意チェックボックス」を表示する設定にした場合

「個人情報保護方針に同意する」(チェックボックスメッセージ)
チェックボックス部分にコマースクリエイター>メッセージにある「個人情報保護方針同意チェックメッセージ」を表示できます。
「同意チェックボックス」の初期値
初期値をチェックされた状態にするには、設定>店舗共通>個人情報の取扱いについて-個人情報保護方針同意設定-同意チェックボックスの初期値「チェックされた状態で表示する」構築>店舗公開情報>個人情報の取扱いについての設定-個人情報取得に関する設定(コマースクリエイター)-同意チェックボックスの初期値「チェックする」に設定します。

個人情報保護方針の内容はコマースクリエイター>フリーパーツ「個人情報の取り扱いについて」にて変更していただけます。(スタートアップテーマの場合)

「同意チェックボックス」を表示し、かつ個人情報保護方針同意チェックをせずに登録ボタンを押下された場合は、コマースクリエイター>メッセージにある「個人情報保護方針同意チェックなしエラーメッセージ」が表示されます。

商品数表示カートボタン(フリーパーツ)

商品グループページ右下に固定表示されます。特殊なclass名 が記載されています。
通常カートと定期カート、どちらも表示できます。
詳しくは、カート内の商品数を表示するをご覧ください。

コーディネート表示(新着順)パーツ

STAFF START(スタッフスタート)連携オプションをご利用の場合に表示されます。

コーディネートを新着順(ランキング)で表示します。

「その他コーディネート」(見出し)
コマースクリエイター>メッセージにある「コーディネート表示(新着順)見出し」にて変更できます。
コーディネート画像のサイズ
コマースクリエイター>テーマ>テーマ設定-STAFF START設定-コーディネート表示(新着順)で変更できます。

「STAFF START管理画面(株式会社バニッシュ・スタンダード社)にて登録・出力しているスタッフ情報で、初期設定では非表示となっている項目は、CSSで表示可能です。

くわしくはスタッフ情報の項目を追加で表示する方法(「商品詳細」画面の説明ページへリンクします)をご覧ください。

コーディネート(人気順)パーツ

STAFF START(スタッフスタート)連携オプションをご利用の場合に表示されます。

コーディネートを人気順(ランキング)で表示します。

「その他コーディネート」(見出し)
コマースクリエイター>メッセージにある「コーディネート表示(人気順)見出し」にて変更できます。
コーディネート画像のサイズ
コマースクリエイター>テーマ>テーマ設定-STAFF START設定-コーディネート表示(人気順)で変更できます。

人気順はSTAFF STARTにて集計した内容となり、集計対象は過去1週間(1日から7日前)のPVです。人気順集計の詳細はバニッシュ・スタンダード社へお問い合わせください。

「STAFF START管理画面(株式会社バニッシュ・スタンダード社)にて登録・出力しているスタッフ情報で、初期設定では非表示となっている項目は、CSSで表示可能です。

くわしくはスタッフ情報の項目を追加で表示する方法(「商品詳細」画面の説明ページへリンクします)をご覧ください。

スタッフ表示(新着順)パーツ

STAFF START(スタッフスタート)連携オプションをご利用の場合に表示されます。

スタッフを投稿したコーディネートの新着順(投稿したコーディネート公開日時の降順)に10件表示します。

  • スタッフ画像のサイズは(1サイズのみであるため)固定です。
  • コーディネート一覧・コーディネート詳細・スタッフ一覧・スタッフ詳細・トップページ・商品グループ・商品検索結果一覧・商品詳細・ショッピングカートに配置できます。

「STAFF START管理画面(株式会社バニッシュ・スタンダード社)にて登録・出力しているスタッフ情報で、初期設定では非表示となっている項目は、CSSで表示可能です。

くわしくはスタッフ情報の項目を追加で表示する方法(「商品詳細」画面の説明ページへリンクします)をご覧ください。

スタッフ表示(人気順)パーツ

STAFF START(スタッフスタート)連携オプションをご利用の場合に表示されます。

スタッフを投稿したコーディネートの人気順(コーディネートPV数の降順)に10件表示します。

  • スタッフ画像のサイズは(1サイズのみであるため)固定です。
  • コーディネート一覧・コーディネート詳細・スタッフ一覧・スタッフ詳細・トップページ・商品グループ・商品検索結果一覧・商品詳細・ショッピングカートに配置できます。

「STAFF START管理画面(株式会社バニッシュ・スタンダード社)にて登録・出力しているスタッフ情報で、初期設定では非表示となっている項目は、CSSで表示可能です。

くわしくはスタッフ情報の項目を追加で表示する方法(「商品詳細」画面の説明ページへリンクします)をご覧ください。

構造化データ(パンくず)

パンくず(BreadcrumbList)を表す構造化データを出力します。JavaScript形式(JSON-LD形式)で画面には表示されません。

項目表示について

各項目は「以前からのECサイト用」「コマースクリエイター用」「共通」の3種類があります。「コマースクリエイター移行中(有効)」選択時は全ての項目と説明が表示されます。

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

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

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

×

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

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

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