こんにちは、竹内です。
今回から2回に分け、Magento1.9のトップページデザインカスタマイズについてご紹介していきます。
（左）Magento1.9標準トップページ（右）カスタマイズしたトップページ
上の画像は、Magento1.9の標準テーマのトップページと、カスタマイズ後のトップページです。
今回制作したサイトは、商品数・カテゴリ数が多く、また、商品以外のコンテンツも充実したサイトであるため、かなり大幅にデザインカスタマイズを行いました。
ヘッダー内に重要なリンクを配置する
グローバルナビゲーション
グローバルナビゲーション
Magento1.9の標準テーマのヘッダーのグローバルナビゲーションは、管理画面で登録したカテゴリが自動的に横並びに表示されるようになっています。
今回は、サイト内に多くのコンテンツを用意しており、Magento標準のままのヘッダー・グローバルナビゲーションだけでは、重要なコンテンツへの導線を十分に確保できないという問題がありました。
そこで、大幅なカスタマイズを行い、グローバルナビゲーションをメガメニューとしました。
一番右の「PRODUCT」には商品カテゴリへのリンクを、その他のナビには商品カテゴリ以外のコンテンツへのリンクを分類して収め、主要なページへのリンクを全てヘッダー内に配置しています。
これらメガメニューの内容は、CMSブロックを利用して作成されています。
ハンバーガナビゲーション
ハンバーガーナビゲーション
グローバルナビの他に、ヘッダーの左にも「ハンバーガーナビ」を追加しました。
こちらには関連サイトへのリンクをまとめています。
バナー領域はアコーディオン開閉させる
バナーエリア
トップページにおすすめ商品や特集のバナーを数多く配置することで、サイトに賑やかさが生まれますが、その一方で、特にスマホで閲覧する時など、バナーが多すぎて他のコンテンツにたどり着かない…ということがよくあります。
そこで、このサイトでは、はじめはスッキリと1行で表示、ボタンをクリックすることで全てのバナーが表示されるようカスタマイズしています。