# 商品ページ

> **学べること**
>
> * Plain Jane v3.1で利用可能なさまざまな商品ページのレイアウトオプション
> * Product Section 2とProduct Section 3のレイアウトを切り替える方法
> * 各レイアウトの主な機能とカスタマイズオプション
> * 追加の製品関連セクションと機能

***

## 🎯 利用可能な商品セクション

Plain Jane v3.1は2つの主要な商品ページレイアウトを提供します：

### **Product Section 3** （デフォルトレイアウト）

高度なグリッドシステム、下部モーダル機能、および幅広いカスタマイズオプションを備えたモダンで柔軟なレイアウト。これは新しいPlain Jane v3.1インストールで使用されるデフォルトのセクションです。

**主な機能：**

* 高度なグリッドベースの画像ギャラリー
* モバイル向けの下部モーダルインターフェース
* 強化されたメディア処理（画像、動画）
* 高度なバリアント選択機能
* モデル情報のサポート
* カラースウォッチとサイズチャート
* モバイル最適化された体験

### **Product Section 2** （代替レイアウト）

サムネイルとクラシックな商品情報表示を備えた、より伝統的なサイドバイサイドのレイアウト。

**主な機能：**

* 従来のサムネイルギャラリー
* 画像と製品情報のサイドバイサイドレイアウト
* 設定可能な画像配置
* カスタマイズ可能なギャラリー列数
* モバイル対応デザイン

***

## 🔧 レイアウトを切り替える方法

1. 移動先： **オンラインストア > テーマ > カスタマイズ**
2. に移動 **商品 > デフォルト商品**
3. 商品テンプレートエディタ内で：
   * 現在の商品セクションを削除する
   * クリック： **「セクションを追加」**
   * 次のいずれかを選択する：
     * **Product Section 3** （モダンなストアに推奨）
     * **Product Section 2** （伝統的なレイアウト）

***

## 📱 追加の製品関連セクション

Plain Jane v3.1には、商品ページ体験を強化するいくつかの追加セクションが含まれています：

* **関連商品** - 類似または補完的な商品を表示
* **製品ロゴセクション** - カートとナビゲーションを備えたカスタマイズ可能なヘッダー
* **商品ページの背景** - 商品ページのカスタム背景
* **製品ナビゲーション** - 商品間の強化されたナビゲーション
* **商品タイポグラフィ** - 商品ページ向けのカスタムタイポグラフィ設定

***

## 📚 詳細なドキュメント

完全なセットアップ手順とカスタマイズオプションについては：

* [Product Section 3（デフォルト）](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane/pages-and-menus/product-page/broken-reference/README.md) - モダンレイアウトガイド
* [Product Section 2（代替）](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane/pages-and-menus/product-page/broken-reference/README.md) - 伝統的レイアウトガイド

***


---

# Agent Instructions: 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/readme-1/pages-and-menus/product-page.md?ask=<question>
```

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.