コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]

レイアウト変更

コマースクリエイター>テーマ>レイアウト一覧>(各画面の)レイアウト変更

パーツの追加・配置の変更を行うことで、ECサイトの各ページの表示内容を変更できます。

表示内容は、パーツで設定します。
レイアウトに、表示したいパーツを配置することで、コンテンツの内容や表示順などを設定し、ページとして出力します。

デバイスにより表示されるテーマを分けている場合は、各テーマごとに[レイアウト]を押下して遷移してください。

目次

未保存レイアウト通知

画面を開いたアカウント以外のアカウントユーザーによる、未保存のデータが残っていたり、同時変更を行っている場合に、画面上部に表示されます。

以下の管理者アカウントが作業中で、まだ保存されていません。

「以下の管理者アカウントが作業中で、まだ保存されていません。」と表示され、該当のアカウントユーザーのアカウント名がスラッシュ区切りにて表示されます。

この状態で[保存する]ボタンを押下しても、他のアカウントユーザーの変更内容は、保存も破棄もされません。
自身の操作内容のみ、保存されます。

ただし、他のアカウントユーザーが変更を保存する際に、自身(画面表示中のユーザー)の操作内容は上書き(破棄)されます。(後から保存するユーザーの変更内容で上書きされます。)
保存前に表示アカウントユーザーと操作内容の確認をしてください。

なお、他のアカウントユーザーが変更内容を保存する際には、事前に「重複保存」時の通知表示が表示されます。

本通知表示は、リアルタイムでは表示されません。
画面表示中のアカウントユーザーが、「画面を開く」「パーツを変更する」「レイアウトの並び順を変更する」など、何かしら作業を行った場合(サーバとの通信が発生した場合)に通知が表示されます。

headタグとbodyタグの設定

すべてのページのレイアウトで、headタグとbodyタグの内容をそれぞれ設定できます。

<head設定>内を変更する

システムで固定の記述に続いて、headタグに任意の内容を出力できます。
記述する内容はフリーパーツを使用して設定します。

  1. フリーパーツを追加します。
  2. フリーパーツの表示内容にheadタグ内に出力するタグを直接入力します。
  3. レイアウトで「<head>内を変更する」ボタンを押下し、上記で保存したフリーパーツをパーツ配置エリアにて配置します。

<body設定>内を変更する

パーツパーツ配置エリアにて配置することで、bodyタグ内に任意の内容を出力できます。

レイアウトタイプによって、あらかじめシステムパーツが配置されています。
システムパーツはECサイトを動かす根幹のパーツです。
そのため、レイアウトから削除したまま保存することができません。(一部選択可能なパーツはあります。)
くわしくは、必須のシステムパーツについてをご覧ください。

システムパーツの間や上下に、任意にパーツを配置できます。

レイアウト名の設定・変更

レイアウト名が表示されます。
レイアウト名の右にある変更するボタンを押下するとレイアウト名変更ダイアログが表示され、レイアウト名を変更できます。

レイアウト名変更ダイアログ

レイアウト名
レイアウトの名称を変更できます。文字数:100字
[OK]ボタン
レイアウト名を入力します。
[キャンセル]ボタン
レイアウト名を変更しません。

レイアウトを有効にする(「デフォルトレイアウト」にする)

「有効にする(「デフォルトレイアウト」にする)」のチェックがあるレイアウト(有効なレイアウト)がECサイトに表示されます。
各ページごとに「有効」なレイアウトが必須となります。

初期状態ではページ(レイアウトタイプ)ごとに有効なレイアウトが設定されています。
※「デフォルトレイアウト」とは、割当名がない有効なレイアウトという意味です。 「割当」については割当名をご覧ください。

「デフォルトレイアウト」の切り替えをする

レイアウトは複製や追加が可能で、「商品詳細」ページ用・「ご利用規約」ページ用など、ページ種類ごとに表示用のレイアウトを複数作成できますが、 ECサイトには、「有効にする」チェックボックスにチェックして保存したレイアウトに従って表示されます。
「有効にする」にチェックしていないレイアウトでは、各ページは表示されません。

なかでも「デフォルトレイアウト」は、ページ種類ごとに作成した表示用のレイアウト内で、必ず一つ設定する必要があります。

「デフォルトレイアウト」の「有効」「無効」の切替の際には、以下の点にご注意ください。

[1]「デフォルトレイアウト」として「無効」であったレイアウトを「有効」とした場合

「デフォルトレイアウト」として有効ではなかったレイアウトを新たに有効にすると、それまで有効だったレイアウトは自動的に無効になり、ECサイトに表示されるレイアウトが切り替わります

レイアウト変更画面の[保存する]を押下すると、以下のような「レイアウト変更確認」モーダルが開きます。
「現在「(レイアウト名)」が「デフォルトレイアウト」です。 「デフォルトレイアウト」が変更されるため、「(レイアウト名)」が無効になります。」と表示されます。

割当名機能を利用できる 「商品グループ」「商品詳細」「フリーページ」に関しては、この限りではありませんので割当名をご覧ください。

[2]「デフォルトレイアウト」として「有効」であったレイアウトを「無効」とした場合

ECサイトに表示するためのレイアウトが存在しなくなるため、以下のように「このレイアウトは「デフォルトレイアウト」のため、無効にできません。 別のレイアウトを「デフォルトレイアウト」に設定してください。」とメッセージが表示され、[保存]できなくなります。

また「デフォルトレイアウト」に、割当名を新たに設定した場合も、「デフォルトレイアウト」ではなくなりますので同じメッセージが表示されます。

このレイアウトは「デフォルトレイアウト」のため、無効にできません。別のレイアウトを「デフォルトレイアウト」に設定してください。

通知表示のタイミングについての注意事項

[3]他のアカウントユーザーが「デフォルトレイアウト」を別のレイアウトに切替えた場合

他のアカウントユーザーが「デフォルトレイアウト」の「有効」「無効」を切替えたり「割当名」を付与操作後、「保存」した場合に以下のように「(アカウント名)が(レイアウト名)を「デフォルトレイアウト」に変更しました。」とメッセージが表示されます。

「デフォルトレイアウト」に変更しました。

通知表示のタイミングについての注意事項

<通知表示のタイミングについての注意事項>

通知表示は、リアルタイムでは表示されません。
画面表示中のアカウントユーザーが、「画面を開く」「パーツを変更する」「レイアウトの並び順を変更する」など、何かしら作業を行った場合(サーバとの通信が発生した場合)に通知が表示されます。

割当名を設定する
-「レイアウト割当」機能で、ブランドやカテゴリごとに、表示デザインや表示内容を変える(商品詳細・商品グループ・フリーページ用レイアウト)

レイアウト割当(わりあて)とは

「商品グループ」「商品詳細」「フリーページ」に関しては、レイアウトを指定し、使い分けることができます。

この機能を「レイアウト割当」といい、例えばブランドごと、季節ごとなど、商品やページを異なるデザインで表示できます。(全デバイス・テーマ合計:1,000件まで)

通常は、ページ(レイアウトタイプ)ごとに「有効」と設定されたレイアウト(「デフォルトレイアウト」)に従い表示されます。

レイアウト割当の使用方法

割当名は複数設定でき、1レイアウトで1000まで登録できます。

「レイアウト」と「商品グループ・商品詳細・フリーページ」を紐づけるために、それぞれに「割当名」を設定します。

  1. レイアウトに割当名を設定します。文字数:100字(カンマとスペースは使用不可)
    割当名には半角と全角を問わず、「カンマ」と「スペース」は使えません。
    割当名欄を選択すると、すでに使用されている割当名が候補として表示されます。
    インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。
  2. 割当名を設定したレイアウトを有効にします。
    [有効にする]にチェックしてください。
    ※割当名を設定すると、「デフォルトレイアウト」ではなくなるため、「有効にする」チェックボックスに「(「デフォルトレイアウト」)」の表示がされません。
  3. 商品詳細・商品グループ・フリーページで、使用したいレイアウトに設定した割当名を指定します。
    指定する画面は以下の通りです。
    表示画面 割当設定画面
    商品詳細 運用>商品管理>商品情報(レイアウト・SEO設定)-レイアウト割当-レイアウト割当名
    運用>商品管理>商品データ一括登録から、CSVファイルでの一括登録も可
    商品グループ 運用>商品管理>商品グループ管理(レイアウト・SEO設定)-レイアウト割当-レイアウト割当名
    運用>商品管理>商品データ一括登録から、CSVファイルでの一括登録も可
    フリーページ フリーページ-レイアウト割当
  4. 例:商品グループでのレイアウト割当て
    例:商品詳細でのレイアウト割当て
  5. 割当名を指定した商品詳細・商品グループ・フリーページで、割当名が合致するレイアウトがECサイトに表示されます。
  6. 「スマートフォン用」「PC/その他用」など、複数のテーマを使用している場合は、テーマで利用中になっているすべてのテーマに、同じ割当名を設定したレイアウトを用意します。
    利用中のテーマに、該当の「割当名」が設定されたレイアウトがない場合、「デフォルトレイアウト」が適用されます。

割当名を入力せずに「有効にする(「デフォルトレイアウト」)」チェックをつけて保存すると、「デフォルトレイアウト」が切り替わります。
割当名のないすべての商品は「デフォルトレイアウト」で表示されます。
意図したレイアウトとなっているかご確認ください。

「割当」の設定を変更した場合、保存時に確認モーダルが表示される場合があります。
詳しくは、レイアウトを保存するをご覧ください。

「レイアウト割当名」(割当て設定)を変更する

[変更]ボタンより割当名は変更できます。

変更操作時には、以下の点にご注意ください。

[1]「割当名」が別のレイアウトにすでに割当てられていた場合

変更後の「割当名」が別のレイアウトにすでに割当てられていた場合、以下のようなメッセージが表示されます。

「レイアウト割当名「(割当名)」は、現在「(レイアウト名)」が有効なレイアウトです。 レイアウト割当が変更されるため、「(レイアウト名)」が無効になります。」と表示されます。

が有効なレイアウトです。レイアウト割当が変更されるため、無効になります。

通知表示のタイミングについての注意事項

レイアウト変更画面の[保存する]を押下すると、以下のような「レイアウト変更確認」モーダルが開きます。

モーダル上の[保存する]を押下すると、該当の「レイアウト割当名」は変更操作中のレイアウトに割当てされ、既存の割当て設定は解除されます

割当てが解除されたレイアウトは「無効」となり、ECサイトに表示されなくなります。
該当のレイアウトが変更されても問題がないか、保存前プレビューなどで確認してください。

[2]他のアカウントユーザーが、操作中のレイアウトの「割当」を別のレイアウトに切替えた場合(未保存)

別のアカウントユーザーが、操作中のレイアウトに割当て中の「割当名」を別のレイアウトに割当てた場合には、以下のようなメッセージが表示されます。

「(アカウント名)がレイアウト割当名「(割当名)」を「(レイアウト名)」に割当しようとしています。 レイアウト割当が変更されるため、「(操作中のレイアウト名)」が無効になります。」と表示されます。

別のアカウントユーザーの操作が未保存の場合に表示されます。

レイアウト割当が変更されるため、無効になります。

通知表示のタイミングについての注意事項

別のアカウントユーザーが保存する前に、レイアウト変更画面の[保存する]を押下すると、以下のような「レイアウト変更確認」モーダルが開きます。

モーダル上の[保存する]を押下すると、他のアカウントの操作側が破棄されますので、保存前に表示アカウントユーザーと操作内容の確認をしてください。

[3]他のアカウントユーザーが、操作中のレイアウトの「割当」を変更した場合(保存後)

別のアカウントユーザーが、操作中のレイアウトの「割当」を別のレイアウトに割当て後、「保存」した場合に以下のメッセージが表示されます。

「(アカウント名)が、(20YY/MM/DD HH:MM:SS)にレイアウト割当名「(割当名)」を「(レイアウト名)」に割当しました。 そのため、現在「(操作中のレイアウト名)」は無効なレイアウトです。このまま作業を続けるか、ご確認ください。」と表示されます。

無効なレイアウトです。このまま作業を続けるか、ご確認ください。

レイアウト変更画面の[保存する]を押下すると、操作中のレイアウトは「無効」となり、ECサイトに表示されなくなります。
保存前に表示アカウントユーザーと操作内容の確認をしてください。

通知表示のタイミングについての注意事項

<通知表示のタイミングについての注意事項>

通知表示は、リアルタイムでは表示されません。
画面表示中のアカウントユーザーが、「画面を開く」「パーツを変更する」「レイアウトの並び順を変更する」など、何かしら作業を行った場合(サーバとの通信が発生した場合)に通知が表示されます。

パーツ一覧について

表示されているパーツ配置エリアに配置可能なパーツが一覧で表示されます。

パーツ検索

レイアウトに配置するパーツを検索できます。検索条件を表示するボタンを押下すると「管理タグ」「種類」で検索できます。

キーワード
パーツを「パーツ名」「パーツ置換文字」で検索できます。文字数:100字
複数指定する場合は、空白で区切ってください。AND検索になります。
管理タグ
パーツを管理タグで検索できます。
管理タグ欄を選択すると、候補が表示されます。
インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。
種類
パーツを種類で検索できます。
フリーパーツ/カルーセル/コラム/メニュー/箇条書き/任意商品表示/パネルパーツ/システムパーツから検索できます。
[検索する]ボタン
指定した条件でパーツを検索できます。

検索結果一覧

検索条件に合致したパーツが表示されます。
パーツのドラッグするボタンや追加するボタンを選択して、パーツ配置エリアにドラッグしてください。

パーツ名
パーツの名称が表示されます。選択すると並び替えできます。
更新日時
パーツの更新日時が表示されます。選択すると並び替えできます。

パーツ配置エリアで表示内容やコンテンツ表示順を設定する

パーツ配置エリアではheadタグの内容、bodyタグの内容をそれぞれ設定できます。

すべての表示内容はパーツとして表示されています。(システム固定の一部を除く)

レイアウトエリアに配置されたパーツがECサイトに表示されます。
配置されたパーツのHTMLタグが、上から順に出力されます。
コンテンツの表示順は、パーツを並び替えることで設定できます。

パーツ配置エリアを確認することで、ページに表示されるすべての内容がパーツとして確認できます。

パーツ配置エリアに配置できるパーツの数に制限はありません。

配置されているパーツについて

パーツアイコンについて

パーツ配置エリア、パーツ検索結果一覧ではパーツは以下のアイコン付きで表示されます。

システムパーツ

パネルパーツ

パターンパーツ(カルーセル・コラム・箇条書き・任意商品表示・メニュー)

フリーパーツ

レイアウトパーツ(パーツ配置エリアのみ)

必須のシステムパーツについて

各レイアウトには、ECサイトの動作・処理に必要なシステムパーツがあらかじめ配置されています。

配置されているシステムパーツはパーツ配置エリアから一時的に削除(パーツを外す)できますが、そのまま保存することはできません
各レイアウトに必須なシステムパーツは、保存時にエラーチェックがされます。

こちらのエラーが表示された場合、必須のシステムパーツが足りないので、パーツ検索を行い、パーツ配置エリアに配置してください。

レイアウトパーツについて

レイアウトパーツはレイアウト内で使用するパーツです。

レイアウトのパーツ配置エリアにレイアウトパーツを配置すると、レイアウトパーツの中にパーツを配置できます。
レイアウトパーツはHTML要素を出力できるため、括り(wrap)タグとして使用できます。

レイアウトパーツは閉じている場合は、レイアウトパーツ内に配置したパーツは表示されません。

閉じているレイアウトパーツ

レイアウトパーツの開くボタンを押下すると、レイアウトパーツ内に配置されたパーツのみが表示されます。
なおレイアウトパーツの中には、さらにレイアウトパーツを配置できます。
レイアウトに階層があるかのように表現されます。

レイアウトパーツ「メインエリア」内

レイアウトパーツの操作するボタンを押下し、選択肢にある「パーツを変更する」を選択すると、レイアウトパーツ設定ダイアログが表示されます。
レイアウトパーツに設定されたHTML要素とid/classを確認できます。

表示条件の設定

レイアウトパーツには表示条件設定ができます。
表示条件を設定すると、レイアウトパーツの中に配置されたパーツは、設定された条件に合致した場合のみ表示されます。
例えば、「会員のみに特定の内容を表示したい」や「特定の商品タグがついた商品のみに特定の告知を表示したい」などに活用いただけます。

詳しくはレイアウトパーツ-表示条件設定をご覧ください。

レイアウトパーツは他のレイアウトへ移動できません。レイアウトを複製すれば、レイアウトパーツも複製されます。

パーツの配置を確認する(パーツの配置と条件を表示)

パーツの配置は、パーツ配置エリアに表示されたパーツを確認するほか、パーツ配置エリアにあるレイアウト確認ボタンボタンを押下して確認できます。

ボタン
ボタン押下後のモーダル

すべての配置パーツ名が表示されます。

パネルパーツについてはパネルパーツに含まれるパーツも出力されます。

フリーパーツに「パーツ置換文字」で記載されているパーツについては表示されません。

非表示パーツについては、末尾に「(非表示)」と表示されます。

ボタン押下後のモーダル上にある、[レイアウト内容をクリップボードにコピー]を押下すると、表示内容をコピーできます。
変更前の各パーツの配置を、テキストベースで保存しておきたい場合などにご活用ください。

パーツの種類が[ ]内に表示されます。

表示 説明
システムパーツグループ システムパーツグループ
システム システムパーツ
レイアウト レイアウトパーツ
フリー フリーパーツ
パネル パネルパーツ
カルーセル カルーセルパーツ
コラム コラムパーツ
メニュー メニューパーツ
箇条書き 箇条書きパーツ
任意商品 任意商品パーツ

パーツを表示する/非表示にする

パーツ操作ボタンから「表示しない」を選択します。
パーツはレイアウトに配置されていますが、ECサイトには表示されません。HTMLタグも出力されません。(コメントアウトではありません)

パーツ操作ボタンから「表示する」を選択します。
パーツがECサイトに表示されます。HTMLも出力されます。(コメントアウトではありません)

パーツ配置エリア上からパーツを変更する

パーツ配置エリア上のパーツは、レイアウト画面から直接パーツ変更画面に遷移し、変更できます。

パーツ配置エリアにあるパーツの操作するボタンから、「パーツを変更する」を選択すると、パーツ変更画面へ遷移します。
※パネルパーツの場合はパネルパーツ変更から、パネルパーツに配置されたパーツの変更画面へ遷移して作業できます。

  1. レイアウト変更画面のパーツ配置エリアにあるパーツの操作するボタンから、「パーツを変更する」を選択して、パーツ変更画面に遷移。
    パーツ配置エリアへ加えた変更は、未保存の状態(作業状態)で一時的に保持されます
    (画面遷移の前に[保存する]ボタンを押下する必要はありません。)
  2. パーツ設定画面にてパーツを変更して保存。
  3. 保存に成功すると、自動的にレイアウト変更画面に戻ります。
    レイアウト変更は一時保存がされた状態なので、「保存されていない変更があります(破棄する)」と表示されます。
  4. レイアウト画面にて、作業を続行し、レイアウトを保存します。

ページやフリーページからレイアウトに遷移してパーツを変更する機能と併せて利用すると、ECサイト確認中に、コンテンツを変更する必要が出た場合に、スムーズに作業することができます。

レイアウトやパーツを多く作成している場合や、レイアウトごとに使用パーツを分けている場合などに、パーツを探す手間を軽減できる他、誤ったパーツを変更してしまうミスなどを防げます。

くわしくは、使い方のポイントをご覧ください。

未保存の作業内容は、管理画面で作業したアカウント・ブラウザでのみ一時保存されます。
他のアカウント・ブラウザには、未保存の作業内容を共有できません。
未保存の作業内容があるレイアウトは、レイアウト一覧で未保存アイコンが表示されます。

作業状態の保存は一時的なものであり、管理画面の操作をやめてしばらく経過すると消去されます。
レイアウトを保存する場合は、保存するボタンを押下してください。

システムパーツの変更について

システムパーツはレイアウトから変更できません。
文言を変更する場合はメッセージから、設定を変更する場合は、以前からの管理画面で変更します。

パーツをレイアウトに追加する

以下のいずれかの方法で追加できます。
追加されたパーツはページ上にコンテンツとして表示されます。

パーツ一覧エリアよりドラッグ&ドロップ

右側のパーツ一覧エリアより、左側のパーツ配置エリアにパーツをドラッグ&ドロップします。
配置位置(表示位置)は変更できます操作方法は。パーツの配置順(ページ内での表示位置)を変更するをご覧ください。

パーツ一覧エリアの配置するボタンを押下

右側のパーツ一覧エリアの配置するボタンを押下すると、左側のパーツ配置エリアの最下部にパーツが追加されます。
表示したい位置に配置エリア内でパーツをドラッグ&ドロップします。

パーツ一覧エリアの配置するボタン
パーツ配置エリア内でドラッグ&ドロップ

パーツをレイアウトから外す

パーツ配置エリアに配置されているパーツの操作するボタンから、「パーツを外す」を選択すると、パーツがレイアウトから消去されます。
パーツ自体は削除されません。
再度、レイアウトエリアに配置するには、パーツ検索してパーツ一覧に表示させた後、レイアウトエリアにドラッグ&ドロップしてください。

パーツの配置順(ページ内での表示位置)を変更する

パーツの配置変更を変更し、ページ内のコンテンツの表示順(表示位置)をできます。
パーツの配置変更方法は以下です。

配置エリア内でドラッグ&ドロップ
パーツ配置エリアに配置されているパーツの表示順変更ボタンを選択し、ドラッグ&ドロップする。

配置エリアから外し、再配置する
パーツ配置エリアに配置されているパーツの操作するボタンから、「パーツをレイアウトから外す」を選択して、一度レイアウトから外す。
(必要ならばパーツ検索し)外したパーツをパーツ一覧に表示し、再びパーツ配置エリアの任意の位置にドラッグ&ドロップする。

パーツをレイアウトから外す
一覧から配置エリアにドラッグ&ドロップ

レイアウトパーツ内に配置する
新たなレイアウトパーツをパーツ配置エリアに配置し、レイアウトパーツを開いて、レイアウトパーツの中(階層)に配置する。
くわしくは、レイアウトパーツをご覧ください。

プレビューを表示する

作業中のレイアウトを適用した場合のプレビューを表示します。
プレビューを表示するボタンを押下すると、新規タブで表示されます。
プレビューは2種類のモードがあります。

デザイン確認モード
管理画面の設定にかかわらず、ECサイトで各オプション機能を利用する設定として表示されます。
オプション機能のデザイン調整にご利用いただけます。また、非公開の商品や商品グループが表示されます。
動作確認モード
管理画面の設定にしたがって、ECサイトが表示されます。非公開の商品や商品グループは表示されません。
プレビュー用URL・QRコード
スマートフォンからテーマをプレビューする場合、表示されたQRコードをQRコード読取機能があるアプリで読み取ってください。
または併記されたURLをメールなどで共有してください。
「プレビュー用URL」横のを押下すると、URLをクリップボードにコピーできます。

未保存のレイアウトでプレビューについて

レイアウトの作業中に、保存せずにプレビューできます。パーツ配置エリアで作業中の状態でプレビューできます。

商品詳細・商品グループのプレビューについて

レイアウトタイプが「商品詳細」または「商品グループ」であるレイアウトでは、レイアウト割当の設定にかかわらず、全ての商品、または商品グループがプレビューしたレイアウトで表示されます。
プレビューボタンを押下すると、トップページが表示されますので、作業中のレイアウトで表示したい商品または商品グループへ画面遷移してください。

運用>商品管理>商品グループ管理(新規登録・編集)または運用>商品管理>商品新規登録・商品基本情報編集からもプレビューでき、その場合は、割当名設定に従って表示されます。

割当名が設定された商品または商品グループは、割当名で設定されたレイアウトでプレビューされます。
割当名がない商品または商品グループは、有効な「デフォルトレイアウト」でプレビューされます。

フリーページのプレビューについて

レイアウトタイプが「フリーページ」であるレイアウトでは、レイアウトの割当にかかわらず、プレビューしたレイアウトで全てのフリーページが表示されます。
プレビューボタンを押下すると、トップページが表示されますので、作業中のレイアウトで表示したいフリーページへ画面遷移してください。
未公開のフリーページも表示できます。

なお、「フリーページ変更」画面からはプレビューできません。

それ以外のページのプレビューについて

プレビューボタンを押下すると、トップページが表示されますので、作業中のレイアウトで表示したいページへ画面遷移してください。

プレビューの詳細については、[commerce creator]メニューからの、各画面のプレビュー方法と機能についてをご覧ください。

レイアウトを保存する

[保存する]ボタンを押下すると、システムに保存されます。
有効なレイアウトであれば、変更された配置でECサイトに反映されます。

「同時編集・重複保存」時の通知表示

変更操作中に、別のアカウントユーザーが何らかの変更を「保存」した場合に以下のような通知が、画面上部に表示されます。

「(アカウント名)が(20YY/MM/DD HH:MM:SS)に、このレイアウト「(レイアウト名)」を保存しました。このまま作業を続けるか、ご確認ください。」と表示されます。

このまま作業を続けるか、ご確認ください。

通知表示のタイミングについての注意事項

レイアウト変更画面の[保存する]ボタンを押下すると、以下のように「保存すると、(20YY/MM/DD HH:MM:SS)に(アカウント名)が保存したレイアウトが変更されます。」と確認モーダルが開きます。

保存したレイアウトが変更されます。

モーダル上の[保存する]ボタンを押下すると、モーダル内に表示のアカウントユーザーが行った作業は破棄されますので、保存前に表示アカウントユーザーと操作内容の確認をしてください。

なお、最終更新者の「アカウント名」のみ表示されます。
複数ユーザーが更新を行っていた場合でも、最終更新者のみとなります。

「レイアウト割当」変更を行った際に、同時に他のアカウントユーザーが何らかの変更を行っていた場合

自身が「レイアウト割当」の変更を行った際に、同時に他のアカウントユーザーが、「レイアウト割当」以外の何らかの変更を行った場合、以下のような通知が画面上部に表示されます。

「レイアウト割当名「(割当名)」は、現在「(レイアウト名)」が有効なレイアウトです。 レイアウト割当が変更されるため、「(レイアウト名)」が無効になります。」と「(アカウント名)が(20YY/MM/DD HH:MM:SS)に、このレイアウト「(操作中のレイアウト名)」を保存しました。このまま作業を続けるか、ご確認ください。」の二種類の通知が表示されます。

通知表示のタイミングについての注意事項

レイアウト変更画面の[保存する]を押下すると、以下のような「レイアウト変更確認」モーダルが開きます。

「保存すると、(20YY/MM/DD HH:MM:SS)に(アカウント名)が保存したレイアウトが変更されます。 レイアウト割当が変更されるため、以下のレイアウトが無効になります。よろしいですか? ・(レイアウト名)」と表示されます。

モーダル上の[保存する]を押下すると、他のアカウントの操作側が破棄されますので、保存前に表示アカウントユーザーと操作内容の確認をしてください。

「デフォルトレイアウト」変更を行った際に、同時に他のアカウントユーザーが何らかの変更を行っていた場合

自身が「デフォルトレイアウト」の変更を行った際に、同時に他のアカウントユーザーが、何らかの変更を行った場合、レイアウト変更画面の[保存する]を押下すると、以下のような「レイアウト変更確認」モーダルが開きます。

「保存すると、(20YY/MM/DD HH:MM:SS)に(アカウント名)が保存したレイアウトが変更されます。 現在「(レイアウト名)」が「デフォルトレイアウト」です。 「デフォルトレイアウト」が変更されるため、「(レイアウト名)」が無効になります。」と表示されます。

モーダル上の[保存する]を押下すると、他のアカウントの操作側が破棄されますので、保存前に表示アカウントユーザーと操作内容の確認をしてください。

<通知表示のタイミングについての注意事項>

通知表示は、リアルタイムでは表示されません。
画面表示中のアカウントユーザーが、「画面を開く」「パーツを変更する」「レイアウトの並び順を変更する」など、何かしら作業を行った場合(サーバとの通信が発生した場合)に通知が表示されます。

削除する

[レイアウトを削除する]ボタンを押下すると、レイアウトを削除できます。削除されたレイアウトは復元できません。

利用中のレイアウトは削除できません。

戻る

[戻る]ボタンを押下すると、前画面に戻ります。未保存の作業内容は保存されています。

保存されていない変更がある場合の表示

未保存の作業内容がある場合に「保存されていない変更があります(破棄する)」が表示されます。
「破棄する」を押下すると、未保存の作業内容を破棄します。
破棄すると、パーツ配置が最後にシステムに保存した状態になります。

ページやフリーページからレイアウトに遷移してパーツを変更する

すべてのページフリーページには、各テーマごとに有効なレイアウトが指定されます。
ページ設定またはフリーページ追加・変更のレイアウトという項目に「有効なレイアウト」が表示されています。

コマースクリエイター>ページ>ページ設定(例:商品詳細)

有効なレイアウトは各レイアウト変更画面へのリンクになっています。

各テーマごとのレイアウト変更画面からページ・フリーページのプレビューを確認できます。

使い方のポイント

パーツ配置エリア上からパーツを変更する機能と併せて利用すると、ECサイト確認中に、コンテンツを変更する必要が出た場合に、以下のようにスムーズに作業することができます。

  1. 変更したいページ設定フリーページ変更を開く
  2. 「有効なレイアウト」にて使用されているレイアウトを確認
  3. 「有効なレイアウト」上のリンクを押下しレイアウト変更画面へ遷移
  4. レイアウト変更画面から使用されているパーツを確認
  5. レイアウト変更画面から[パーツを変更する]メニューを押下し、パーツ変更画面を開く
  6. パーツ変更画面で作業し、保存する
  7. (自動遷移した)レイアウト変更を保存する

レイアウトやパーツを多く作成している場合や、レイアウトごとに使用パーツを分けている場合などに、パーツを探す手間を軽減できる他、誤ったパーツを変更してしまうミスなどを防げます。