商品セクション（サムネイル）

Plain Jane および Plain Jane Interactive 向け

学べること

• 商品ページの「サムネイル」レイアウトの設定方法

• ギャラリー、価格表示、ボタン、アコーディオンのすべてのカスタマイズオプション

• 商品画像と説明のフォーマットに関するベストプラクティス

---

サムネイルレイアウトとは？

この サムネイルレイアウト 商品画像を縦並びまたはグリッド形式のギャラリーでサムネイル表示します。Plain Janeテーマで最も柔軟かつ広く使われているレイアウトで、複数の商品のショットがあるストアに最適です。

利用可能：

• ✅ Plain Jane v3

• ✅ Plain Jane Interactive v2

---

🔧 サムネイルレイアウトの有効化方法

1. 移動先： オンラインストア > テーマ > カスタマイズ

2. 上部のドロップダウンから選択します 商品 > デフォルト商品

3. という名前のセクションを見つけます 製品セクション

4. 別のレイアウト（例： ショーケース または スクロール）がアクティブな場合は、「...」>をクリックします セクションを非表示

5. を展開して 製品セクション 各項目を設定します ブロック:

   • セール中ラベル

   • ヘッダー

   • 価格

   • 説明

   • ギャラリー

   • バリアントとボタン

   • 商品アコーディオン

💡 ヒント: このセクション内の ブロックを追加 ボタンを使ってブロックを追加または削除できます。

---

⚙️ レイアウトのカスタマイズ

メインの 製品セクション （ブロックではなく）をクリックしてレイアウト設定にアクセスします：

商品ギャラリーの位置

• 画像ギャラリーをに移動します 左 または 右

フェードアニメーション

• セクションのフェードイン時間を制御します（0 = 即時、高いほどフェードが遅くなります）

ギャラリー列数（左側のみ）

• 1〜6の間で行ごとに表示するサムネイル数を調整します

ギャラリー画像サイズ

• 画像サイズを個別に微調整します デスクトップ および モバイル

---

🏷 セールラベル

• 表示/非表示を切替

• 背景色と文字色を設定

• ラベル周りの間隔/マージンを調整

---

🧾 商品詳細

各ブロックはカスタマイズ可能です：

• ヘッダー：タイトルのサイズ、色、マージン

• 価格：通貨の表示/非表示、フォントサイズ、価格の色

• 説明：最大語数を設定（「続きを読む」トグルを追加）

• バリアントとボタン:

  • 角の丸みと間隔を制御

  • 不要な場合は「次の商品」ボタンを非表示にできます

---

🪜 商品アコーディオン

を使って複数の折りたたみセクションを追加します 商品アコーディオン ブロック：

• タイトルを変更（例：「サイズ表」「返品・交換」）

• 間隔をカスタマイズ

• 任意の書式付きテキストやHTMLを追加

💡 ヒント: アコーディオンは最小限に抑えましょう。買い物客が圧倒されないように最大2〜3個程度にしてください。

---

➕ カスタムセクションの追加

通常のテーマセクションを追加できます 商品レイアウトの下に、例えば：

• スクロールする画像ストリーム

• メール登録

• 注目のコレクション

---

🖼 画像サイズのヒント

商品タイトル、価格、ボタンをきれいに揃えるには：

• すべての商品画像を同じ アスペクト比でアップロードしてください

• 推奨： 1000px x 1000px 正方形ギャラリー向け

ヘルプが必要ですか？

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

• 📧 メールでお問い合わせ： [email protected]

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