商品一覧の「商品表示数(カラム数)」を変更する
※表示イメージはスタートアップテーマ(カスタマイズ前)です。
利用するパーツや項目設定により表示内容やレイアウトを変更することができます。
表示イメージと解説
スタートアップテーマの初期状態について
スタートアップテーマの商品一覧(商品グループ・商品検索結果など)の横方向の表示商品数は、レスポンシブ対応のためCSSにてデザインされています。
初期状態では以下のように表示されます。
- ウィンドウ幅599px以下:2列表示
- ウィンドウ幅600px以上:3列表示
- ウィンドウ幅768px以上:4列表示
- ウィンドウ幅960px以上:5列表示
変更用CSSサンプルについて
下記に横方向の商品数変更用CSSのサンプル(上書き用CSS)を掲載しています。商品表示件数200件に対応しています。
以下いずれかの方法でECサイトに適用していただけます。
- コマースクリエイター>テーマ>オリジナルCSSに貼り付けます。
- CSSファイルとして保存していただき、コマースクリエイター>アイテム一覧にアップロード。CSSファイルのLINKタグを記述したフリーパーツを作成し、商品グループ・商品検索結果などのレイアウトに配置します。
なお、商品表示件数は設定>商品・商品グループ>商品一覧ページ設定-商品一覧表示件数設定-商品グループページの商品一覧に表示する商品数構築>ページ設定>商品ページ設定-商品表示件数設定 (コマースクリエイター)-商品一覧に表示する商品数で変更できます。
最大表示列数2列
ウィンドウ幅にかかわらず2列表示固定となります。
最大表示列数3列
ウィンドウ幅599px以下なら2列表示、ウィンドウ幅600px以上なら3列表示となります。
最大表示列数4列
ウィンドウ幅599px以下なら2列表示、ウィンドウ幅600px以上なら3列表示、ウィンドウ幅768px以上なら4列表示となります。