運用サポート(平日10:00~17:00) 06-6485-6485
コマースクリエイター未利用コマースクリエイター移行中(有効)コマースクリエイター利用中説明を表示 ▼

レイアウトパーツ

×

マニュアル閲覧上の注意

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

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

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

コマースクリエイター>テーマ>(各デバイス)レイアウト>(各レイアウト)レイアウト設定

レイアウト変更画面の[レイアウトパーツを追加する]を押下して設定します。

レイアウトパーツを新規追加・変更できます。

レイアウトパーツについては、レイアウトパーツとはを、またレイアウト設定画面での配置方法についてはレイアウト設定-レイアウトパーツについてをご覧ください。

目次

レイアウトパーツとは

レイアウト内で設定できます。

レイアウトパーツは、内部にパーツを配置できるパーツです。
レイアウトのパーツ配置エリア内で「階層」のように表示されます。

レイアウトパーツはHTML要素を出力できるため、括り(wrap)タグとして使用できます。
デザイン上、表示内容(コンテンツ)を一括りにしたい場合や、一括配置移動(表示位置を変更)したい場合などに活用すると便利です。

【参考】:レイアウト設定-レイアウトパーツについて

また、レイアウトパーツは表示条件を設定できます。
特定の条件下でのみ特定のコンテンツを表示したい場合などに利用することができます。

くわしくは、表示条件を設定するをご覧ください。

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

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

パーツ名
レイアウトパーツの名称を設定できます。
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 > 」からつづくパンくずリンクを選択すれば、レイアウトパーツを閉じられます。

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

表示条件を設定する

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

例えば、会員にのみ表示したいメッセージや特定の商品のみ表示したいキャンペーンコンテンツなどの表示制御に活用できます。

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

  1. パーツ配置エリアでレイアウトパーツの操作するボタンを押下し、表示条件を設定するを押下します。
  2. 表示条件設定ダイアログが表示されます。
    各条件を設定し、各条件の左にあるチェックボックスをつけてOKボタンを押下すると表示条件が設定されます。
    レイアウトパーツにより設定できる表示条件は異なります。
    設定可能な条件のみがダイアログに表示されます。設定可能な条件については、表示条件一覧をご覧ください。
  3. (例)トップページ>新規会員登録告知レイアウトパーツ
    (例)商品詳細>商品名・価格等の商品情報レイアウトパーツ
  4. レイアウト変更画面に戻るので、プレビューにて確認してください。
  5. 保存するボタンを押下すれば表示条件が保存され、ECサイトに反映されます。(有効なレイアウトの場合)

表示条件一覧

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

表示条件は、条件設定可能なページが設定されています。

<表中の記号について>

●:使用可能、○:定期・頒布会商品用ページで使用可能、
▲:商品一覧部分のみ可能、★:お気に入りリスト商品一覧部分のみ可能(表示可能ページからモーダルは除く)

(※1)商品グループレイアウトの「商品グループエリア」レイアウト内でのみ条件指定可能
(※2)商品詳細レイアウトの「商品詳細エリア」内でのみ条件指定可能
(※3)商品グループ/商品検索結果一覧/クーポン・バンドル対象商品一覧レイアウトの「商品一覧」レイアウト内でのみ条件指定可能

条件 選択肢・指定方法 条件補足 用途・表示例 表示可能ページ 関連する置換文字
商品 商品グループ カート マイページ その他・フリーページ
ログイン ログイン済/未ログイン 今回の来訪でログイン(メールアドレスとパスワードを入力しログインボタンを押下する操作)をしていればログイン済 (未ログインの場合に、会員登録を誘導する) ●,○ ●,○ --
自動ログイン 対象/対象外 過去ログインした履歴があり、まだログイン操作をしていない状態ならばログイン済 (ご注文の前に)ログインしてください -- -- ●,○ -- --
会員ステージ 会員ステージ名を選択(単数) ログインしている会員が任意の会員ステージならば 会員ステージの特典を表示
次のレベルの会員ステージ特典を表示
●,○ ●,○
Amazonログイン ログイン済/未ログイン -- (Amazonアカウントでご購入の場合の注意など) -- -- ●,○ -- --
LINEログイン ログイン済/未ログイン -- LINEメッセージでクーポンを配布しました -- -- ●,○ -- --
Amazonアカウント連携 連携済/未連携 -- Amazonアカウントでログインできます -- -- ●,○ -- --
LINE連携 連携済/未連携 -- LINE IDと連携すると、LINEでメッセージが受け取れます -- -- ●,○ -- --
親グループ(1階層目)URLコード 親グループ(1階層目)URLコードを入力(複数指定不可) 指定した親グループ(1階層目)配下の2階層目以下の商品グループに表示

※商品が0件の場合は表示されません。
※指定した親グループ(1階層目)には表示されません。
商品カテゴリごとにコンテンツを表示 -- ●(※1 -- -- --
親グループURLコード 親グループURLコードを入力(複数指定不可) 指定した親グループ配下の商品グループに表示

※商品が0件の場合は表示されません。
※指定した親グループには表示されません。
商品カテゴリごとにコンテンツを表示 -- ●(※1 -- -- --
闇市商品グループ 対象/対象外 (親の商品グループが)闇市商品グループならば ブランド名(商品グループ名)などの表示 ●(※1 -- -- --
商品番号 商品番号(複数指定不可) パターンパーツまたは複数の)パーツを使用した商品独自コンテンツの表示 ●,○(※2 ▲(※3 -- --
商品URL 商品URLコード(複数指定不可) パターンパーツまたは複数の)パーツを使用した商品独自コンテンツの表示 ●,○(※2 ▲(※3 -- --
商品グループ(メイン) 商品グループURLコード(複数指定不可) 商品カテゴリごとにコンテンツを表示 ●,○(※2 ▲(※3 -- --
商品グループ(サブ) 商品グループURLコード(複数指定不可) 商品カテゴリごとにコンテンツを表示 ●,○(※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)に合致する場合のみ(OR条件)表示されます。

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

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

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

表示したいコンテンツの量(html量)が多い場合、またコンテンツの一部のみ(例えばカルーセルバナーのみ)を頻繁に更新する場合などは、表示条件機能をご利用いただくと、更新時のミス防止や効率化につながります。
運用方法に合わせてご利用ください。

【よくある活用方法】会員のみにそれぞれの会員情報を表示する

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

置換文字とレイアウトパーツの表示条件を組み合わせた表示設定手順

  1. フリーパーツに会員情報を記載します。
  2. 置換文字の活用

    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 @})
  3. 会員情報を表示するレイアウトの変更画面を表示します。
    画面左のパーツ配置エリアの下にある「レイアウトパーツを追加する」ボタンを押下し、レイアウトパーツを追加します。
  4. 表示条件設定だけを行いたい場合は、HTML要素で「なし」を選びます。
  5. 追加したレイアウトの配置を任意の場所に変更します。
    レイアウトパーツの操作するボタンから表示条件を設定するを選択します。
  6. 表示条件にログイン[ログイン済]を設定します。
  7. 表示条件を設定したレイアウトパーツ内に会員情報置換文字を記載したフリーパーツを配置します。
  8. ECサイトでは以下のように表示されます。なお、未ログイン(ゲスト)の場合は何も表示されません。
  9. 未来 太郎様こんにちは。
    会員ステージ:シルバー
    ご利用可能ポイント: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サイト(ユーザー画面)で店舗を新規構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

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