コレクションレイアウトの設定

Plain Jane および Plain Jane Interactive 向け

学べること

• コレクションページのレイアウトをカスタマイズする方法

• 列数、間隔、画像サイズ、ホバー効果の調整方法

---

🧭 概要

この コレクションレイアウト 設定により、デスクトップとモバイルのコレクションページで商品の表示方法を制御できます。これらのオプションは、ブランドの見た目や取り扱い商品に合った理想的なショッピング体験を作成するのに役立ちます。

---

🖥️ レイアウトオプション

デスクトップの列数

• デスクトップで1行に表示する商品の数を選択してください：

  • オプション： 2, 3, 4, 5、または 6 列

モバイルの列数

• モバイルで1行に表示する商品の数を選択してください：

  • オプション： 1列 または 2列 列

💡 大きな商品画像や高級商品の場合は列数を少なくしてください

列間＆行間の間隔

商品の間隔を調整して視覚的な密度をコントロールします：

• 列間（デスクトップ）

• 行間（デスクトップ）

• 列間（モバイル）

• 行間（モバイル）

すべての値はピクセル（px）で測定され、スライダーで調整できます。

---

🖼️ 画像設定

商品画像のサイズ

• コンテナに対する商品画像の割合サイズを調整します（例：100%）

商品画像のアスペクト比

グリッド内で商品画像の形状を選択してください：

• 自然（元の画像サイズ）

• 正方形

• 縦長

• 横長

💡 を選択して 正方形 より均一なレイアウトにする

ホバー時に2枚目の画像を表示

• デスクトップでホバーしたときに商品リストの2枚目の画像を表示するにはこれをオンにします

• 別アングルや別ビューを見せるためによく使われます

---

🧪 よくあるユースケース

• ミニマルなストア — 2〜3列と大きめの間隔を使用

• 大量出品のストア — より多くの商品を表示するために4〜6列を使用

• インタラクティブな表示 — 商品のエンゲージメント向上のためにホバーで2枚目の画像を有効にする

---

ヘルプが必要ですか？

• 💬 Discordでコミュニティに参加： https://discord.gg/hcc2GvgZc6

• 📧 メールでお問い合わせ： [e-mail]

• 💻 ライブチャット： 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応