運用サポート(平日10:00~17:00) 06-6485-6485
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

レイアウトパーツ

×

マニュアル閲覧上の注意

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

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

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

レイアウトパーツの使用方法

レイアウトパーツとは

  • レイアウトパーツはレイアウト内で使用するパーツです。
  • レイアウトパーツはHTML要素を出力できるため、括り(wrap)タグとして使用できます。
  • レイアウトパーツの中にパーツを配置できます。レイアウトのパーツ配置エリア内で「階層」のように表示されます。
  • レイアウトパーツは表示条件を設定できます。

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

レイアウトパーツを追加するボタンを押下すると、レイアウトパーツ設定ダイアログが表示され、レイアウトパーツを追加できます。

パーツ名

レイアウトパーツの名称を設定できます。

HTML

HTML要素
div・article・section・nav・aside・header・main・footerタグのいずれか、または「指定なし」から選択してください。パーツを囲むwrapタグを設定できます。
id/classを指定する場合は、「指定なし」以外のいずれか選択してください。
id
HTML要素のid属性の値を設定できます。
class
HTML要素のclass属性の値を設定できます。

OK

レイアウトパーツを追加します。レイアウトパーツはパーツ配置エリアの一番下に追加されます。

キャンセルする

レイアウトパーツを追加しません。

レイアウトパーツの操作

パーツ配置エリアでレイアウトパーツの操作するボタンを押下すると、レイアウトパーツを操作できます。

表示しない

表示しないボタンを押下すると、レイアウトパーツはレイアウトに配置されていますが、ECサイトには表示されなくなります。レイアウトパーツに含まれるパーツも同様です。
HTMLタグも出力されません。(コメントアウトではありません。)

表示するボタンを押下すると、レイアウトパーツがECサイトに表示されます。

パーツを変更する

レイアウトパーツの変更するボタンを押下すると、レイアウトパーツ設定ダイアログが表示され、HTML要素・id・classを変更できます。

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

レイアウトから外すボタンを押下すると、レイアウトパーツが削除されます。いったんレイアウトから外したレイアウトパーツは復元できません。

レイアウトパーツを開く(レイアウトパーツ内にパーツを配置する)

レイアウトパーツの開くボタンを押下すると、レイアウトパーツ内にパーツを配置する画面へ遷移します。レイアウトパーツ内にパーツを配置する画面へ遷移すると、パーツ配置エリアの上部に「body > 」につづく階層としてパンくずリンクが表示されます。

レイアウトパーツ内にパーツを配置する画面に遷移後、パーツ一覧からパーツをドラッグして、パーツ配置エリアに配置してください。

レイアウトパーツ内にはパーツの他に、別のレイアウトパーツも配置できます。
なお、いったん配置されたレイアウトまたはレイアウトパーツから、別のレイアウトパーツへ(階層)を移動できません。

レイアウトパーツを閉じる

パーツ配置エリアの上部に「body > 」からつづくパンくずリンクを選択すれば、レイアウトパーツを閉じられます。

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

表示条件を設定する

レイアウトパーツには表示条件を設定できます。
指定した条件に合致する場合のみ、レイアウトパーツと「レイアウトパーツ内に配置したパーツ」が表示されます。

パーツ配置エリアでレイアウトパーツの操作するボタンを押下して、表示条件を設定するを押下します。
表示条件設定ダイアログが表示されます。各条件を設定し、各条件の左にあるチェックボックスをつけてOKボタンを押下すると表示条件が設定されます。
レイアウト変更画面に戻りますので、プレビューすれば表示条件が反映されます。
保存するボタンを押下すれば表示条件が保存され、ECサイトに反映されます。(有効なレイアウトの場合)

システムパーツが含まれるレイアウトパーツには表示条件を設定できません。
「システムパーツが含まれているので、表示条件を設定できません。」というエラーが表示されます。(表示条件設定でシステムパーツを非表示にすると、商品価格が表示されないといったトラブルが想定されるためです。)

AND条件

レイアウトパーツには複数の条件を設定できます。複数の条件を設定するとAND条件(絞り込み条件)となります。

別の方法として、表示条件(A)を設定したレイアウトパーツ(親)内に、別の表示条件(B)を設定したレイアウトパーツ(子)を配置すると、レイアウトパーツ(子)の階層に配置されたパーツは、表示条件(A)と表示条件(B)に合致する場合のみ表示されます。

OR条件

表示条件(A)を設定したレイアウトパーツと、別の表示条件(B)を設定したレイアウトパーツを並べて配置し、かつ、表示条件(A)と表示条件(B)が相反する条件だった場合、それぞれのレイアウトパーツ内に配置されたパーツは、表示条件(A)または表示条件(B)に合致する場合のみ表示されます。

表示条件一覧

いずれかの条件に合致した場合にレイアウトパーツとレイアウトパーツ内に配置されたパーツが表示されます。

表示条件は、条件設定可能なページが設定されています。また商品グループに関する条件(下表「親グループ(1階層目)URLコード」から「闇市商品グループ」まで)は「商品グループエリア」内の、商品に関連する条件(下表「商品番号」から「入出荷予定日」まで)は、商品詳細レイアウトの「商品詳細エリア」・商品一覧レイアウトの「商品一覧エリア」内のレイアウトパーツでのみ設定できます。

●:使用可能、○:定期・頒布会商品用ページで使用可能、▲:商品一覧部分のみ可能、★:お気に入りリスト商品一覧部分のみ可能(表示可能ページからモーダルは除く)
条件 選択肢・指定方法 条件補足 用途・表示例 表示可能ページ 関連する置換文字
商品 商品グループ カート マイページ その他・フリーページ
ログイン ログイン済/未ログイン 今回の来訪でログイン(メールアドレスとパスワードを入力しログインボタンを押下する操作)をしていればログイン済 (未ログインの場合に、会員登録を誘導する) ●,○ ●,○ --
自動ログイン 対象/対象外 過去ログインした履歴があり、まだログイン操作をしていない状態ならばログイン済 (ご注文の前に)ログインしてください -- -- ●,○ -- --
会員ステージ 会員ステージ名を選択(単数) ログインしている会員が任意の会員ステージならば 会員ステージの特典を表示
次のレベルの会員ステージ特典を表示
●,○ ●,○
Amazonログイン ログイン済/未ログイン -- (Amazonアカウントでご購入の場合の注意など) -- -- ●,○ -- --
LINEログイン ログイン済/未ログイン -- LINEメッセージでクーポンを配布しました -- -- ●,○ -- --
Amazonアカウント連携 連携済/未連携 -- Amazonアカウントでログインできます -- -- ●,○ -- --
LINE連携 連携済/未連携 -- LINE IDと連携すると、LINEでメッセージが受け取れます -- -- ●,○ -- --
親グループ(1階層目)URLコード 商品グループURL(複数指定不可) (第一階層の商品グループが)任意の商品グループならば 商品カテゴリごとにコンテンツを表示 -- -- -- --
親グループURLコード 商品グループURL(複数指定不可) (親の商品グループが)任意の商品グループならば 商品カテゴリごとにコンテンツを表示 -- -- -- --
闇市商品グループ 対象/対象外 (親の商品グループが)闇市商品グループならば ブランド名(商品グループ名)などの表示 -- -- --
商品番号 商品番号(複数指定不可) パターンパーツまたは複数の)パーツを使用した商品独自コンテンツの表示 ●,○ -- --
商品URL 商品URLコード(複数指定不可) パターンパーツまたは複数の)パーツを使用した商品独自コンテンツの表示 ●,○ -- --
商品グループ(メイン) 商品グループURLコード(複数指定不可) 商品カテゴリごとにコンテンツを表示 ●,○ -- --
商品グループ(サブ) 商品グループURLコード(複数指定不可) 商品カテゴリごとにコンテンツを表示 ●,○ -- --
商品タグ 商品タグ(複数指定不可) 商品タグでコンテンツを表示 ●,○ -- --
バンドル割引対象 対象/対象外 バンドル割引対象商品ならば バンドル販売の割引適用条件などを表示 -- -- バンドル販売名
闇市商品 対象/対象外 メイン商品グループが闇市の場合 他の闇市商品の紹介や期間など闇市セールの情報を表示 ●,○ -- --
クール便対象 対象/対象外 対象商品ならば クール便に関するお知らせ ●,○ -- --
メール便対象 対象/対象外 対象商品ならば メール便に関するお知らせ ●,○ -- -- メール便同梱可能個数
購入個数制限対象 対象/対象外 対象商品ならば 「いくつまでご購入いただけます」といった告知 ●,○ -- -- 購入個数制限数
個別送料対象 対象/対象外 対象商品ならば 個別送料がかかる理由を表示 ●,○ -- -- 商品個別送料
商品価格(定価) あり/なし 定価が登録されていれば 定価と販売価格に関する表示 -- -- 通常価格(定価)
販売価格
商品価格(会員価格) あり/なし 会員価格が登録されていれば 会員特別価格の表示 -- -- 販売価格
会員価格・会員ステージ価格
商品価格(会員ステージ価格) あり/なし ログインしている会員が任意の会員ステージならば 会員ステージによる(優遇された)販売価格という告知 -- -- 会員価格・会員ステージ価格
商品価格(会員ステージ価格) 会員ステージ名を選択(単数) ログインしている会員が任意の会員ステージならば 特定の会員ステージによる(優遇された)販売価格という告知(「ゴールド会員特別価格」など) -- -- 会員価格・会員ステージ価格
消費税 税込/税抜 消費税についての注意事項など -- --
商品種別 通常販売/予約販売 予約販売告知 -- --
定期販売方法 通常・定期販売/定期販売/頒布会販売 対象商品ならば 1回あたりの割引率(計算式)を表示 -- --
定期・頒布会在庫 あり/なし 通常在庫あり、または定期在庫あり(もしくは未設定)ならば (在庫ありの場合)定期購入を誘導する告知を表示 -- --
定期・頒布会販売価格(初回あり) あり/なし 初回価格が設定されていれば 通常価格(もしくは通常回価格)との比較を表示 -- -- 定期初回価格
定期・頒布会販売価格(最終回あり) あり/なし 最終回価格が設定されていれば 通常価格(もしくは通常回価格)との比較を表示 -- -- 定期最終回価格
商品在庫有無 在庫あり/在庫なし 在庫状況の表示。再入荷お知らせメールの説明 ●,○ -- --
商品在庫僅少 チェックボックス バリエーション商品は対象外 在庫残りあとわずか表示 ●,○ -- --
販売期間 販売期間前/販売期間中/販売期間終了 販売期間の表示 ●,○ -- --
販売期間開始までの日数 1ヶ月前/1週間前/3日前/前日 システム日時にて判定 ●,○ -- -- 販売開始までの日数
販売期間終了までの日数 1ヶ月前/1週間前/3日前/前日 システム日時にて判定 ●,○ -- -- 販売終了までの日数
予約在庫有無 在庫あり/在庫なし 在庫状況の表示。通常販売の有無などの表示。 -- --
予約在庫僅少 チェックボックス バリエーション商品は対象外 -- --
予約販売期間 販売期間前/販売期間中/販売期間終了 在庫残りあとわずか表示 -- --
予約期間開始までの日数 1ヶ月前/1週間前/3日前/前日 システム日時にて判定 -- -- 予約販売終了までの日数
予約期間終了までの日数 1ヶ月前/1週間前/3日前/前日 システム日時にて判定 -- -- 予約販売終了までの日数
入出荷予定日 あり/なし 予定在庫機能の告知。発送までに日数がかかることの告知 -- -- 入出荷予定日表記名

商品説明・商品独自コメントとレイアウト表示条件機能の用途の違いについて

商品説明・商品独自コメントでも、商品ごとの情報をECサイトに表示できます。商品説明・商品独自コメントでは、HTMLタグをそのまま商品情報としてご登録いただくことになります。(詳しくは商品独自コメントの使用方法をご覧ください。)

レイアウトパーツの表示条件機能を利用すると、パターンパーツ(カルーセルパーツコラムパーツ箇条書きパーツ任意商品表示パーツメニューパーツ)やフリーパーツ、あるいはパネルパーツなどのコマースクリエイター構築機能を用いて商品の様々な情報・告知を表示できます。コンテンツの量や運用方法に合わせてご利用ください。

レイアウトパーツの表示条件設定と、フリーパーツの会員情報置換文字について

ECサイトに会員情報を表示する場合、置換文字が使用できます。フリーパーツの表示内容に「会員情報置換文字」を記載すれば、会員ログインおよび自動ログイン時に会員個別の情報に置き換えて表示できます。
なお、ログインをされていない場合は、各種置換文字は置換されません。置換文字部分が削除されます。

会員情報を表示する際のレイアウトパーツ使用方法

会員情報を表示する場合は、会員情報置換文字を記載したフリーパーツを、[ログイン:ログイン済]の表示条件を設定したレイアウトパーツ内に配置してください。
具体的には以下のように配置していただくと、会員情報を適切に表示できます。(HTMLタグは省いて記載してます。)

会員情報を記載するフリーパーツの表示内容(見本)です。

{@ 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 @})
必ず「fs-clientInfo」というclassを付けたタグで囲んでください。

コマースクリエイター>テーマ>レイアウト一覧にて、会員情報を表示するレイアウトの変更画面を表示します。画面左のパーツ配置エリアの下にある「レイアウトパーツを追加する」ボタンを押下し、レイアウトパーツを追加します。

表示条件設定だけを行いたい場合は、HTML要素で「なし」を選びます。

追加したレイアウトの配置を任意の場所に変更します。レイアウトパーツの操作するボタンから表示条件を設定するを選択します。

表示条件条件にログイン[ログイン済]を設定します。

表示要件を設定したレイアウトパーツ内に会員情報置換文字を記載したフリーパーツを配置します。

ECサイトでは以下のように表示されます。なお、未ログイン(ゲスト)の場合は何も表示されません。

未来 太郎様こんにちは。
会員ステージ:シルバー
ご利用可能ポイント:1,678point
(有効期限:2019/12/31)

ポイント詳細
ご購入ポイント:678point
有効待ちポイント:123point
特別ポイント:1,000point
(特別ポイント有効期限:2019/06/01)

表示条件の「ログイン済み/未ログイン」と「自動ログイン対象/自動ログイン対象外」の関連について

レイアウトパーツの表示条件設定「ログイン済み/未ログイン」と「自動ログイン対象/自動ログイン対象外」の関連は以下になります。
なお、自動ログイン対象・自動ログイン対象外については、ショッピングカートでのみ有効な表示条件設定となります。
参考として、会員情報置換文字の「ログイン状態」の値を併記しています。

状態 表示条件 (参考)置換文字 ログイン状態:{@ member.logged_in @}
ゲスト(ログイン履歴なし) 未ログイン 自動ログイン対象外 false
ログイン(パスワードを入力) ログイン済み 自動ログイン対象外 true
自動ログイン(再来訪) 自動ログイン対象 true

表示条件設定「自動ログイン対象」は、自動ログインの場合のみ表示されます。
自動ログインの場合はショッピングカートからご注文手続きに遷移する場合に、ログインを行う必要がありますので、告知に利用できます。

項目表示について

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

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

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

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

×

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

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

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