# サイドバー コレクション

### 学べること

* サイドバー コレクション セクションの設定方法
* カート、メニュー、商品、ラベルの設定を調整する方法
* 並び替え、検索、ページネーションの動作を有効にする方法

***

### サイドバー コレクションのカスタマイズ方法

1. **テーマ エディタに移動する**
   * Shopify管理画面から、 **オンラインストア > テーマ**
   * クリック： **テキストの** 現在有効なテーマで
   * を開く **コレクション** テンプレートを開き、を選択する **サイドバー コレクション** セクション
2. **サイドバー メニュー**
   * クリック： **を選択します** メニューを割り当てるには
   * サイドバーの位置をに配置する **左** または **右**
   * オプションで **スキン画像をアップロードする** 背景をカスタマイズするために
3. **サイドバー設定**
   * 調整: **サイドバーの不透明度** スライダーを使用して（例: 1 px）
   * を設定する **背景色** （例: `#202020`)
   * 切り替え： **固定メニューを有効にする** または **サイドバーの影を有効にする** 必要に応じて
4. **日付と時刻（オプション）**
   * テキストの **日付/時刻の色** デスクトップとモバイル用に
   * 切り替え： **日付/時刻を表示** タイムスタンプを表示するために
5. **サイドバーリンク**
   * 設定する： **テキストの配置** （左、中央）
   * の間隔を調整する **リンクレベル** および **フォントサイズ**
   * 色をカスタマイズ：
     * **メニュー＆カートリンクの色**
     * **カートのテキスト**, **数量**、および **背景** 色
     * **モバイルの色** 含まれる
6. **商品タイトルと価格**
   * テキストの **フォントサイズ** および **テキスト色** タイトルと価格のための
   * 設定する： **比較価格の色** （例: 赤 `#FF0000`)
   * 表示オプションを切り替える：
     * 商品タイトルを表示
     * 商品価格を表示
     * 比較価格を表示
7. **ラベル**
   * フォントサイズと背景/テキスト色を設定：
     * 予約注文
     * セール中
     * 在庫切れ
   * 各ラベルタイプの表示/非表示を切り替える
8. **商品背景**
   * 設定する： **角の半径** および **背景色**
   * オプションで背景を透明にする
9. **検索＆並べ替えアイコン**
   * アイコンの位置を設定 **位置** および **色**
   * の表示/非表示を切り替える **検索/並べ替えアイコン** および **アイコンを入れ替える**
10. **検索バー**
    * 調整: **背景の不透明度** および **色** 対象：
      * 検索ボックス
      * キャンセルボタン
      * 検索結果
      * 入力フィールド
    * 角や影をオプションでスタイル設定する
11. **並び替えメニュー**
    * カスタマイズ：
      * デフォルトとアクティブなオプションのテキストと背景色
      * 並び替えメニューのハンドルの色
12. **ページネーションと読み込み**
    * を選択 **ページネーションの種類**: `無限スクロール` または `ページ番号`
    * 次の色を設定：
      * ページネーションのテキスト
      * アクティブなページとそのテキスト
      * ページネーションの矢印

> 💡 ヒント: スペーシング、可読性、レイアウトの整合性を確認するために、デスクトップとモバイルの両方でプレビューすることを忘れないでください。

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

* 💬 **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/pages-and-menus/collection-page/sidebar-collection.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.