# プロダクトカルーセルセクション

### **学べること**

* 製品を横方向にスクロールできるレイアウトで表示する方法
* 製品のラベル、価格表示、バッジをカスタマイズする方法
* 製品の間隔、タイポグラフィ、色を調整する方法
* デスクトップとモバイルのレイアウト設定を指定する方法

***

### 🧩 セクション概要

「Product Carousel」セクションは、注目の製品を横にスクロールできる行で表示します。特定のコレクションを宣伝したり、ベストセラーを強調したりするのに最適です。製品には価格、ラベル（「セール」や「売り切れ」など）、およびカスタムレイアウト設定を含めることができます。

***

### セクションの追加方法

1. 「 **Shopify テーマエディタ**」で、クリック **「セクションを追加」**
2. を選択 **⚠️ 警告: これは**
3. セクションをページ上の表示したい場所にドラッグ＆ドロップします

***

### コンテンツとデータの設定

* **セクションタイトル**：カルーセルの見出しを追加します（例：「注目の製品」）
* **ショップリンクのテキスト**：コールトゥアクションボタンを追加します（例：「全て見る」）
* **ショップリンクのURL**：コレクションまたはページのリンクを貼り付けます

***

### レイアウトと表示オプション

* **製品テキストの配置**：タイトルを左寄せ、中央、または右寄せにします
* 次のオプションを切り替えます：
  * **商品タイトルを表示**
  * **商品価格を表示**
  * **比較価格を表示**
  * **売り切れバッジを表示**
  * **セールバッジを表示**
  * **予約注文バッジを表示**

> 💡 ヒント：バッジを有効にして割引や在庫状況を強調しましょう。

* **1行あたりの表示製品数 – デスクトップ**：表示する製品数を選択します（1〜6）
* **1行あたりの表示製品数 – モバイル**：1〜3製品の中から選択します

***

### タイポグラフィのコントロール

* デスクトップとモバイルでフォントサイズを個別に調整します：
  * セクションヘッダー
  * 商品タイトル
  * 商品価格
* オプション：切り替え **ボールド** スタイル：
  * セクションタイトル
  * 表示リンク
  * 商品タイトル

***

### カラーカスタマイズ

* **背景色**：透過、ソリッド、またはブランドカラー
* **セクションタイトル＆リンクの色**
* **矢印の色** （ナビゲーション矢印）
* **商品タイトルの色**
* **製品価格の色**

各バッジのラベルカラー：

* **予約注文**
* **売り切れ**
* **セール中**
* **比較価格**

各バッジには次の両方があります：

* テキストの色
* 背景色

> ⚠️ 可読性のため、テキストと背景の色が明確にコントラストすることを確認してください。

***

### 間隔設定

画面サイズごとに視覚的なバランスを良くするために間隔を調整できます。

**デスクトップ**

* 上の余白：20px
* 下の余白：20px

**モバイル**

* 上の余白：16px
* 下の余白：16px

追加のコントロール：

* **セクションヘッダーと製品の間のスペース**
* **製品画像と情報の間のスペース**
* **製品タイトルと価格の間のスペース**
* **製品間の間隔（デスクトップとモバイル）**

***

### ナビゲーションコンテキスト

セクションで次を行います: **ナビゲーションコンテキスト** 顧客が製品をクリックしたときにどのコレクションに留まるかを定義する設定です。

例えば：

* 「サマーコレクション」に設定されている場合、どの製品をクリックしても顧客は同じコレクション内で閲覧を続けます。

これが設定されていない場合、製品をクリックするとコレクションの文脈なしで製品の標準ページに移動します。

***

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

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