# コレクション表示セクション
### 学べること
* コレクションから商品をフィーチャーする方法
* レイアウト、タイポグラフィ、間隔、商品ホバースタイルをカスタマイズする
* セクションで次を行います: **自動切替** 商品画像を自動で切り替える機能
***
### 概要
この **コレクション表示セクション** Plain Jane および Interactive テーマでは、任意の Shopify コレクションから商品を強調表示できます。ミニマリストで画像を中心としたレイアウトで、ルックブックや注目の新作の紹介に最適です。
このセクションは次をサポートします：
* タイトル表示
* 柔軟なグリッドレイアウト（デスクトップで1〜6商品/行、モバイルで1〜3）
* カスタム間隔とホバー効果
* 次の機能を使用した自動回転する商品画像： **自動切替** 機能
> 💡 ヒント：このセクションは複数のコレクションを表示する **コレクションリストセクション**とは視覚的に異なります。ここでは単一のコレクションから商品をフィーチャーします。
***
### 使い方
1. 「 **テーマエディター**」で、クリック **セクションを追加** → **コレクション表示**.
2. の下で **コンテンツとデータ**:
* から選択してください **コレクション** あなたの Shopify ストアから。
* を追加： **セクションタイトル** （任意）。
3. 「 **レイアウトと表示** パネル：
* 調整: **テキストの配置** （左、中央、右）。
* 表示するかどうかを切り替えます **タイトル**, **価格**, **比較価格**、および「 **売り切れ**, **予約注文**、または **セール**.
* 設定する： **行あたりの商品数** （デスクトップとモバイルの両方）。
***
### 自動切替機能
> 🎯 目的：商品画像を自動で切り替えて視覚的な魅力を高めます。
を有効にすると **自動切替** の下で **画像ホバー効果**、製品画像は（Shopify にアップロードされていれば）複数の角度やスタイルに切り替わります。
#### 有効化方法
1. スクロールして **画像ホバー効果**.
2. 選択：
* `すべての画像を自動切替する`
* または、次を使用して数を制限します **その他** ドロップダウン： `すべての画像をループ`, `最初の2枚に制限`、など。
3. 調整: **画像切替時間** （デフォルト：550ms）。
> 💡 ヒント：最良の結果を得るには、Shopify 上で商品に複数の画像があることを確認してください。画像が1枚のみの商品の場合、この機能は有効になりません。
***
### タイポグラフィ
次の項目のフォントサイズを調整できます：
* セクションタイトル
* 商品タイトル
* 商品価格
コントロールはデスクトップとモバイルで別々に利用できます。
***
### 色
カスタマイズ：
* 背景色
* セクションタイトルの色
* 商品タイトルの色
***
### 間隔
次の詳細なコントロールを含みます：
* 上下のパディング（デスクトップとモバイル）
* セクションタイトルと商品間のスペース
* 商品画像、タイトル、価格間のスペース
* 商品の間および行間のギャップ
***
### すべて見るボタン
コレクション全体へのリンクとなるCTAを追加できます：
* テキストの **ボタン背景色**
* テキストの **ボタン文字色**
***
### **ヘルプが必要ですか？**
* 💬 **Discordでコミュニティに参加：**
* 📧 **メールでお問い合わせ：**
* 💻 **ライブチャット：** 月〜金、現地時間午前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/sections-and-features/collection-display-section.md?ask=
```
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.