1. オンラインマニュアル
  2. 管理画面メニュー別ガイド
  3. [commerce creator]メニュー
  4. テーマ
  5. レイアウト一覧
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
管理画面メニュー別ガイド
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
管理画面メニュー別ガイド
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
管理画面メニュー別ガイド
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
管理画面メニュー別ガイド
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル

レイアウト一覧

コマースクリエイター>テーマ>レイアウト一覧

ECサイトの各ページの表示内容を設定します。

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

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

目次

レイアウト一覧

レイアウト一覧では、各ページ用のレイアウトを検索し一覧表示できます。

一覧からは、レイアウトを変更・複製・プレビュー、また新しいレイアウトを追加できます。
なお一覧にて、利用中のイアウトや未保存の作業内容があるレイアウトを確認できます。

管理画面メニューよりテーマを表示します。いずれかのテーマから「レイアウト」を押下してください。
レイアウト一覧ではレイアウトを検索し、一覧表示できます。

検索条件

レイアウト名
レイアウト名で検索できます。レイアウト名は部分一致で検索できます。
複数指定する場合は、空白で区切ってください。AND検索になります。
種類
ページの種類で検索できます。複数指定した場合は、OR検索になります。
状況
レイアウトを「全て」「利用中」「利用なし」で検索できます。
「未保存の作業内容があるレイアウトのみを表示する」にチェックすると、変更して保存していない作業内容があるレイアウトのみ検索できます。
未保存の作業内容がある場合、他の管理画面アカウント(またはブラウザ)で作業後、保存する際に警告メッセージが表示されます。
同時に別のアカウントでそれぞれ作業すると、意図した状態で保存されない場合があります。
レイアウトを作業する場合はご注意ください。
詳しくは、「未保存の作業内容があるレイアウト」の表示をご覧ください。
検索するボタン
指定した条件でレイアウトを検索できます。

一覧表示項目

利用状況
ECサイトに表示されているレイアウトは「利用中」と表示されます。選択すると並び替えできます。
未保存
未保存の作業内容があるレイアウトには、未保存アイコンが表示されます。
レイアウト名
レイアウト名が表示されます。選択すると並び替えできます。
種類
ページの種類が表示されます。選択すると並び替えできます。
更新日時
レイアウトの更新日時が表示されます。選択すると並び替えできます。

変更する

レイアウトを変更します。変更するボタンを押下すると、レイアウト変更へ遷移します。

「未保存の作業内容があるレイアウト」の表示

以下の場合、レイアウト名の前にが表示されます。

  • 前回の自分の変更作業が保存されていない場合
  • 他のアカウントユーザーの過去の変更作業が保存されていない場合
  • 他のアカウントユーザーが、現在変更中である場合

をマウスオーバーすると、保存されていない変更を行ったアカウントユーザー名が表示されます。

<変更者が自分であった場合>

そのままレイアウト変更画面に入り、変更内容を確認してください。

[保存する]を押下すると、前回の変更内容はそのまま保存されます。

[破棄する]を押下すると、変更作業は保存されません。

なお、が表示されたままですと、他のアカウントユーザーが変更を行えません。
必ずレイアウト変更画面にて、[保存する]あるいは[破棄する]を押下し、作業を完了させてください。

<変更者が他のアカウントユーザーであった場合>

該当のアカウントユーザーに変更作業状況を確認してください。

変更中である場合は、変更完了後までレイアウト変更画面には入らずにお待ちください。

保存、あるいは破棄を忘れた状態でレイアウト変更画面を閉じていた場合は、該当のアカウントユーザーに[保存する]もしくは、[破棄する]を押下してもらい、が消える状態にしてください。

未保存の内容は、変更作業した該当のアカウントユーザーにしか表示されません。

が表示されたまま変更作業を行い、[保存する]を押下してしまうと、変更作業を未保存にしていたアカウントユーザーが[保存する]を押下したタイミングで、変更はすべて上書きされてしまいます(他のアカウントユーザーの変更はすべて破棄される)。
が表示されたままでの変更作業は避けてください。

複製する

レイアウトを複製します。複製するボタンを押下すると、レイアウト複製ダイアログが表示されます。

プレビュー

プレビューボタンを押下すると、プレビューモードでECサイトを表示できます。
任意のレイアウトを利用してプレビューを表示できます。
利用されていないレイアウトでもプレビューできます。
作業中で未保存のレイアウトは、作業中の状態でプレビューされます。

詳しくは管理画面の使い方-プレビューをご覧ください。

レイアウトを複製する

レイアウトを複製するボタンを押下すると、複製元と同じパーツが配置されたレイアウトを追加できます。

レイアウトパーツを含む、すべてのパーツ配置が同じレイアウトを追加できます。
配置されているパーツは複製されません。複製元と同じパーツを共有しています。

複製したレイアウト上に配置されているパーツを変更する際は、以下の点にご注意ください。
ECサイトに表示中のパーツが複製先に配置されている場合、複製したレイアウト上にてパーツに加えた変更が、ECサイトに反映(表示)されます

※複製したレイアウト上でのパーツの配置位置の変更(表示順の変更)は、他のレイアウトには影響しません

レイアウト複製ダイアログ

レイアウト名
レイアウトの名称を設定できます。
レイアウトを複製する
「レイアウトを複製する」ボタンを押下すると、レイアウトが複製・追加されます。複製したレイアウトの「bodyタグ内変更」画面へ遷移します。

レイアウトを追加する

[レイアウトを追加する]ボタンを押下する

[レイアウトを追加する]ボタンを押下すると、レイアウトタイプ選択が表示され、新しいレイアウトを追加できます。

新しいレイアウトでは、あらかじめシステム的に出力されるシステムパーツのみが配置されています。
スタートアップテーマをご利用の場合は、スタートアップテーマの初期設定パーツも配置されます。

レイアウトタイプ選択

追加するレイアウトのタイプを選択してください。
選択するレイアウトタイプによって、必要なシステムパーツがあらかじめ配置されます。

  1. トップページ/商品/カート・注文/会員/マイページ/メールマガジン/レビュー/告知ページ/フリーページから選択してください。
  2. 表示された選択肢からいずれか一つ選んでください。選択するとレイアウト追加ダイアログに遷移します。

レイアウト追加ダイアログ

レイアウト名
レイアウトの名称を設定できます。
レイアウトを追加する
「レイアウトを追加する」ボタンを押下するとレイアウトが追加されます。追加したレイアウトの「bodyタグ内変更」画面へ遷移します。

レイアウトの「複製」と「追加」の違い

レイアウトは複製の他に新規で追加できます。
複製すると「パーツの配置情報」などの複製元レイアウトがもつ情報をコピーしたレイアウトを追加できます。
レイアウトを追加すると、テーマの初期状態のレイアウトが新しく追加されます。