こんにちは、竹内です。
「Magento2 新・標準デザインテーマの解説」、今回は「商品一覧ページ」についての紹介です。
Magento2の商品一覧（グリッド表示）
上の画像は左から順に、Magento2標準デザインテーマのPC、タブレット、スマホの商品一覧ページ（グリッド表示）です。
PC幅では4列、タブレットでは3列、スマホでは2列ずつ商品が表示されています。
商品にロールオーバーでカートボタンを表示
PC・タブレット幅：商品ロールオーバー時
PC、タブレットでは、商品一覧ページの各商品にマウスオーバーすると商品が枠で囲まれ、「カートボタン」「欲しいものリストに追加アイコン」「比較リストに追加アイコン」が表示されます。ここで「カートボタン」をクリックすると、商品詳細ページに遷移することなく直接カートに追加されます。
スマホ版では、マウスオーバーの挙動はなく、クリックすることで商品詳細ページに遷移します。
より整理されたツールバー
1）PC幅、タブレット幅
PC・タブレット幅：ツールバー
商品一覧には【ツールバー】という要素が表示されます。
【ツールバー】には「表示切り替えナビ」「商品数」「ソート切り替えナビ」「ページングナビ」「表示数切り替えナビ」といった、商品一覧を閲覧するために利用する要素がまとめられています。
Magento1.9標準では、商品一覧の上下に同じものをそれぞれ配置していましたが、新デザインでは、上部に「表示切り替えナビ」「商品数」「ソート切り替えナビ」、下部に「ページングナビ」「表示数切り替えナビ」と、分割して配置しています。
2）スマホ幅
スマホ幅：ツールバー
スマホでは、上部のツールバーのグリッド・リストの表示を切り替える「表示切り替えナビ」が非表示になっています（CSSで非表示にされているだけなので、必要であれば表示することができますし、切り替え機能自体も利用可能です）。
また、下部のツールバーでは、「表示数切り替えナビ」が非表示になっています。
スマホ幅のレイヤードナビ
スマホ幅：絞込ナビ
PC幅、タブレット幅ではサイドカラムに配置されている「レイヤードナビ」は、スマホではツールバー内に配置されます。
リスト表示の場合の商品一覧
Magento2 商品一覧（リスト表示）
リスト表示は、PC、タブレット、スマホ と大きくレイアウトは変わりません。