レイアウトパーツ
コマースクリエイター＞テーマ＞（各デバイス）レイアウト＞（各レイアウト）レイアウト変更
レイアウト変更画面の［レイアウトパーツを追加する］を押下して設定します。
レイアウトパーツを新規追加・変更できます。
レイアウトパーツについては、レイアウトパーツとはを、またレイアウト変更画面での配置方法についてはレイアウト変更-レイアウトパーツについてをご覧ください。
＜目次＞
レイアウトパーツとは
レイアウト内で設定できます。
レイアウトパーツは、内部にパーツを配置できるパーツです。
レイアウトのパーツ配置エリア内で「階層」のように表示されます。
＜特長1＞
デザイン上、表示内容（コンテンツ）を一括りにしたい場合や、一括配置移動（表示位置を変更）したい場合などに活用すると便利です。
レイアウトパーツはHTML要素を出力できるため、括り（wrap）タグとして使用できます。
【参考】：レイアウト変更-レイアウトパーツについて
＜特長2＞
特定の条件下でのみ特定のコンテンツを表示したい場合などに利用することができます。
レイアウトパーツに表示条件を設定します。
くわしくは、表示条件を設定するをご覧ください。
レイアウトパーツを追加する
レイアウトパーツを追加するボタンを押下すると、レイアウトパーツ設定ダイアログが表示され、レイアウトパーツを追加できます。
パーツ名
レイアウトパーツの名称を設定できます。 文字数：100字
HTML要素
div・section・nav・article・aside・header・footer・dialogタグのいずれか、または「指定なし」から選択してください。
パーツを囲むwrapタグを設定できます。
id/classを指定する場合は、「指定なし」以外のいずれか選択してください。
id
HTML要素のid属性の値を設定できます。 半角英数・記号（-_）
class
HTML要素のclass属性の値を設定できます。 半角英数字・半角スペース・記号("以外)：100字
追加する
［OK］を押下すると、レイアウトパーツを追加します。
レイアウトパーツはパーツ配置エリアの一番下に追加されます。
キャンセルする
［キャンセル］を押下すると、レイアウトパーツを追加しません。
レイアウトパーツの操作
パーツ配置エリアでレイアウトパーツの 操作するボタンを押下すると、レイアウトパーツを操作できます。
表示しない
表示しないボタンを押下すると、レイアウトパーツはレイアウトに配置されていますが、ECサイトには表示されなくなります。
レイアウトパーツに含まれるパーツも同様です。
HTMLタグも出力されません。（コメントアウトではありません。）
表示するボタンを押下すると、レイアウトパーツがECサイトに表示されます。
表示条件を設定する
くわしくは表示条件を設定するをご覧ください。
パーツを変更する
変更するボタンを押下すると、レイアウトパーツ設定ダイアログが表示されます。
HTML要素・id・classを変更できます。
パーツをレイアウトから外す
パーツを外すボタンを押下すると、レイアウトパーツが削除されます。
いったんレイアウトから外したレイアウトパーツは復元できません。
レイアウトパーツを開く（レイアウトパーツ内にパーツを配置する）
レイアウトパーツの 開くボタンを押下すると、レイアウトパーツ内にパーツを配置する画面へ遷移します。
レイアウトパーツ内にパーツを配置する画面へ遷移すると、パーツ配置エリアの上部に「body ＞ 」につづく階層としてパンくずリンクが表示されます。
レイアウトパーツ内にパーツを配置する画面に遷移後、パーツ一覧からパーツをドラッグして、パーツ配置エリアに配置してください。
くわしい操作方法についてはレイアウト変更-パーツをレイアウトに追加するをご覧ください。
レイアウトパーツ内にはパーツの他に、別のレイアウトパーツも配置できます。
なお、いったん配置されたレイアウトまたはレイアウトパーツから、別のレイアウトパーツへ（階層）を移動できません。
レイアウトパーツを閉じる
パーツ配置エリアの上部に「body」からつづくパンくずリンクを選択すれば、レイアウトパーツを閉じられます。
レイアウトパーツを閉じている場合（レイアウトパーツが配置されている階層で）は、レイアウトパーツ内に配置したパーツは表示されません。
表示条件を設定する
レイアウトパーツには表示条件を設定できます。
指定した条件に合致する場合のみ、レイアウトパーツと「レイアウトパーツ内に配置したパーツ」が表示されます。
例えば、会員にのみ表示したいメッセージや特定の商品のみ表示したいキャンペーンコンテンツなどの表示制御に活用できます。
注意事項
システムパーツが含まれるレイアウトパーツには表示条件を設定できません。
「システムパーツが含まれているので、表示条件を設定できません。」というエラーが表示されます。
※表示条件設定でシステムパーツを非表示にすると、商品価格が表示されないといったトラブルが想定されるためです。
設定手順
- パーツ配置エリアでレイアウトパーツの 操作するボタンを押下し、 表示条件を設定するを押下します。
- 表示条件設定ダイアログが表示されます。
各条件を設定し、各条件の左にあるチェックボックスをつけてOKボタンを押下すると表示条件が設定されます。
レイアウトパーツにより設定できる表示条件は異なります。
設定可能な条件のみがダイアログに表示されます。設定可能な条件については、表示条件一覧をご覧ください。
（例）トップページ＞新規会員登録告知レイアウトパーツ
（例）商品詳細＞商品名・価格等の商品情報レイアウトパーツ
- レイアウト変更画面に戻るので、プレビューにて確認してください。
- 保存するボタンを押下すれば表示条件が保存され、ECサイトに反映されます。（有効なレイアウトの場合）
表示条件一覧
いずれかの条件に合致した場合にレイアウトパーツとレイアウトパーツ内に配置されたパーツが表示されます。
表示条件は、条件設定可能なページが設定されています。
＜表中の記号について＞
●：使用可能、○：定期・頒布会商品用ページで使用可能、
▲：商品一覧部分のみ可能、★：お気に入りリスト商品一覧部分のみ可能（表示可能ページからモーダルは除く）
（※1）「商品グループエリア」レイアウト内でのみ条件指定可能
（※2）商品詳細レイアウトの「商品詳細エリア」内でのみ条件指定可能
（※3）「商品一覧」レイアウト内でのみ条件指定可能
（※4）Apple・Google・Amazon・LINEのIDと一度でも連携を行った場合は、お客様（消費者）が各サービス側で連携を解除しても、
futureshop側では連携解除となりません。そのため、「連携済」の表示条件にてコンテンツが表示されます。
（解除情報をfutureshop側では取得できないため。）
| 条件 | 選択肢・指定方法 | 条件補足 | 用途・表示例 | 表示可能ページ | 関連する置換文字 | ||||
|---|---|---|---|---|---|---|---|---|---|
| 商品 | 商品グループ | カート | マイページ | その他・フリーページ | |||||
| ログイン状態 | ログイン済/未ログイン | 今回の来訪でログイン（メールアドレスとパスワードを入力しログインボタンを押下する操作）をしていればログイン済 | （未ログインの場合に、会員登録を誘導する） | ●,○ | ● | ●,○ | ● | ● | |
| 会員ステージ | 会員ステージ名を選択（単数） | ログインしている会員が任意の会員ステージならば | 会員ステージの特典を表示 次のレベルの会員ステージ特典を表示 |
●,○ | ● | ●,○ | ● | ● | |
| Apple連携 | 連携済/未連携（※4） | -- | Apple IDでログインできます | -- | -- | ●,○ | ● | -- | |
| Google連携 | 連携済/未連携（※4） | -- | Googleアカウントでログインできます | -- | -- | ●,○ | ● | -- | |
| Amazon連携 | 連携済/未連携（※4） | -- | Amazonアカウントでログインできます | -- | -- | ●,○ | ● | -- | |
| LINE連携 | 連携済/未連携（※4） | -- | LINE IDと連携すると、LINEでメッセージが受け取れます | -- | -- | ●,○ | ● | -- | |
| 親グループ（1階層目）URLコード | 親グループ（1階層目）URLコードを入力（複数指定不可） 【半角英数・記号（-_）：32字】 | 指定した親グループ（1階層目）配下の2階層目以下の商品グループに表示 ※商品が0件の場合は表示されません。 ※指定した親グループ（1階層目）には表示されません。 |
商品カテゴリごとにコンテンツを表示 | -- | ●（※1） | -- | -- | -- | |
| 親グループURLコード | 親グループURLコードを入力（複数指定不可） 【半角英数・記号（-_）：32字】 | 指定した親グループ配下の商品グループに表示 ※商品が0件の場合は表示されません。 ※指定した親グループには表示されません。 |
商品カテゴリごとにコンテンツを表示 | -- | ●（※1） | -- | -- | -- | |
| 闇市商品グループ | 対象/対象外 | （親の商品グループが）闇市商品グループならば | ブランド名（商品グループ名）などの表示 | ● | ●（※1） | -- | -- | -- | |
| 商品番号 | 商品番号（複数指定不可） 【文字数：32字】 | （パターンパーツまたは複数の）パーツを使用した商品独自コンテンツの表示 | ●,○（※2） | ▲（※3） | -- | ★ | -- | ||
| 商品URL | 商品URLコード（複数指定不可） 【半角英数・記号（-_）：32字】 | （パターンパーツまたは複数の）パーツを使用した商品独自コンテンツの表示 | ●,○（※2） | ▲（※3） | -- | ★ | -- | ||
| 商品グループ(メイン) | 商品グループURLコード（複数指定不可） 【半角英数・記号（-_）：32字】 |
商品カテゴリごとにコンテンツを表示 | ●,○（※2） | ▲（※3） | -- | ★ | -- | ||
| 商品グループ(サブ) | 商品グループURLコード（複数指定不可） 【半角英数・記号（-_）：32字】 |
商品カテゴリごとにコンテンツを表示 | ●,○（※2） | ▲（※3） | -- | ★ | -- | ||
| 商品タグ | 商品タグ選択（複数指定不可） | 商品タグでコンテンツを表示 | ●,○（※2） | ▲（※3） | -- | ★ | -- | ||
| バンドル割引対象 | 対象/対象外 | バンドル割引対象商品ならば | バンドル販売の割引適用条件などを表示 | ●（※2） | ▲（※3） | -- | ★ | -- | バンドル販売名 |
| 闇市商品 | 対象/対象外 | メイン商品グループが闇市の場合 | 他の闇市商品の紹介や期間など闇市セールの情報を表示 | ●,○（※2） | ▲（※3） | -- | ★ | -- | |
| クール便対象 | 対象/対象外 | 対象商品ならば | クール便に関するお知らせ | ●,○（※2） | ▲（※3） | -- | ★ | -- | |
| メール便対象 | 対象/対象外 | 対象商品ならば | メール便に関するお知らせ | ●,○（※2） | ▲（※3） | -- | ★ | -- | メール便同梱可能個数 |
| 購入個数制限対象 | 対象/対象外 | 対象商品ならば | 「いくつまでご購入いただけます」といった告知 | ●,○（※2） | ▲（※3） | -- | ★ | -- | 購入個数制限数 |
| 個別送料対象 | 対象/対象外 | 対象商品ならば | 個別送料がかかる理由を表示 | ●,○（※2） | ▲（※3） | -- | ★ | -- | 商品個別送料 |
| 商品価格(定価) | あり/なし | 定価が登録されていれば | 定価と販売価格に関する表示 | ●（※2） | ▲（※3） | -- | ★ | -- | 通常価格(定価) 販売価格 |
| 商品価格(会員価格) | あり/なし | 会員価格が登録されていれば | 会員特別価格の表示 | ●（※2） | ▲（※3） | -- | ★ | -- | 販売価格 会員価格・会員ステージ価格 |
| 商品価格(会員ステージ価格) | あり/なし | ログインしている会員が任意の会員ステージならば | 会員ステージによる（優遇された）販売価格という告知 | ●（※2） | ▲（※3） | -- | ★ | -- | 会員価格・会員ステージ価格 |
| 商品価格(会員ステージ価格) | 会員ステージ名を選択（単数） | ログインしている会員が任意の会員ステージならば | 特定の会員ステージによる（優遇された）販売価格という告知（「ゴールド会員特別価格」など） | ●（※2） | ▲（※3） | -- | ★ | -- | 会員価格・会員ステージ価格 |
| 消費税 | 税込/税抜 | 消費税についての注意事項など | ●（※2） | ▲（※3） | -- | ★ | -- | ||
| 商品種別 | 通常販売/予約販売 | 予約販売告知 | ●（※2） | ▲（※3） | -- | ★ | -- | ||
| 定期販売方法 | 通常・定期販売/定期販売/頒布会販売 | 対象商品ならば | 1回あたりの割引率（計算式）を表示 | ○（※2） | ▲（※3） | -- | ★ | -- | |
| 定期・頒布会在庫 | あり/なし | 通常在庫あり、または定期在庫あり（もしくは未設定）ならば | （在庫ありの場合）定期購入を誘導する告知を表示 | ○（※2） | ▲（※3） | -- | ★ | -- | |
| 定期・頒布会販売価格（初回あり） | あり/なし | 初回価格が設定されていれば | 通常価格（もしくは通常回価格）との比較を表示 | ○（※2） | ▲（※3） | -- | ★ | -- | 定期初回価格 |
| 定期・頒布会販売価格（最終回あり） | あり/なし | 最終回価格が設定されていれば | 通常価格（もしくは通常回価格）との比較を表示 | ○（※2） | ▲（※3） | -- | ★ | -- | 定期最終回価格 |
| 商品在庫有無 | 在庫あり/在庫なし | バリエーションの場合はご注意ください。 「在庫あり」を選択： いずれかのバリエーションに在庫が存在すれば適用 「在庫なし」を選択： 全てのバリエーション在庫が存在しない場合に適用 |
在庫状況の表示。再入荷お知らせメールの説明 | ●,○（※2） | ▲（※3） | -- | ★ | -- | |
| 商品在庫僅少 | チェックボックス | バリエーション商品は対象外 | 在庫残りあとわずか表示 | ●,○（※2） | ▲（※3） | -- | ★ | -- | |
| 販売期間 | 販売期間前/販売期間中/販売期間終了 | 販売期間の表示 | ●,○（※2） | ▲（※3） | -- | ★ | -- | ||
| 販売期間開始までの日数 | 1ヶ月前/1週間前/3日前/前日 | システム日時にて判定 | ●,○（※2） | ▲（※3） | -- | ★ | -- | 販売開始までの日数 | |
| 販売期間終了までの日数 | 1ヶ月前/1週間前/3日前/前日 | システム日時にて判定 | ●,○（※2） | ▲（※3） | -- | ★ | -- | 販売終了までの日数 | |
| 予約在庫有無 | 在庫あり/在庫なし | バリエーションの場合はご注意ください。 「在庫あり」を選択： いずれかのバリエーションに在庫が存在すれば適用 「在庫なし」を選択： 全てのバリエーション在庫が存在しない場合に適用 |
在庫状況の表示。通常販売の有無などの表示。 | ●（※2） | ▲（※3） | -- | ★ | -- | |
| 予約在庫僅少 | チェックボックス | バリエーション商品は対象外 | ●（※2） | ▲（※3） | -- | ★ | -- | ||
| 予約販売期間 | 販売期間前/販売期間中/販売期間終了 | 在庫残りあとわずか表示 | ●（※2） | ▲（※3） | -- | ★ | -- | ||
| 予約期間開始までの日数 | 1ヶ月前/1週間前/3日前/前日 | システム日時にて判定 | ●（※2） | ▲（※3） | -- | ★ | -- | 予約販売終了までの日数 | |
| 予約期間終了までの日数 | 1ヶ月前/1週間前/3日前/前日 | システム日時にて判定 | ●（※2） | ▲（※3） | -- | ★ | -- | 予約販売終了までの日数 | |
| 入出荷予定日 | あり/なし | バリエーション商品は対象外 | 予定在庫機能の告知。発送までに日数がかかることの告知 | ●（※2） | ▲（※3） | -- | ★ | -- | 入出荷予定日表記名 |
複数表示条件の活用方法
一つのレイアウトパーツに複数の条件を設定する
レイアウトパーツには複数の条件を設定できます。
複数の条件を設定するとAND条件（絞込み条件）となります。
複数のレイアウトパーツを入れ子状態（内包）にし、それぞれに条件を設定する
表示条件(A)を設定したレイアウトパーツ(親)内に、別の表示条件(B)を設定したレイアウトパーツ(子)を配置した場合、レイアウトパーツ(子)の階層に配置されたパーツは、表示条件(A)と表示条件(B)に合致する場合のみ（AND条件（絞込み条件））表示されます。
複数のレイアウトパーツを並べ、それぞれに相反する条件を設定する
表示条件(A)を設定したレイアウトパーツと、別の表示条件(B)を設定したレイアウトパーツを並べて配置し、かつ、表示条件(A)と表示条件(B)が相反する条件だった場合、それぞれのレイアウトパーツ内に配置されたパーツは、表示条件(A)または表示条件(B)に合致する場合のみ表示されます。
※相反する条件を設定したレイアウトパーツを入れ子状態（ネスト）すると、意図通りに表示されませんのでご注意ください。
商品説明・商品独自コメントとレイアウト表示条件機能の用途の違いについて
商品説明・商品独自コメントを利用する場合
表示条件と同様に、商品ごとの情報をECサイトに表示できます。
その場合は、商品説明・商品独自コメント欄に、HTMLタグをそのまま商品情報としてご登録いただくことになります。
詳しくは商品独自コメントの使用方法をご覧ください。
レイアウトパーツの表示条件機能を利用する場合
パターンパーツ（カルーセルパーツ・コラムパーツ・箇条書きパーツ・任意商品表示パーツ・メニューパーツ）やフリーパーツ、あるいはパネルパーツなどのコマースクリエイター構築機能と組み合わせて、商品の様々な情報・告知を表示できます。
表示したいコンテンツの量（html量）が多い場合、またコンテンツの一部のみ（例えばカルーセルバナーのみ）を頻繁に更新する場合などは、表示条件機能をご利用いただくと、更新時のミス防止や効率化につながります。
運用方法に合わせてご利用ください。
【よくある活用方法】会員のみにそれぞれの会員情報を表示する
会員情報置換文字を記載したフリーパーツを、ログイン：ログイン済の表示条件を設定したレイアウトパーツ内に配置します。
具体的には以下のように配置していただくと、会員情報を適切に表示できます。（HTMLタグは省いて記載してます。）
置換文字の活用について
ECサイトに会員情報を表示する場合、置換文字が使用できます。
フリーパーツの表示内容に「会員情報置換文字」を記載すれば、会員ログインおよび自動ログイン時に会員個別の情報に置き換えて表示できます。
※ログインをされていない場合は、各種置換文字は置換されません。置換文字部分が削除されます。
置換文字とレイアウトパーツの表示条件を組み合わせた表示設定手順
- フリーパーツに会員情報を記載します。
※必ず「fs-clientInfo」というclassを付けたタグで囲んでください。
＜利用した置換文字＞
{@ member.last_name @} {@ member.first_name @}様こんにちは。
会員ステージ：{@ member.stage_name @}
ご利用可能ポイント：{@ member.total_points @}point
（有効期限：{@ member.purchase_point_expiration @}）
ポイント詳細
ご購入ポイント：{@ member.active_points @}point
有効待ちポイント:{@ member.pending_points @}point
特別ポイント：{@ member.special_points @}point
（特別ポイント有効期限：{@ member.special_point_expiration @}）
- 会員情報を表示するレイアウトの変更画面を表示します。
画面左のパーツ配置エリアの下にある「レイアウトパーツを追加する」ボタンを押下し、レイアウトパーツを追加します。
※表示条件設定だけを行いたい場合は、HTML要素で「なし」を選びます。
- 追加したレイアウトの配置を任意の場所に変更します。
レイアウトパーツの 操作するボタンから 表示条件を設定するを選択します。
- 表示条件にログインログイン済を設定します。
- 表示条件を設定したレイアウトパーツ内に会員情報置換文字を記載したフリーパーツを配置します。
- ECサイトでは以下のように表示されます。なお、未ログイン（ゲスト）の場合は何も表示されません。
未来 太郎様こんにちは。
会員ステージ：シルバー
ご利用可能ポイント：1,678point
（有効期限：2019/12/31）
ポイント詳細
ご購入ポイント：678point
有効待ちポイント:123point
特別ポイント：1,000point
（特別ポイント有効期限：2019/06/01）