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

「商品詳細」レイアウトのシステムパーツ

×

マニュアル閲覧上の注意

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

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

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

「商品詳細」レイアウトのシステムパーツ

商品詳細レイアウトに配置されるシステムパーツは以下となります。画像は「スタートアップテーマ」のものとなります。
一部、フリーパーツもご紹介しています。
商品詳細のレイアウトにあるバリエーション表示パーツについては商品バリエーション表示の変更をご覧ください。

パンくずリストパーツ

商品のメイングループを表示できます。

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

サブグループパンくずリストパーツ

商品にサブグループが登録されている場合に、パンくずリストを表示できます。

エラー表示

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

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

商品情報を表示するシステムパーツを配置する特殊なシステムパーツ(システムパーツグループ)です。商品情報を表示するシステムパーツや商品情報置換文字を記載したフリーパーツは、商品詳細エリア(システムパーツグループ)の下部階層に配置します。

商品詳細エリアは、formタグにて構成されています。HTMLタグの動作上、商品詳細エリア内にformタグを含むパーツを配置しても正しく動作しません。運用メニュー>商品管理>商品検索結果一覧から出力できる『商品の「カートへ」ボタン』も配置できません。
formタグを含むパーツを配置する場合は、「商品詳細エリア」の外に配置してください。

商品画像パーツ

サムネイル画像を一覧表示。サムネイル画像をクリック(タップ)してメイン画像を切替できます。
メイン画像または拡大画像表示ボタンを押下すると、画像を拡大表示します。
拡大画像は画面幅に合わせて表示します。カラーバリエーション名を画面上部に表示します。拡大画面でボタン押下にて前後送り、またはフリックできます。
画面下部にドットナビゲーションが表示されます。
拡大表示で表示中の画像は閉じた後も保持されるため、拡大画面を再度表示すると「続き」から閲覧できます。

コマースクリエイター>テーマ>ボタンにある「拡大画像表示(アイコン)-商品詳細」ボタンを表示できます。

商品画像パーツに表示される画像は、コマースクリエイター>テーマ設定-商品画像サイズ設定が以下のように反映されます。

表示画像 テーマ設定-商品画像サイズ設定
通常表示の大きい画像商品画像(メイン)
通常表示の小さい画像商品画像(サブ)
拡大表示の大きい画像拡大画像

商品画像パーツ・フリック

メイン画像・サムネイル画像ともに前後送りまたはフリックで切り替えできます。サムネイル画像をクリック(タップ)してメイン画像を切替できます。
メイン画像または拡大画像表示ボタンを押下すると、画像を拡大表示します。
拡大表示時は画像の中央部分に寄って、画面幅を超えて拡大表示します。拡大画面でボタン押下にて前後送り、またはフリックできます。拡大画像はクリック(タップまたはピンチ操作)にて表示倍率が段階的に変わります。
左上に表示画像/商品画像枚数が表示されます。
拡大表示時は、メイン画像に表示されている画像が常に拡大表示されます。拡大表示時に商品画像を前後送りまたはフリックすると、メイン画像も連動します。

コマースクリエイター>テーマ>ボタンにある「拡大画像表示(アイコン)-商品詳細」ボタンを表示できます。

表示画像 テーマ設定-商品画像サイズ設定
通常表示の大きい画像商品画像(メイン)
通常表示の小さい画像商品画像(サブ)
拡大表示の大きい画像拡大画像

商品画像繰り返しパーツ

登録されている商品画像の数だけ、繰り返し表示します。シンプルなデザインになっています。

商品名パーツ

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

商品名のみの場合
キャッチコピーがある場合

商品番号パーツ

運用メニュー>商品管理>商品新規登録・商品基本情報編集-商品基本情報-商品番号が表示されます。

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

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

予約コメントパーツ

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

商品マークパーツ

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

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

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

商品価格パーツ

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

ポイントパーツ

商品の購入ポイントが表示されます。
運用メニュー>ポイント管理>ポイント基本設定-購入ポイント付与設定、または、運用メニュー>商品管理>商品新規登録・商品基本情報編集-ポイント付与率にて設定した商品固有の付与率にて計算されたポイント数が表示されます。

ログイン誘導リンク

ログインしていない(ゲスト)場合に、会員登録を誘導するために表示するリンクで、ログイン(会員登録)画面へ遷移します。会員価格を表示せず、「ログイン誘導リンク」を表示することで、会員登録を誘導できます。

または会員価格を表示したうえで、会員登録を誘導することもできます。
構築メニュー>ページ設定>商品ページ設定-非ログイン時にも会員価格を表示するのチェックを設定すると、ログインしていない(ゲスト)場合に、会員価格を表示できます。
その場合は、メッセージにある「商品詳細ログイン誘導リンク」にて「ログイン誘導リンク」の表示内容を適宜変更してください。

商品個別送料パーツ

運用メニュー>商品管理>商品新規登録・商品基本情報編集-詳細情報-送料設定にて「商品個別送料」を設定すると表示されます。
「送料を表示する」のチェックを外すと、「送料個別」とのみ表示されます。
また運用メニュー>商品管理>商品新規登録・商品基本情報編集-詳細情報-送料設定にて「送料込み」を選択すると、「送料込」と表示されます。

項目選択肢パーツ

運用メニュー>商品管理>商品情報(項目選択肢)を設定すると表示されます。
項目選択肢の表示タイプが「セレクトボックス」の場合に、初期値に「選択してください」と表示するには、構築メニュー>ページ設定>商品ページ設定-商品設定-項目選択肢の初期値設定で『選択肢の初期値に「選択してください」を表示する』のチェックを設定してください。

オプション価格パーツ

運用メニュー>商品管理>商品情報(オプション価格設定)を設定すると表示されます。
オプション価格の表示タイプが「セレクトボックス」の場合に、初期値に「選択してください」と表示するには、構築メニュー>ページ設定>商品ページ設定-商品設定-オプション価格の初期値設定で『選択肢の初期値に「選択してください」のチェックを設定してください。

消費税(税込・税抜)表示は、コマースクリエイター>テーマ設定-価格表示パターン-商品詳細にて商品詳細の設定と同じく変更できます。

カートボタンパーツ

  • 以下4種類ご用意しています。いずれか1つを必ず配置してください
  • カートボタンパーツは、それぞれがバリエーション登録のない商品・バリエーション登録のある商品いずれにも対応します。
  • 通常販売・予約商品の両方に対応しています。バリエーションがある商品については、予定在庫表示に対応してます。

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

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

在庫表示について

予約販売在庫について

予定在庫機能について

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

カート・バリエーションカート・バリエーション表組パーツ

在庫表示について

予約販売在庫について

予定在庫機能について

表示内容 メッセージ
通常販売商品
バリエーション在庫僅少キャプション(セレクト&ラジオ・表組)
△:残りわずかです。バリエーション在庫僅少凡例メッセージ(セレクト&ラジオ・表組)
×バリエーション在庫切れキャプション(セレクト&ラジオ・表組)
×:ただいま在庫がございません。バリエーション在庫切れ凡例メッセージ(セレクト&ラジオ・表組)
予約販売商品
バリエーション予約在庫僅少キャプション(セレクト&ラジオ・表組)
△:残りわずかです。バリエーション予約在庫僅少凡例メッセージ(セレクト&ラジオ・表組)
×バリエーション予約在庫切れキャプション(セレクト&ラジオ・表組)
×:ただいま予約在庫がございません。バリエーション予約在庫切れ凡例メッセージ(セレクト&ラジオ・表組)

カート・セレクトボックス&ラジオパーツ

在庫表示について

予約販売在庫について

予定在庫機能について

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

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

在庫表示について

予約販売在庫について

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

予定在庫機能について

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

カートボタン(バリエーション商品でない場合)

全パーツで共通です。上記いずれのパーツを配置しても、バリエーションが登録されていない商品の場合は、同じ表示となります。

在庫表示について

予約販売在庫について

予定在庫機能について

表示内容(変更可) メッセージ
通常販売商品
残りわずかです。商品詳細在庫僅少メッセージ
申し訳ございません。ただいま在庫がございません。商品詳細在庫切れメッセージ
予約販売商品
残りわずかです。商品詳細予約在庫僅少メッセージ
申し訳ございません。ただいま予約在庫がございません。商品詳細予約在庫切れメッセージ

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

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

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

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

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

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

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

販売期間表示

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

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

在庫なし表示テキスト

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

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

返品特約表示

コマースクリエイター>メッセージにある「返品特約メッセージ」を表示できます。

お問い合わせパーツ

商品についてのお問い合わせモーダルを開きます。

コマースクリエイター>テーマ>ボタンにある「商品についてのお問い合わせ-商品詳細」ボタンを表示できます。

商品についてのお問い合わせモーダルには、コマースクリエイター>メッセージにある「商品お問い合わせモーダル見出し」「商品詳細お問い合わせメッセージ」を表示できます。
コマースクリエイター>テーマ>ボタンにある「お問い合わせ内容を送る」ボタンを表示できます。

商品についてのお問い合わせ内容は構築メニュー>メール設定>お問い合せ受付完了メールで受け取れます。(お問い合せ受付完了メール設定を行ってください。)

お問い合わせを送信すると「お問い合わせを承りました。」と表示されます。

商品説明(大)表示

商品コメント設定(コマースクリエイター)-商品コメント(コマースクリエイター)-商品説明(大)が表示されます。

商品説明(大)はPCなどスペースを使用する場合の商品説明を想定していますが、デバイスに関係なく使用いただけます。また商品説明(小)表示パーツなどと併用可能です。

商品説明(小)表示

商品コメント設定(コマースクリエイター)-商品コメント(コマースクリエイター)-商品説明(小)が表示されます。

商品説明(大)はスマートフォンなどスペースがあまりない場合の商品説明を想定していますが、デバイスに関係なく使用いただけます。また商品説明(大)表示パーツなどと併用可能です。

レビューパーツ

レビュー機能をご利用の場合に、レビュー各機能へのリンクや、最新のレビューを表示できます。

レビュー件数
投稿されているレビューの件数が表示されます。
レビュー平均点
投稿されているレビューの平均点が表示されます。「★」はCSSにて変更できます。
最新のレビュー
運用メニュー>レビュー管理>レビュー基本設定-商品詳細ページ-表示するレビュー数に設定した件数のレビューが投稿日時新しい順に表示されます。「0」件を指定すると、「最新のレビュー」は非表示になります。
すべてのレビューを見るリンク
「商品のレビュー」一覧へ遷移します。
コマースクリエイター>テーマ>ボタンの「すべてのレビューを見る-レビュー」ボタンを表示できます。
レビューを書くリンク
「レビューを書く」へ遷移します。
コマースクリエイター>テーマ>ボタンの「レビューを書く-レビュー」ボタンを表示できます。

レビュー表示件数とレビュー投稿件数

商品詳細ページのレビュー表示件数は運用メニュー>レビュー管理>レビュー基本設定-商品詳細ページ-表示するレビュー数にて変更できます。
レビューの投稿があれば、「すべてのレビューを見るリンク」が表示されます。

投稿件数と設定件数 表示
レビュー投稿0件「すべてのレビューを見る」リンクは表示されません。
レビュー表示件数0件かつレビュー投稿1件以上商品詳細にはレビューは表示されません。「すべてのレビューを見る」で商品レビュー一覧に遷移して、全レビューを閲覧できます。
レビュー表示件数1件以上かつレビュー投稿1件以上商品詳細に最新のものから設定した件数分のレビューが表示されます。「すべてのレビューを見る」で商品レビュー一覧に遷移して、(表示しているレビューを含めて)全レビューを閲覧できます。

SNSシェアボタン(フリーパーツ)

SNSシェアボタンはフリーパーツです。パーツ一覧にて検索して適宜内容を変更してください。詳しくはSNSシェアボタン(フリーパーツ)をご覧ください。
初期状態では、スケルトンテーマには配置されていません。

おすすめ商品パーツ

構築メニュー>ページ設定>購入画面設定-おすすめ商品の設定-おすすめ商品として登録する商品番号、または運用メニュー>商品管理>商品新規登録・商品基本情報編集-この商品をカートに入れたときに表示するおすすめ商品におすすめ商品として表示する商品の商品番号を設定し、「商品ページ内にも表示させる」チェックを設定した場合に表示されます。
なお、表示は3パターンから選択できます。

コマースクリエイター>メッセージにある「おすすめ商品見出し」が表示されます。

レコメンド出力タグ1パーツ~レコメンド出力タグ6パーツ

構築メニュー>ページ設定>レコメンド2設定-商品詳細ページレコメンド設定(コマースクリエイター)にある「出力タグ1」から「出力タグ6」に入力されたレコメンドタグを出力します。商品ごとのレコメンドカテゴリを出力できます。

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

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

構造化データ(商品詳細)

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

項目表示について

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

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

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

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

×

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

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

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