# 商品セクション（サムネイル） > **学べること** > > * 商品ページの「サムネイル」レイアウトの設定方法 > * ギャラリー、価格表示、ボタン、アコーディオンのすべてのカスタマイズオプション > * 商品画像と説明のフォーマットに関するベストプラクティス *** ### サムネイルレイアウトとは？ この **サムネイルレイアウト** 商品画像を縦並びまたはグリッド形式のギャラリーでサムネイル表示します。Plain Janeテーマで最も柔軟かつ広く使われているレイアウトで、複数の商品のショットがあるストアに最適です。 利用可能： * ✅ Plain Jane v3 * ✅ Plain Jane Interactive v2 *** ### 🔧 サムネイルレイアウトの有効化方法 1. 移動先： **オンラインストア > テーマ > カスタマイズ** 2. 上部のドロップダウンから選択します **商品 > デフォルト商品** 3. という名前のセクションを見つけます **製品セクション** 4. 別のレイアウト（例： `ショーケース` または `スクロール`）がアクティブな場合は、「...」>をクリックします **セクションを非表示** 5. を展開して `製品セクション` 各項目を設定します **ブロック**: * セール中ラベル * ヘッダー * 価格 * 説明 * ギャラリー * バリアントとボタン * 商品アコーディオン > 💡 ヒント: このセクション内の **ブロックを追加** ボタンを使ってブロックを追加または削除できます。 *** ### ⚙️ レイアウトのカスタマイズ メインの `製品セクション` （ブロックではなく）をクリックしてレイアウト設定にアクセスします： #### 商品ギャラリーの位置 * 画像ギャラリーをに移動します **左** または **右** #### フェードアニメーション * セクションのフェードイン時間を制御します（0 = 即時、高いほどフェードが遅くなります） #### ギャラリー列数（左側のみ） * 1〜6の間で行ごとに表示するサムネイル数を調整します #### ギャラリー画像サイズ * 画像サイズを個別に微調整します **デスクトップ** および **モバイル** *** ### 🏷 セールラベル * 表示/非表示を切替 * 背景色と文字色を設定 * ラベル周りの間隔/マージンを調整 *** ### 🧾 商品詳細 各ブロックはカスタマイズ可能です： * **ヘッダー**：タイトルのサイズ、色、マージン * **価格**：通貨の表示/非表示、フォントサイズ、価格の色 * **説明**：最大語数を設定（「続きを読む」トグルを追加） * **バリアントとボタン**: * 角の丸みと間隔を制御 * 不要な場合は「次の商品」ボタンを非表示にできます *** ### 🪜 商品アコーディオン を使って複数の折りたたみセクションを追加します **商品アコーディオン** ブロック： * タイトルを変更（例：「サイズ表」「返品・交換」） * 間隔をカスタマイズ * 任意の書式付きテキストやHTMLを追加 > 💡 ヒント: アコーディオンは最小限に抑えましょう。買い物客が圧倒されないように最大2〜3個程度にしてください。 *** ### ➕ カスタムセクションの追加 通常のテーマセクションを追加できます **商品レイアウトの下に**、例えば： * スクロールする画像ストリーム * メール登録 * 注目のコレクション *** ### 🖼 画像サイズのヒント 商品タイトル、価格、ボタンをきれいに揃えるには： * すべての商品画像を同じ **アスペクト比でアップロードしてください** * 推奨： `1000px x 1000px` 正方形ギャラリー向け ### **ヘルプが必要ですか？** * 💬 **Discordでコミュニティに参加：** * 📧 **メールでお問い合わせ：** * 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応