グローバルナビを作成する

このパートでは、スタートアップテーマに初期状態で入っているグローバルメニュー（PC）をベースに、ナビゲーションを作成する方法をご紹介します。
初期状態では、フリーパーツで作成したパーツを、パネルパーツ（ヘッダーエリア（PC））に配置しています。

［ご注文手続き］画面以降の画面を除く、ほぼすべての画面で共通で配置（表示）されています。

メニューの変更画面に入る

グローバルナビゲーションとは、各ページ（「ご注文手続き」以降を除く）に共通に表示されている、下図のオレンジ枠のナビゲーションを指します。

コマースクリエイター＞テーマ＞レイアウト一覧＞（各画面の）レイアウト変更より「ヘッダーナビゲーション」パーツを操作します。

［テーマ］の［レイアウト］をクリックします。
［レイアウト検索］画面で［トップページ］にチェックを入れて検索すると、トップページのレイアウトが出てくるのでをクリックします。
［レイアウト変更］画面が開きます。
パネルパーツ［ヘッダーエリア(PC)］を開き、［ヘッダーナビゲーション］のボタンをクリックして、［パーツを変更する］をクリックします。

htmlを変更する

htmlでナビゲーションを変更します。
スタートアップテーマのナビゲーションをそのまま利用する場合は、以下を忘れずに行なってください。
- 「新着商品」にリンクを張る　新着商品のページを作成しておきます。
  詳しくは［参考］新着商品一覧ページを作成するをご覧ください。
- 「商品一覧」にリンクを張る　全商品の一覧ページを作成しておきます。
  詳しくは［参考］商品一覧ページを作成するをご覧ください。

ショッピングカートに入っている商品数を表示できます。

カートへのリンク部分にカート内商品数置換文字を使用するとこのように表示されます。
詳しくは、置換文字一覧-カート内の商品数をご確認ください。

保存する

［フリーパーツ変更］画面の［保存する］をクリックしてメニューを保存します。
［パネル発変更］画面が開くので、［保存する］をクリックします。
［レイアウト変更］画面に戻るので、さらに［保存する］をクリックすると、ショップ画面に変更が反映されます。

参考

スタートアップテーマでは、［ご注文手続き］画面以降を除く、ECサイトのほぼすべての画面に同じメニューを表示する［パーツ］が表示されます。
［ご注文手続き］画面以降では、メニューを表示しない別の［パーツ］が配置されています。

このように、配置する［パーツ］を変更することで、ナビゲーションを画面ごとに変えることもできますので、覚えておきましょう。

以上の手順で、グローバルナビの変更は完了です。
下記は必要に応じて、ご参照ください。

［参考］新着商品一覧ページを作成する

商品グループにて新着商品用のグループを作成します。（URLコードは適宜設定してください。）
新着として表示したい商品の、商品登録画面の［所属するグループのURLコード］にて、作成した新着商品用のグループを選択し、［登録する］をクリックします。

※例としてサブグループに設定しています。メイングループに設定しても構いません。

例では以下のようなコードを設置します。


<li class="fs-p-headerNavigation__listItem">
    <a href="/c/newitem" class="fs-p-headerNavigation__link">
    <i class="fs-icon--newProduct"></i>
        新着商品
    </a>
</li>

なお、新着用の特集ページとして、フリーページを利用して作成することも可能です。
※htmlの入力が必要になります。

テーマ＞スタートアップテーマ(PC/タブレット)［レイアウト］をクリックします。
［レイアウトを追加する］ボタンをクリックします。

種類［フリーページ］を選択し、表示された［フリーページ］バーをクリックします。

［レイアウト追加モーダル］が表示されるので、レイアウト名を入力（例）新着商品一覧）し、［レイアウトを追加する］をクリックします。
割当名を指定します。

割当名とは

割当名を指定すると、新着商品一覧専用のレイアウトで、ページを表示することができます。
割当名について、詳しくは、オンラインマニュアルをご確認ください。

［変更］をクリックし、割当名（例：新着商品）を入力します。
レイアウト変更画面が表示されるので、［保存する］をクリックします。

［有効にする］にチェックします。
［保存する］をクリックします。