キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

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

×

マニュアル閲覧上の注意

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

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

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

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

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

パンくずリストパーツ

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

エラー表示

エラーがあった場合に表示され、「×」を押下すると消去できます。

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

商品グループ表示

下部階層となる子グループへのリンクが表示されます。表示される商品グループは、運用メニュー>商品管理>商品グループ管理(子グループ一覧/順序設定)にてご確認いただけます。
公開中の子グループの運用メニュー>商品管理>商品グループ管理(新規登録・編集)-グループ基本情報-グループ名および「グループイメージ画像」が表示されます。

1行あたりの商品グループ表示数は、画面幅に応じて変更(レスポンシブ対応)していますが、CSSデザインにて変更できます。詳しくはスタートアップテーマ 商品グループの子グループ表示数(横)を変更をご覧ください。

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

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

検索結果0件の場合

「商品グループエリア」内に、商品一覧0件メッセージが表示されます。初期状態では「現在登録されている商品はありません。」と表示されています。
「商品グループエリア」内に配置したパーツは表示されません。予めご了承ください。

商品一覧0件メッセージ
コマースクリエイター>メッセージ-商品一覧0件メッセージにて設定できます。

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

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

検索結果0件の場合

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

バンドル商品0件メッセージ
コマースクリエイター>メッセージ-バンドル商品0件メッセージにて設定できます。

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

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

検索結果0件の場合

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

クーポン対象商品0件メッセージ
コマースクリエイター>メッセージ-クーポン対象商品0件メッセージにて設定できます。

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

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

表示される「並び替えリンク」は構築メニュー>ページ設定>商品ページ設定-並び替えリンク表示設定-並び替えリンク設定にて設定できます。「並び替えリンク」のリンクテキスト・表示順も変更できます。
「並び替えリンクを表示する」のチェックを設定しない場合、並び替えリンクは表示されません。

商品一覧に表示される件数は、構築メニュー>ページ設定>商品ページ設定-商品表示件数設定 (コマースクリエイター)-商品一覧に表示する商品数にて設定できます。設定された件数以上の商品がある場合、ページャー(前・後など各ページへのリンク)が表示されます。

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

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

商品一覧の1行あたりの表示商品数は、画面幅に応じて変更(レスポンシブ対応)していますが、CSSデザインにて変更できます。詳しくはスタートアップテーマ 商品一覧の商品表示数(横)を変更するをご覧ください。

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

バンドル販売機能をご利用の場合に、同じバンドル割引の対象となる商品を一覧表示します。商品情報を表示するシステムパーツや商品情報置換文字を記載したフリーパーツは、このパーツの下部階層に配置します。
配置されたパーツは、一覧表示される商品の数だけ繰り返し表示されます。

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

クーポンの対象商品に指定された商品を一覧表示します。マイページの「クーポン情報」ページに表示された「このクーポンの対象商品」にある「クーポン対象商品一覧へ」リンクから遷移します。商品情報を表示するシステムパーツや商品情報置換文字を記載したフリーパーツは、このパーツの下部階層に配置します。
配置されたパーツは、一覧表示される商品の数だけ繰り返し表示されます。

商品画像・拡大パーツ

拡大するボタンを押下すると、画像を拡大表示します。
拡大画像は画面幅に合わせて表示します。カラーバリエーション名を画面上部に表示します。拡大画面でボタン押下にて前後送り、またはフリックできます。
画面下部にドットナビゲーションが表示されます。

コマースクリエイター>テーマ>ボタンにある「他の画像を見る-商品一覧」ボタンを表示できます。

商品名パーツ

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

商品マークパーツ

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

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

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

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

バリエーションが登録されていない商品が予定在庫機能をご利用の場合に、運用メニュー>商品管理>商品情報(予定在庫設定)-予定在庫設定-入出荷予定日-表記名が表示されます。「商品詳細ページに表示する」のチェックボックスが非選択の場合は表示されません。
バリエーションが登録されている商品は、カートボタンパーツに表示されます。

予約コメントパーツ

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

商品価格パーツ

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

販売期間表示

運用メニュー>商品管理>商品新規登録・商品基本情報編集-詳細情報-販売期間を設定し、「商品詳細ページに表示する」のチェックボックスを設定すると表示されます。
販売期間前は、販売期間とともにコマースクリエイター>メッセージにある「商品一覧販売開始前メッセージ」を表示できます。
販売期間終了後はコマースクリエイター>メッセージにある「商品一覧販売終了後メッセージ」を表示できます。(販売期間は表示されません。)

予約販売商品に運用メニュー>商品管理>商品情報(予約)-予約受付期間を設定し、「商品詳細ページに表示する」のチェックボックスを設定すると表示されます。
予約受付期間前は、予約受付期間とともにコマースクリエイター>メッセージにある「商品一覧予約受付期間開始前メッセージ」を表示できます。
予約受付期間終了後はコマースクリエイター>メッセージにある「商品一覧予約受付期間終了後メッセージ」を表示できます。(予約受付期間は表示されません。)

在庫なし表示テキスト

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

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

商品一言説明表示

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

カートボタンパーツ

  • 「カート・バリエーションごとにボタンパーツ」「カート・セレクトボックスのみパーツ」の2種類ご用意しています。いずれか1つを必ず配置してください
  • カートボタンパーツは、それぞれがバリエーション登録のない商品・バリエーション登録のある商品いずれにも対応します。
  • 通常販売・予約商品の両方に対応しています。バリエーションがある商品については、予定在庫表示に対応してます。
  • バリエーション登録がある商品は「カートに入れるボタン」を押下すると、バリエーション選択モーダルが表示され、バリエーションを選んで「カートに入れる」または「お気に入り登録(解除)」できます。
  • バリエーション登録がない商品は、「カートに入れる」ボタンを押下すると、カートに商品を入れられます。
  • 商品に「項目選択肢」「オプション価格」がある場合は、「カートに入れる」ボタンではなく「詳細を見る」ボタンが表示され、押下すると商品詳細に遷移します。商品詳細にて「項目選択肢」「オプション価格」を選択した上でカートに入れられます。
  • コマースクリエイター>テーマ>ボタンにある「カートに入れる-商品一覧」ボタンを表示できます。
  • コマースクリエイター>テーマ>ボタンにある「入荷お知らせメール申込-商品一覧」ボタンを表示できます。
  • コマースクリエイター>テーマ>ボタンにある「商品詳細を見る-商品一覧」ボタンを表示できます。
  • コマースクリエイター>テーマ>ボタンにある「お気に入り登録(アイコン)-商品共通」「お気に入り解除(アイコン)-商品共通」ボタンを表示できます。

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

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

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

在庫表示について

予約販売在庫について

予定在庫機能について

表示内容 メッセージ
通常販売商品
残りわずかバリエーション在庫僅少メッセージ
在庫切れバリエーション在庫切れメッセージ
予約販売商品
残りわずかバリエーション予約在庫僅少メッセージ
予約在庫切れバリエーション予約在庫切れメッセージ

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

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

  • セレクトボックスでバリエーションをいずれか1つ選択して、お気に入りボタン、カートボタンを押下できます。
  • 構築メニュー>ページ設定>商品ページ設定-バリエーション表示設定-すべてをセレクトボックス表示-バリエーション縦横配置で、主軸(先に記載)にするバリエーションを設定できます。
  • 構築メニュー>ページ設定>商品ページ設定-バリエーション表示設定-すべてをセレクトボックス表示-セレクトボックスの初期値で、『初期値に「選択してください」を表示』に設定できます。
  • コマースクリエイター>テーマ>ボタンにある「カートに入れる-商品共通」ボタンを表示できます。
  • コマースクリエイター>テーマ>ボタンにある「お気に入り登録(アイコン)-商品共通」「お気に入り解除(アイコン)-商品共通」ボタンを表示できます。

在庫表示について

予約販売在庫について

  • 構築メニュー>ページ設定>商品ページ設定-予約設定-予約在庫表示設定、または運用メニュー>商品管理>商品情報(予約)-予約在庫数表示設定にて、以下の表示ができます。
    「表示しない」を選択した場合、何も表示されません。
    「予約在庫数表示 」または「予約在庫僅少表示」を選択した場合、運用メニュー>商品管理>商品情報(予約)の「予約在庫僅少表示閾値」より多い場合は「〇」を、「予約在庫僅少表示閾値」以下になった場合は「△」を表示します。予約在庫切れの場合は「×」を表示します。(表示は変更できません。
    凡例として欄外にコマースクリエイター>メッセージにある「バリエーション予約在庫あり凡例メッセージ(セレクトボックス)」「バリエーション予約在庫僅少凡例メッセージ(セレクトボックス)」「バリエーション予約在庫切れ凡例メッセージ(セレクトボックス)」を表示できます。(予約在庫数は表示できません。

予定在庫機能について

表示内容(変更可) メッセージ
通常販売商品
○:在庫がございます。バリエーション在庫あり凡例メッセージ(セレクトボックス)
△:残りわずかです。バリエーション在庫僅少凡例メッセージ(セレクトボックス)
×:ただいま在庫がございません。バリエーション在庫切れ凡例メッセージ(セレクトボックス)
予約販売商品
○:予約在庫がございます。バリエーション予約在庫あり凡例メッセージ(セレクトボックス)
△:残りわずかです。バリエーション在庫僅少凡例メッセージ(セレクトボックス)
×:ただいま予約在庫がございません。バリエーション在庫切れ凡例メッセージ(セレクトボックス)

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

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

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

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

入荷お知らせメール申し込みモーダルには、コマースクリエイター>メッセージにある「入荷お知らせ申込モーダル見出し」「入荷お知らせ申込メッセージ」を表示できます。
コマースクリエイター>テーマ>ボタンにある「入荷お知らせメール申込処理-商品共通」ボタンを表示できます。

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

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

  • 個人情報保護方針への同意欄の表示については、管理TOP>店舗公開情報>個人情報の取扱いについての設定-個人情報取得に関する設定(コマースクリエイター)-表示設定の「個人情報保護方針同意確認欄を表示する」チェックを設定すると表示されます。
  • 同意チェックボックスの表示については、管理TOP>店舗公開情報>個人情報の取扱いについての設定-個人情報取得に関する設定(コマースクリエイター)-同意チェックボックスの有無にて設定できます。
  • 「同意チェックボックスの初期値」をチェックするに設定すると、チェックされた状態で表示されます。
  • 同意チェックボックスを表示する場合は、コマースクリエイター>メッセージにある「個人情報保護方針同意チェックメッセージ」が表示されます。チェックせずボタンを押下した場合、「個人情報保護方針同意チェックなしエラーメッセージ」が表示されます。
  • 同意チェックボックスを表示しない場合は、コマースクリエイター>メッセージにある「個人情報保護方針同意メッセージ」を表示できます。

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

お問い合わせを送信すると「入荷お知らせの申し込みを受け付けました。」と表示されます。

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

商品グループページ右下に固定表示されます。カート内の商品数を表示する特殊なclass名「fs-client-cart-count」が記載されています。

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

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

項目表示について

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

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

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

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

×

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

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

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