# コレクションページ

> **学べること**
>
> * クラシックレイアウトとサイドバーコレクションレイアウトの違い
> * コレクションページにカスタムメニューを接続する方法
> * 商品の表示とデザイン設定をカスタマイズするためのヒント

***

### 🧱 コレクションレイアウトのオプション

Plain Janeには含まれます **2つのレイアウトタイプ** コレクションページ用：

| レイアウトタイプ               | 説明                                    |
| ---------------------- | ------------------------------------- |
| **Classic Collection** | 固定されたカテゴリメニューとソート／検索アイコンを備えたミニマルなデザイン |
| **サイドバー コレクション**       | 高度なレイアウトと背景オプションを備えたカスタマイズ可能なサイドバーを含む |

これらのレイアウトは、を有効／無効にすることで切り替えできます `Classic Collection` または `サイドバー コレクション` セクションは、にあります **テーマエディター**.

> 💡 ヒント：コレクションセクションは同時に1つだけ使用してください（もう一方は非表示にしてください）。

***

### 🔗 カスタムコレクションメニューを接続する

コレクションページ用のカスタムナビゲーションメニューを作成するには：

1. 移動先： **オンラインストア > ナビゲーション** Shopify管理画面で
2. クリック： **メニューを追加** に名前を付けます（例： `ショップメニュー`)
3. カテゴリのリンクを追加します（例：トップス、ボトムス、アクセサリー）
4. （任意）2階層目／3階層目のドロップダウンのために項目をネストする
5. クリック： **保存**

次に：

1. を開く **テーマエディター**
2. を選択します **コレクション > \[あなたのコレクション]** 上部のドロップダウンから
3. をクリックします `Classic Collection` または `サイドバー コレクション`
4. の下で **コレクションメニューを選択**、先ほど作成したメニューを選びます

***

### ⚙️ 主要なレイアウト設定

#### 🧭 メニュー設定

* **位置**： 左または右
* **テキストの配置**：左、中央、または右
* **フォントサイズと間隔**： トップレベルとネストされたメニューリンクの間隔を調整

#### 🎨 スタイル設定

* **メニューの色**： リンク、ホバー、および背景色をカスタマイズ
* **商品タイトルと価格**： 表示／非表示、サイズ調整、色の変更
* **商品ラベル**： カスタム色とサイズで「セール中」タグを有効にする

> 💡 ヒント：商品グリッドを整列させるには、一貫した画像サイズ（例：1000x1000px）を使用してください。

***

### 🖼 商品画像のスタイリング

* **商品フレーム**： 色と太さを調整できるホバー時のアウトラインを追加
* **画像の角**： 鋭角または丸みのあるエッジのために背景の半径を調整
* **背景色**： 画像が透過でアップロードされている場合にのみ機能します `.png`

```
カスタム背景色を有効にするには：
- 透過PNGを使用する
- 「背景を透過にする」をオフに切り替える
```

***

### 🔍 検索とソートのコントロール

* **アイコンの位置**：左、中央、または右
* **表示切替**： アイコンを個別に非表示または表示する
* **カラー設定**： アイコンと背景の色をカスタマイズ
* **検索バーオーバーレイ**： 不透明度と背景色を調整

顧客がフィルターまたはソートのアイコンをクリックしたとき：

* フィルターアイコンはドラッグ可能な検索オーバーレイを開きます
* ソートアイコンは価格、新着、A-Z、またはおすすめで並べ替えることを可能にします

***

### 🧰 サイドバーコレクションの追加機能（サイドバーレイアウトのみ）

* **サイドバースキンをアップロード**： 背景画像またはパターンを追加
* **サイドバーの不透明度**： サイドバーの透明度を制御
* **固定サイドバー**： ユーザーがスクロールしても固定位置にすることを有効にする
* **サイドバーシャドウ**： 深みを出すための控えめなエッジシャドウを追加

***

### 🛠 手動での商品並び替え

> ⚠️ 重要：コレクション内の商品の順序を制御するには、並べ替えタイプをに設定してください **手動**.

手順:

1. 移動先： **商品 > コレクション** Shopify管理画面内に
2. コレクションを選択してクリックします **並べ替え > 手動**
3. 必要に応じて商品をドラッグして並べ替えます

この順序はフロントエンドのコレクションページに反映されます。

***

### 📌 商品画像に関する注意事項

* ずれた商品タイトル／価格は通常、画像サイズの不一致が原因です
* 視覚的な整列を最適にするには、均一な正方形の画像（例：1000x1000）を使用してください

***

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

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


---

# 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/collection-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.