こんにちは、竹内です。
今日は、新商品一覧スライダーのデザインカスタマイズについてご紹介します。
デフォルトの状態
こちらは、Magento1.9のデフォルト状態の新商品一覧です。トップページなどに配置して新商品をアピールすることができます。
新着商品の設定は管理画面から行います。指定された期間「新着商品」として一覧に表示させることができます。
デフォルトでは最新のものから6件のみを表示しますが、表示件数を増やしたり、エクステンションなど利用しスライダー表示にすることもできます。
今回のカスタマイズではエクステンションは使用せず、トップページのバナースライダーを応用した新商品スライダーを開発し、一度に多くの商品をまとめて見せることができるようにしました。
列数固定で省スペース化、一括切り替えで閲覧しやすいスライダー！
カスタマイズ後の新商品スライダー
こちらがカスタマイズした新商品スライダーです。
2行×6列の計12件をまとめて表示するレイアウトにしています。
商品数が多くてもページが長くならず、コンパクトに収めることができます。
スライダーボタン部分
スライダー上部にはボタンがあります。
クリックすると商品一覧が切り替わり、次の12件を表示します。
また、時間が経つと自動的に切り替わるため、手間なく商品を閲覧することができます。
スマホ表示
こちらはスマートフォンで見たスライダーです。
スマートフォンでは、レイアウトが6列2行に切り替わります。
このようなスライダーを導入することで多くの商品をユーザーに紹介することができますし、自動的に切り替わる動作でサイトが賑やかになります。
商品数が多い・商品の入れ替わりが多い店舗などにおすすめです！