> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/english-ja/plain-jane-interactive/pages-and-menus/product-page/product-section-showcase.md). # 製品セクション（ショーケース） > **学べること** > > * Plain Janeで「ショーケース」製品レイアウトを設定およびカスタマイズする方法 > * モバイルの配置、スクロールバー、ズーム、ポップアップのスタイリングなどの主要なデザインオプション > * 最高の顧客体験のためにこのレイアウトを使用すべきタイミング *** ### 🖼 ショーケースレイアウトとは？ この **ショーケースレイアウト** は中央に配置された画像レイアウトで、製品情報が両側に表示されます。バリアント選択や購入ボタンを簡単にアクセスできる状態で、イメージを強調したいミニマルでモダンなストアに最適です。 このレイアウトは次で利用できます： * ✅ Plain Jane v3＋ * ✅ Plain Jane Interactive v2+ *** ### 🔧 ショーケースレイアウトを有効にする方法 1. 移動先： **オンラインストア > テーマ > カスタマイズ** 2. 上部のドロップダウンで選択してください **製品 > デフォルト製品** 3. 左のサイドバーでクリックします **セクションを追加 > 製品セクション［ショーケース］** 4. 他の製品レイアウトセクション（例： `製品セクション` または `製品セクション［スクロール］`) 5. ）は非表示にします。セクションをクリックしてレイアウトを設定します > 💡 ヒント：セクションタイトルの横にある「...」メニューで、このセクションの名前を変更するとナビゲーションが簡単になります。 *** ### ⚙️ レイアウトと表示設定 製品セクション［ショーケース］を選択した後、右側のサイドバーにあります `製品セクション［ショーケース］` セクション。 #### レイアウト（デスクトップ） * ギャラリーと製品情報の配置に使用する複数のレイアウトスタイルから選択します * `ギャラリー中央 – バリアント右` *（デフォルト）* #### モバイル製品情報の配置 * モバイルで製品テキストを次に揃えます `左`, `中央`、または `右` #### 説明をボタンの下に移動（モバイル） * オンに切り替えると説明やアコーディオンを配置します *下に* 「カートに追加」ボタン *** ### 📊 モバイルスクロール進行バー モバイル画像ギャラリーにスクロールインジケーターを追加： * **トラックカラー** – 背景バー（グラデーションまたは単色） * **インジケーターカラー** – 前景のスクロールインジケーター *** ### 🔍 モバイルズームボタン * モバイルで画像ズームアイコンを表示/非表示に切り替えます * ボタンの色をカスタマイズ（`モバイルズームボタンの色`) *** ### 🧾 追加情報ポップアップ この設定は次を制御します： **ポップアップアコーディオン** 次のような用途で使用している場合： * サイズチャート * 返品ポリシー カスタマイズ： * ポップアップの背景色 * グラデーションオーバーレイ * 透過/不透明度の設定 *** ### 🧪 プロのヒント * 最大の効果を得るために、高解像度の正方形または縦長の製品画像を使用してください * 発送、ケア、素材などの補足情報には製品アコーディオンを追加してください * このレイアウトはミニマルなフォントや落ち着いたテーマカラーと相性が良いです > ⚠️ 警告：このレイアウトは画像サムネイルや画像スクロールをサポートしていません。これらの機能が必要な場合は `サムネイル` または `スクロール` レイアウトを使用してください。 ### **ヘルプが必要ですか？** * 💬 **Discordでコミュニティに参加：** * 📧 **メールでお問い合わせ：** * 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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-showcase.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.