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

Plain Jane および Plain Jane Interactive 向け

学べること

  • 製品ページで「サムネイル」レイアウトを設定する方法

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

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

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

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

利用可能：

  • ✅ Plain Jane v3

  • ✅ Plain Jane Interactive v2

🔧 サムネイルレイアウトを有効にする方法

  1. に移動します オンラインストア > テーマ > カスタマイズ

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

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

  4. 別のレイアウト（例： Showcase または Scroll)が有効になっている場合、「...」をクリックして> セクションを非表示

  5. を展開し、 商品セクション を構成します ブロック:

    • セールラベル

    • ヘッダー

    • 価格

    • 説明

    • ギャラリー

    • バリアントとボタン

    • 製品アコーディオン

💡 ヒント: 必要に応じて、このセクション下の ブロックを追加 ボタンでブロックを追加または削除できます。

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

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

製品ギャラリーの位置

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

フェードアニメーション

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

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

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

ギャラリー画像サイズ

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

🏷 セールラベル

  • 表示・非表示を切り替え

  • 背景色とテキスト色を設定

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

🧾 製品詳細

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

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

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

  • 説明: 最大語数を設定（「続きを読む」トグルが追加されます）

  • バリアントとボタン:

    • 角の半径と間隔を制御

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

🪜 製品アコーディオン

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

  • タイトルをリネームします（例：「サイズチャート」「返品・交換」）

  • 間隔をカスタマイズ

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

💡 ヒント: アコーディオンは最小限に保ってください。閲覧者を圧倒しないよう最大2〜3つを推奨します。

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

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

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

  • メール登録フォーム

  • 注目コレクション

🖼 画像サイズのヒント

製品タイトル、価格、ボタンをきれいに整列させるために：

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

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

ヘルプが必要ですか？

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

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

  • 💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能

前へ商品セクション（ショーケース）次へAbout ページ

最終更新