[概要]各画面に共通して使用されるシステムパーツ

各レイアウトに共通して使用されるシステムパーツ

画像は「スタートアップテーマ」のものとなります。一部、システムパーツ以外もご紹介しています。


<div class="fs-l-page"></div>

<div class="fs-l-page"></div> というHTMLタグで、<body>タグの内側に必ず配置されているタグです。

全レイアウト共通で、レイアウト変更には表示されません。
<body>タグ内に配置されるすべてのパーツ、つまりページに表示する内容は、すべてこのタグの内側に配置されます。

ただし、システムで使用するJavaScriptや設定>プロモーション>測定タグ一覧【コマースクリエイター移行中(切替前)】測定タグ一覧(コマースクリエイター)で出力される内容は、<div class="fs-l-page"></div>と同じ階層に出力されます。


パンくずリストパーツ

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

パンくずリストパーツ


メインエリア(レイアウトパーツ)

スタートアップテーマ・スケルトンテーマともに、全レイアウトに配置されているレイアウトパーツです。

下部階層にページのコンテンツが配置されるコンテンツエリア(レイアウトパーツ)が配置されています。

<main class="fs-l-main"></main> というHTMLタグが設定されています。(レイアウトによってclassが追加されます。)


エラー表示

各ページで起こるエラーを表示するパーツです。

エラー表示


コンテンツエリア(レイアウトパーツ)

スタートアップテーマの「商品詳細」レイアウトや、「商品グループ」レイアウトなどに配置されているレイアウトパーツです。

<section class="fs-l-pageMain"></section> というHTMLタグが設定されています。


ページ見出し(フリーパーツ)

スタートアップテーマに配置されているフリーパーツで、ページ見出しを表示します。

内容はページ名の置換文字{% page.heading %}が記述されています。

ページ名はコマースクリエイター>ページ設定-ページ見出しにて変更できます。

ページ見出し(フリーパーツ)


マイページトップボタン

注文履歴・クーポン情報などのマイページにある各ページからマイページトップへ戻るボタンです。
ラベルはコマースクリエイター>テーマ>ボタン一覧にある「マイページトップ-マイページ」にて変更できます。

マイページトップボタン


登録画面に戻るボタン

「会員登録」「メールマガジン申し込み」時に「認証コード」によるメールアドレス認証を行う場合に表示されます。
メールアドレス認証機能を利用するには、それぞれ以下にチェックします。

表示場所
遷移先

それぞれ以下に遷移します。

ラベルなどの変更

コマースクリエイター>テーマ>ボタン一覧にある「戻る-会員・メールマガジン」にて変更できます。

ラベルなどの変更


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

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