商品セクション(サムネイル)

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 正方形ギャラリー向け

ヘルプが必要ですか?

最終更新