商品セクション（ショーケース）
Plain Jane および Plain Jane Interactive 向け
あなたが学ぶこと
Plain Janeで「ショーケース」商品レイアウトを設定・カスタマイズする方法
モバイルの配置、スクロールバー、ズーム、ポップアップのスタイリングなどの主要なデザインオプション
最良の顧客体験のためにこのレイアウトを使用すべき場面
🖼 ショーケースレイアウトとは？
この ショーケースレイアウト は、中央に配置された画像レイアウトで、製品情報が両側に表示されます。これは、イメージを強調しつつバリアント選択や購入ボタンを簡単にアクセスできるようにしたい、ミニマルでモダンなストアに最適です。
このレイアウトは次で利用できます：
✅ Plain Jane v3+
✅ Plain Jane Interactive v2+
🔧 ショーケースレイアウトを有効にする方法
に移動 オンラインストア > テーマ > カスタマイズ
上部のドロップダウンで選択します Products > Default product
左のサイドバーでクリックします Add Section > Product Section [Showcase]
（次のような）他の製品レイアウトセクションを非表示にします
Product SectionまたはProduct Section [Scroll])セクションをクリックしてレイアウトを設定します
💡 ヒント：セクションタイトル横の「...」メニューから、このセクションの名前を変更してナビゲーションを簡単にできます。
⚙️ レイアウトと表示設定
を選択した後、右側サイドバーにあります Product Section [Showcase] セクション。
デスクトップ用レイアウト
ギャラリーと製品情報の配置に使える複数のレイアウトスタイルから選択します
ギャラリー中央 – バリアント右（デフォルト）
モバイル製品情報の配置
モバイルで製品テキストを次に揃えます
左,中央、または右
説明をボタンの下に移動（モバイル）
ONに切り替えると、説明やアコーディオンを配置します の下に 「カートに追加」ボタン
📊 モバイル用スクロール進行バー
モバイル画像ギャラリーにスクロールインジケーターを追加：
トラックカラー – 背景バー（グラデーションまたは単色）
インジケーターカラー – 前景のスクロールインジケーター
🔍 モバイルズームボタン
モバイルで画像ズームアイコンを表示／非表示に切り替えます
ボタンの色をカスタマイズ（
モバイルズームボタンの色)
🧾 追加情報ポップアップ
この設定は、次のような用途で使用する場合の ポップアップアコーディオン を制御します：
サイズチャート
返品ポリシー
カスタマイズ：
ポップアップの背景色
グラデーションオーバーレイ
透過／不透明度の設定
🧪 プロのコツ
最も効果的なのは高解像度の正方形または縦長の製品画像を使用することです
配送、ケア、素材などの補足情報には製品アコーディオンを追加してください
このレイアウトはミニマリストなフォントと落ち着いたテーマカラーと相性が良いです
⚠️ 警告：このレイアウトは画像サムネイルや画像スクロールをサポートしていません。必要な場合は
サムネイルまたはスクロールのレイアウトを使用してください。
ヘルプが必要ですか？
💬 Discord のコミュニティに参加してください： https://discord.gg/hcc2GvgZc6
📧 メールでお問い合わせ： [email protected]
💻 ライブチャット： 月〜金、現地時間（EST）10:00〜18:00 に当社ウェブサイトで直接利用可能
最終更新