# コレクション表示セクション

### 学べること

* コレクションから商品をフィーチャーする方法
* レイアウト、タイポグラフィ、間隔、商品ホバースタイルをカスタマイズする
* セクションで次を行います: **自動切替** 商品画像を自動で切り替える機能

***

### 概要

この **コレクション表示セクション** Plain Jane および Interactive テーマでは、任意の Shopify コレクションから商品を強調表示できます。ミニマリストで画像を中心としたレイアウトで、ルックブックや注目の新作の紹介に最適です。

このセクションは次をサポートします：

* タイトル表示
* 柔軟なグリッドレイアウト（デスクトップで1〜6商品/行、モバイルで1〜3）
* カスタム間隔とホバー効果
* 次の機能を使用した自動回転する商品画像： **自動切替** 機能

> 💡 ヒント：このセクションは複数のコレクションを表示する **コレクションリストセクション**とは視覚的に異なります。ここでは単一のコレクションから商品をフィーチャーします。

***

### 使い方

1. 「 **テーマエディター**」で、クリック **セクションを追加** → **コレクション表示**.
2. の下で **コンテンツとデータ**:
   * から選択してください **コレクション** あなたの Shopify ストアから。
   * を追加： **セクションタイトル** （任意）。
3. 「 **レイアウトと表示** パネル：
   * 調整: **テキストの配置** （左、中央、右）。
   * 表示するかどうかを切り替えます **タイトル**, **価格**, **比較価格**、および「 **売り切れ**, **予約注文**、または **セール**.
   * 設定する： **行あたりの商品数** （デスクトップとモバイルの両方）。

***

### 自動切替機能

> 🎯 目的：商品画像を自動で切り替えて視覚的な魅力を高めます。

を有効にすると **自動切替** の下で **画像ホバー効果**、製品画像は（Shopify にアップロードされていれば）複数の角度やスタイルに切り替わります。

#### 有効化方法

1. スクロールして **画像ホバー効果**.
2. 選択：
   * `すべての画像を自動切替する`
   * または、次を使用して数を制限します **その他** ドロップダウン： `すべての画像をループ`, `最初の2枚に制限`、など。
3. 調整: **画像切替時間** （デフォルト：550ms）。

> 💡 ヒント：最良の結果を得るには、Shopify 上で商品に複数の画像があることを確認してください。画像が1枚のみの商品の場合、この機能は有効になりません。

***

### タイポグラフィ

次の項目のフォントサイズを調整できます：

* セクションタイトル
* 商品タイトル
* 商品価格

コントロールはデスクトップとモバイルで別々に利用できます。

***

### 色

カスタマイズ：

* 背景色
* セクションタイトルの色
* 商品タイトルの色

***

### 間隔

次の詳細なコントロールを含みます：

* 上下のパディング（デスクトップとモバイル）
* セクションタイトルと商品間のスペース
* 商品画像、タイトル、価格間のスペース
* 商品の間および行間のギャップ

***

### すべて見るボタン

コレクション全体へのリンクとなるCTAを追加できます：

* テキストの **ボタン背景色**
* テキストの **ボタン文字色**

***

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

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