# 4. 商品ページの作成とカスタマイズ

{% embed url="<https://youtu.be/AOjRMSNwDZI>" %}

> 📓 注意: 以下の内容があります、 **新しい製品セクションショーケース** レイアウトがあり、このビデオでは説明していません。セットアップ手順と詳細については、こちらを参照してください: [製品セクションショーケース](https://openspaces-labs.gitbook.io/openspaces/pages-and-menus/product-page/product-section-showcase)

### 学べること

* Plain Jane v3 と Interactive v2 で製品ページのレイアウトをカスタマイズする方法
* 製品セクション内のすべてのブロックタイプとスタイリングオプション
* スクロールレイアウト（アーカイブ版）製品セクションの使い方
* ギャラリーサイズ、ボタンスタイル、アコーディオンなどを調整する場所

> 📓 注意: この `スクロールレイアウト` （以前は `アーカイブレイアウトと呼ばれていました`）は、デフォルトの製品セクションの古い代替版です。引き続き使用できますが、ブロックベースのカスタマイズは利用できません。

***

### 🛠️ テーマエディタで製品ページにアクセスする方法

1. 移動先： **オンラインストア** > **テーマ** > **テキストの**.
2. 画面上部中央のドロップダウンメニューを使って選択してください `製品 > デフォルト製品`.

<figure><img src="https://2153066646-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-26b0ac0faddb78fdbcabd581949b16609e550eb3%2F01-product-template.png?alt=media" alt="Product page template in theme customizer"><figcaption><p>テーマカスタマイザー内の製品ページテンプレート</p></figcaption></figure>

3. 別の製品をプレビューするには、プレビューのバーで **変更:** をクリックして別のアイテムを選択します。

***

### 🧱 コア製品セクションブロック

製品ページは、 `製品セクション` と個別の **ブロックで構成されています** それぞれを並べ替え、削除、またはカスタマイズできます。

**一般的なブロック:**

* **セール中ラベル**: カスタムカラー、パディング、間隔
* **ヘッダー**: 製品タイトルの表示を制御
* **SKU**: オプション。利用可能な場合にSKUを表示
* **価格**: 通貨記号のあり/なしを表示
* **説明**: 単語数制限と「続きを読む」リンクをサポート
* **ギャラリー**: 親の製品セクション設定で制御
* **ボタン**: カートに追加とバリアント選択
* **アコーディオン**: サイズチャート、返品ポリシー、FAQなどに使用

> 💡 ヒント: ブロックを追加するには、 `製品セクション`、それから `ブロックを追加`.

***

### 🎛️ 製品セクションレイアウト設定

最上位の **製品セクション** をクリックしてこれらのレイアウトオプションにアクセスします:

<figure><img src="https://2153066646-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-063e17db3d840e566a6f3aefb043ee11a303bf01%2F02-product-section-showcase.png?alt=media" alt="Product Section 1 (Showcase) settings"><figcaption><p>製品セクション1（ショーケース）の設定とレイアウトオプション</p></figcaption></figure>

* **画像の位置**: `左` または `右`
* **フェードアニメーション**: 製品がどのようにフェードインするかを制御
* **ギャラリー列数**: 1〜6（ギャラリーが左にある場合のみ利用可能）
* **画像サイズ（デスクトップとモバイル）**: スライダーを使って調整

<figure><img src="https://2153066646-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-6206954acf4635f6173a2878ce73d687b9892136%2F03-product-section-thumbnail.png?alt=media" alt="Product Section 2 (Thumbnail) settings"><figcaption><p>製品セクション2（サムネイル）レイアウトの代替案</p></figcaption></figure>

> ⚠️ 一部の設定（列など）はギャラリーが左にある場合にのみ利用可能です。

<figure><img src="https://2153066646-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-e121c9dc06e40f193d4de703c35104ee8bdbda83%2F04-product-image-gallery.png?alt=media" alt="Product image gallery settings"><figcaption><p>製品画像ギャラリーの設定とカスタマイズオプション</p></figcaption></figure>

***

### 🧩 追加のブロック設定

#### セール中ラベル

* ラベルの背景色とテキスト色を変更
* バッジの周囲の間隔を調整

#### 価格表示

* 通貨記号の切り替え
* ラグジュアリー/ミニマルスタイルのフォントサイズを調整

#### 説明ブロック

* 色、マージン、単語数制限を設定
* 「続きを読む」の展開リンクを有効にする

#### ボタンとバリアント

* 次の製品ボタンの有効/無効を切り替え
* 角の半径、マージン、間隔をカスタマイズ

#### アコーディオン

* 複数を追加：例、 `サイズチャート`, `返品/交換`
* タイトルとマージンの間隔をカスタマイズ

***

### 🗂️ スクロールレイアウト製品セクション（アーカイブ）

スクロールレイアウトは、縦方向のフルギャラリーを表示する製品セクションのアーカイブ版です。

#### 使用方法:

1. クリック： **セクションを追加** > `製品セクション スクロール`
2. 重複を避けるために現在の製品セクションを非表示にする
3. 右側の設定パネルでカスタマイズする（このバージョンはブロックを使用しません）

#### 主な違い:

* すべての画像が積み重なった縦スクロールギャラリー
* モバイルや長尺の製品ストーリーテリングに最適
* ブロックサポートなし — すべての設定はセクションパネルで構成
* カスタマイズ機能が少ない（例：角の丸みなし）

> 💡 ヒント: 以前のテーマバージョンの古いスクロール体験が好みの場合は、これを使用してください。

***

### ➕ 製品ページに追加セクションを追加する

製品ページには、他のページと同様にShopifyのテーマセクションを追加できます:

* `イメージストリーム`
* `メール登録`
* `スライドショー`
* `コレクションリスト`

これらを並べ替え、ブランドスタイルに合わせてカスタマイズしてください。

### **ヘルプが必要ですか？**

* 💬 **技術サポートはDiscordで参加してください：** <https://discord.gg/hcc2GvgZc6>
* 📧 **メールでお問い合わせ：** <support@openspaces.design>
* 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応