# 3. コレクションページの作成とカスタマイズ

{% embed url="<https://www.youtube.com/watch?v=_KZdEQFOLfM>" %}

### 学べること

* Shopifyでコレクションを作成・整理する方法
* コレクションページにメニューを作成して割り当てる方法
* Plain Jane v3およびInteractive v2テーマで「Classic Collection」と「Sidebar Collection」を使用およびカスタマイズする方法
* 余白、フォント、色、商品表示オプションなどのデザイン設定を編集する方法

### 🛠️ はじめに：Shopifyセットアップの基本

このセクションはストアを初めて設定する初心者向けです。

#### 1. 商品コレクションを作成する

1. に移動します **Shopify 管理画面** > **製品** > **コレクション**.
2. クリック： **コレクションを作成**.
3. コレクションに名前を付けます（例： `トップス`, `ボトムス`, `アクセサリー`).
4. コレクションの **種類** を `手動`.

   > ⚠️ 手動コレクションでは商品順序を手動で管理できます。
5. クリック： **保存**、次に **参照** ボタンを使って商品を追加します。

各カテゴリについて繰り返します。

#### 2. コレクションサイドバー用のメニューを作成する

1. 移動先： **オンラインストア** > **ナビゲーション**.
2. クリック： **メニューを追加**.
3. 〜のような名前にします `ショップメニュー`.
4. 次のようなリンクを追加します：
   * `トップス` → あなたの `トップス` コレクションへのリンク
   * `ボトムス` → あなたの `ボトムス` コレクションへのリンク
   * `アウターウェア`, `フットウェア`、など。
5. 項目をドラッグしてネスト（入れ子）にできます（例： `ショーツ` の下で `ボトムス`).
6. クリック： **メニューを保存**.

***

### 🎨 テーマのカスタマイズ：コレクションページ

これらの手順は以下の両方に適用されます **Plain Jane v3** および **Interactive v2** テーマ。

1. に移動 **オンラインストア** > **テーマ** > **テキストの**
2. ページセレクタードロップダウンを使って切り替えます **コレクション** テンプレート

#### Classic Collectionセクション

1. 移動先： **オンラインストア** > **テーマ** > **テキストの**.
2. 左のパネルから、を選択します **コレクションページ** テンプレート。
3. ラベルが付いたセクションを探します **Classic Collection**.

**主な設定：**

* **メニューを選択**： 作成したカスタム `ショップメニュー` を割り当てます。
* **メニュー位置**： 選択 `左` または `右`.
* **テキストの配置**： のオプション `左`, `中央`、または `右`.
* **フォントサイズと間隔**： メニューとリンクの間隔を調整します。
* **メニューの色**： 背景色と文字色をカスタマイズします。
* **商品タイトル/価格を表示**： 可視性を切り替え、フォントサイズと色を調整します。
* **商品フレーム**： 枠線やホバーエフェクトを追加します。
* **商品背景の角丸**： 角をシャープから丸めまで調整します。
* **背景を透過にする**： 透過PNGと相性が良い設定です。

#### 検索と並べ替えのオプション

* **位置**： アイコンの配置 `左`, `中央`、または `右`.
* **色**： アイコンとドロップダウンメニューの色をカスタマイズします。
* **検索オーバーレイの設定**:
  * 調整: **背景の不透明度**
  * 設定する： **検索ボックスの背景色**
* **並べ替えメニュー**： 商品をどのように並べ替えるかを選択します： `注目商品`, `新着順`, `価格`、など。

#### セールラベル

* 「セール中」などの割引ラベルを表示
* ラベルのカスタマイズ **フォントサイズ**, **文字色**、および **背景色**

#### PNGを使用した商品のアップロード

> 💡 補足：テーマエディタで背景色をコントロールしたい場合は透過PNGを使用してください。

***

### 🧭 サイドバーコレクション（任意）

より従来型のレイアウトにしたいですか？代わりにサイドバーコレクションを使用してください。

1. 同じ **コレクションページ** テンプレートで、 **を非表示にする** その `Classic Collection` セクション。
2. **サイドバーコレクションを有効にする** 代わりに。

**サイドバーコレクションの設定：**

* を割り当てる `メニュー`
* サイドバーの位置： `左` または `右`
* **サイドバーの背景をアップロード** （「スキン」と呼ばれる）
* 調整: **不透明度**, **影**、および **固定スクロール** 動作

> 💡 補足：固定サイドバーはスクロール時も表示されたままになります。

商品情報、ラベル、検索/並べ替えアイコンなどの他の表示設定はClassic Collectionセクションと同じように動作します。

***

### ✅ 最終メモ

* 変更を加えたら必ず **保存** 変更後はテーマエディタでを確認してください。
* 変更がすぐに反映されない場合は、ページをリロードしてみてください。
* レイアウトを揃えるために商品画像のサイズを揃えてください（例：1000x1000px）。

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

* 💬 **技術サポートは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/getting-started/3.-creating-and-customizing-your-collections-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.