# 商品セクション（サムネイル） > **学べること** > > * 商品ページの「サムネイル」レイアウトの設定方法 > * ギャラリー、価格表示、ボタン、アコーディオンのすべてのカスタマイズオプション > * 商品画像と説明のフォーマットに関するベストプラクティス *** ### サムネイルレイアウトとは？ この **サムネイルレイアウト** 商品画像を縦並びまたはグリッド形式のギャラリーでサムネイル表示します。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）に当社ウェブサイトで直接対応 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/english-ja/plain-jane-interactive/pages-and-menus/product-page/product-section-thumbnail.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.