> 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/readme-1/pages-and-menus/collection-page/classic-collection.md).

# Classic Collection

Plain Jane Starter、Plain Jane、Plain Jane Interactive 向け

### 学べること

* コレクションページでクラシックコレクションセクションを有効化および設定する方法
* 組み込みの製品並び替え機能の使い方
* スタイルとラベルの調整方法

<figure><img src="https://2153066646-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-61c88b7b0849f69343b1d9a914af0963cf3b635f%2FScreenshot%202025-05-23%20at%202.51.44%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

***

### 1. クラシックコレクションセクションを追加する

1. Shopify管理画面で、次に移動します **オンラインストア > テーマ**.
2. クリック： **テキストの** アクティブなテーマの上で。
3. から **コレクション** ページテンプレートで、次を追加します **Classic Collection** セクション。

> 💡 ヒント: このセクションは並び替え、製品ラベル（予約注文、セール中、在庫切れ）および詳細な表示設定をサポートします。

***

### 2. 並び替えオプションを追加して設定する

「おすすめ」「価格の安い順」「新着順」など複数の並び替えタイプを追加できます。

#### 手順:

1. 内の **Classic Collection** セクション設定で、新しい **並び替えオプション** ブロックを追加します。
2. 各項目について:
   * を設定する **オプションタイトル** （ユーザーが目にする表示）
   * を選択 **並び替え基準** の方法（例: おすすめ、価格、日付）

***

### 3. コレクションレイアウトのスタイル設定

クラシックコレクションセクションはレイアウトやタイポグラフィの多くのオプションを提供します：

#### カート＆ヘッダー設定：

* 日付/時刻の切り替え
* カートアイコンの色を設定

#### コレクションメニュー：

* メニューの位置と配置
* リンクの間隔とフォントサイズ
* メニューの色（ホバー、サブメニューなど）

!\[スクリーンショットのプレースホルダー - コレクションメニューのスタイリング]

#### 商品タイトルと価格：

* フォントサイズと色
* 比較価格のスタイリング
* 通貨表示形式の切り替え

***

### 4. ラベルの管理

商品ラベルの表示/非表示や見た目を変更できます：

* **予約注文**
* **セール中**
* **在庫切れ**

ラベルの背景色、文字色、フォントサイズを調整できます。

***

### 5. 背景とアイコン

セクションの視覚的な見た目を制御します：

* 商品の背景色と角丸（ボーダー半径）
* 検索および並び替えアイコンの色と配置

***

### 6. ページネーション設定

の選択： **無限スクロール** または **ページネーション** とナビゲーション要素のスタイル設定：

* 現在のページの色を設定
* 矢印アイコンやフォントをカスタマイズ

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

* 💬 **Discordでコミュニティに参加：** <https://discord.gg/hcc2GvgZc6>
* 📧 **メールでお問い合わせ：** <support@openspaces.design>
* 💻 **ライブチャット：** 月〜金、現地時間午前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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.openspaces.design/english-ja/readme-1/pages-and-menus/collection-page/classic-collection.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
