キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

メニューパーツ追加・変更

×

マニュアル閲覧上の注意

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

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

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

メニューパーツ

ECサイトのメニュー(ナビゲーション)を簡単な操作で作成できます。任意のメニュー項目を追加、配置できるできるだけでなく、商品グループ情報を読み込み、親グループ・子グループの情報を自動的にメニューの階層にできます。メニューには商品グループページへのリンクを表示できます。

オプションを設定する

パーツを囲むタグ(HTML要素とid/class)や管理タグなどを設定するパーツオプション設定へ遷移します。

パーツ名

パーツの名称を設定できます。

置換文字

パーツ置換文字が表示されます。パーツ置換文字は複製・追加時に設定できます。変更はできません。

class

パーツにclassを追加できます。ECサイト画面に出力されます。

class設定による配置指定

メニューを縦に並べたい場合、メニューパーツ追加/変更画面のclassに「fs-pt-menu--row」と入力してください。
横縦に並べたい場合は、classに「fs-pt-menu--col」と入力してください。
メニュー配置指定用のclass以外にclassを入力する場合は、classを半角空白で区切って入力してください。またはパーツオプション設定にてパーツを囲むHTML要素を設定し、classを入力してください。

商品グループを読み込む

商品グループ情報を読み込んで、自動的にメニューを作成します。商品グループの親子関係をそのままメニューの入れ子構造にします。
メニューに表示したい階層を「1階層目まで」から「全階層」(5階層目まで)の中から選択して、商品グループを読み込むボタンを押下してください。通常メニューでは「2階層目まで」記述されることが多いようです。

非公開状態の商品グループも取り込まれますが、非公開の商品グループのメニュー項目はECサイトには表示されません。
闇市に指定した商品グループは取り込まれません。

読み込んだ商品グループメニュー項目は、表示順を変更するボタンをマウスで選択し、そのままドラッグして順番を変更できます。同じ階層内でのみ順番変更できます。

商品グループの階層について

商品グループを登録した後、「商品グループを読み込む」ボタンを押下すると、メニュー内容欄に商品グループ情報が読み込まれます。
商品グループは、商品グループ(親)の配下に商品グループ(子)を登録でき、親子関係を作成できます。これを「階層」と呼びますが、5階層まで作成できます。商品グループに階層を作ると、パンくずリンクに「トップ > 第1階層 > 第2階層 > 第3階層 > 第4階層 > 第5階層」のように表示されます。
商品グループの階層がある場合に、何階層までメニューに再現するかを選択してください。

商品グループを読み込むと、「メニュー内容」に商品グループの第1階層が表示されます。メニューを開くボタンを押下すると、第2階層のメニューが表示されます。

商品グループを追加した場合

いったん商品グループを読み込んで保存した後に、追加登録した商品グループをメニューに追加するには、再度「商品グループを読み込む」ボタンを押下する必要があります。

独自メニュー項目の配置について

取り込まれた商品グループメニューの間に、独自メニュー項目を配置できます。

メニュー内容

メニューとしてECサイトに表示する内容です。

商品グループの例

上記の商品グループについて「商品グループを読み込む」ボタンを押下すると、以下のようなメニュー内容となります。

ECサイトには以下のようなメニューを表示できます。

表示順を変更する

メニュー項目は表示順を変更するボタンをマウスで選択してドラッグするとメニューを上下に移動でき、メニューの表示順を変更できます。同じ階層内でのみ順番変更できます。
入れ子状態の場合は、親メニューを移動すると、子メニューも一括で表示順が変更されます。

メニューを開くボタン

下部階層があるメニュー項目に表示されます。押下すると下部階層を表示します。

メニューを閉じるボタン

下部階層メニュー項目を表示している場合、押下すると上部階層を表示します。

表示していますボタン/表示していませんボタン

メニューの表示状態を示します。押下すると表示状態を切替できます。
表示状態のメニューは、表示しないボタンを押下するとメニュー項目を非表示にします。 非表示にされたメニュー項目はECサイトに表示されません。(HTMLタグが出力されません。)
非表示状態のメニューは、表示するボタンを押下すると表示できます。

下部階層にメニューがある(子グループがある)場合は、親メニューを非表示にすると、子メニューも一括で非表示になります。

メニューを外すボタン

メニュー内容からメニュー項目を外すには、外すボタンを押下します。
独自メニュー項目の場合、独自メニュー項目自体は削除されませんので、メニュー項目検索すればメニュー項目一覧に表示されます。

メニュー項目

追加ずみのメニュー項目を検索できます。

キーワード

メニュー項目を「メニュー項目名」「URL」で検索できます。部分一致で検索できます。複数指定する場合は、空白で区切ってください。AND検索になります。

検索するボタン

指定した条件でパーツを検索できます。

メニュー項目一覧

検索条件に合致したメニュー項目が表示されます。
メニュー項目はメニュー内容の任意の位置に配置できます。

メニュー項目名

メニュー項目名が表示されます。選択すると並び替えできます。

更新日時

選択するとメニュー項目の更新日時で並び替えできます。更新日時自体は表示されません。

メニュー項目を変更する

メニュー項目を変更できます。変更ボタンを押下すると、変更画面へ遷移します。

メニュー項目を追加する

メニュー項目一覧からメニュー内容にドラッグします。メニュー項目をマウスで選択し、そのままドラッグしてメニュー内容エリアにドロップします。
追加したメニュー項目はメニューパーツ間で共通して使用できますので、他のメニューパーツにも追加できます。
またメニュー内容に配置された後も、メニュー項目一覧にはそのまま表示されるため、同じメニューに同じメニュー項目を複数追加できます。
なお、メニュー項目には下部階層を作成できません。

保存する

パーツを保存します。

キャンセルする

未保存の作業内容を破棄します。

戻る

パーツ一覧に戻ります。未保存の作業内容は破棄されます。

レイアウト設定に戻る

レイアウト追加/変更に戻ります。未保存の作業内容は破棄されます。保存するボタンを押下した後、レイアウト設定へ戻るボタンを押下してください。

削除

削除するボタンを押下すると、メニューパーツを削除できます。削除したパーツは復元できません。

メニュー項目追加・変更

メニュー項目を追加するボタンを押下すると、メニューに商品グループ以外の「独自メニュー項目」を追加できます。

メニュー項目名

パーツの名前です。一覧やレイアウトに表示されます。

class

メニュー項目を囲むHTMLタグに表示するclassを設定できます。任意のメニューにCSSデザインを行う場合に使用できます。

リンク先

メニューのリンク先を設定できます。

新規ウインドウで開く

「新規ウインドウで開く」にチェックすると、リンク先を新規ウインドウで表示します。

保存する

メニュー項目を保存します。

戻る

元の画面に戻ります。未保存の作業内容は破棄されます。

メニュー項目を削除する

削除するボタンを押下すると、メニュー項目を削除できます。

項目表示について

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

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

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

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

×

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

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

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