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

### 学べること

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

***

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

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）に当社ウェブサイトで直接対応