1. オンラインマニュアル
  2. よく使われる機能&活用法ガイド
  3. 使いこなそうコマースクリエイター
  4. 商品一覧の「商品表示数(カラム数)」を変更する
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル

商品一覧の「商品表示数(カラム数)」を変更する

表示イメージ:「商品一覧」画面(3列表示)(例)

※表示イメージはスタートアップテーマ(カスタマイズ前)です。
利用するパーツや項目設定により表示内容やレイアウトを変更することができます。

表示イメージと解説

スタートアップテーマの初期状態について

スタートアップテーマの商品一覧(商品グループ・商品検索結果など)の横方向の表示商品数は、レスポンシブ対応のためCSSにてデザインされています。
初期状態では以下のように表示されます。

  • ウィンドウ幅599px以下:2列表示
  • ウィンドウ幅600px以上:3列表示
  • ウィンドウ幅768px以上:4列表示
  • ウィンドウ幅960px以上:5列表示

変更用CSSサンプルについて

下記に横方向の商品数変更用CSSのサンプル(上書き用CSS)を掲載しています。商品表示件数200件に対応しています。
以下いずれかの方法でECサイトに適用していただけます。

  1. コマースクリエイター>テーマ>オリジナルCSSに貼り付けます。
  2. CSSファイルとして保存していただき、コマースクリエイター>アイテム一覧にアップロード。CSSファイルのLINKタグを記述したフリーパーツを作成し、商品グループ・商品検索結果などのレイアウトに配置します。

なお、商品表示件数は設定>商品・商品グループ>商品一覧ページ設定-商品一覧表示件数設定-商品グループページの商品一覧に表示する商品数構築>ページ設定>商品ページ設定-商品表示件数設定 (コマースクリエイター)-商品一覧に表示する商品数で変更できます。

最大表示列数2列

ウィンドウ幅にかかわらず2列表示固定となります。

最大表示列数3列

ウィンドウ幅599px以下なら2列表示、ウィンドウ幅600px以上なら3列表示となります。

最大表示列数4列

ウィンドウ幅599px以下なら2列表示、ウィンドウ幅600px以上なら3列表示、ウィンドウ幅768px以上なら4列表示となります。