テーマエディターでのカテゴリ一覧ページのデザイン（OS 3.0 テーマ）

商品カテゴリ一覧ページは、顧客がストア内のすべての商品カテゴリを閲覧できる場所であり、カテゴリ別にカタログを素早く探索できるようにします。OS 3.0テーマのテーマエディターでは、このページのタイトルをカスタマイズし、表示する商品カテゴリを選択し、商品カテゴリカードのレイアウトを配置し、各カードに使用される画像スタイルを制御できます。

このガイドでは、ページタイトルの設定、商品カテゴリの選択と配置、商品カテゴリの画像と名前の表示のカスタマイズ方法について説明します。

テーマエディターで商品カテゴリ一覧に移動する方法

テーマエディターで商品カテゴリ一覧ページを開くには：

1. SHOPLINE管理画面から、オンラインストア > デザインに移動し、編集したいOS 3.0テーマのデザインボタンをクリックします。
2. テーマエディターの上部にあるページセレクターをクリックし、ページタイプのリストから商品カテゴリ一覧を選択します。

左のサイドバーは3つのグループに分かれています：ストア内のすべてのページで共有されるヘッダーとフッター、そして編集中のページ固有のパーツを含むテンプレートです。商品カテゴリ一覧ページの場合、テンプレートにはこのガイドで説明する商品カテゴリ一覧パーツが含まれています。

商品カテゴリ一覧ページのページタイトルの設定

ページタイトルを設定するには：

1. 左のサイドバーで、テンプレート > コレクション リストの下にあるタイトルをクリックします。
2. 設定パネルで、以下を更新します:
   • タイトル: ページの上部に表示される見出しテキスト（デフォルトは「すべてのコレクション」）。

   • テキストラベル: このタイトルに使用されるSEO見出しタグを設定します（例：H2）。

     注： テキストラベルの設定はSEO目的のみであり、ストアフロント上のタイトルの見た目は変わりません。

• タイポグラフィ: タイトルの視覚的なフォントスタイルを設定します（例：タイトル3）。
• テキストの配置: PC版でタイトルを左揃え、中央揃え、または右揃えにします。
• テキストの配置（モバイル）: モバイルデバイス用に別の配置を設定します。
• 背景: タイトルの背後に背景色を追加します（デフォルトは色なし）。

3. 変更を適用するには、保存をクリックします。

コレクションリストページでのコレクションカードの設定

コレクションカードパーツはテーマエディターのコレクション リストの下にあり、表示するコレクションの選択、配置、各カードの画像と名前の表示方法を制御します。このセクションでは、コレクションの選択、カードのレイアウト配置、コレクション画像と名前の表示カスタマイズについて説明します。

表示するコレクションの選択 

グリッドに表示するコレクションを選択するには:

1. 左のサイドバーで、コレクションリスト > コレクションカードを開きます。
2. 設定パネルで、+ 商品コレクションを選択をクリックします。
3. ピッカーで表示したいコレクションを選択し、完了をクリックします。

コレクションカードの下で、カラースキームを継承のオン・オフを切り替えて、カードがページの他の部分に適用されているカラースキームを使用するかどうかを制御できます。

コレクションカードのレイアウト配置 

表示するカテゴリを選択するだけでなく、レイアウトタブを使って、カテゴリカードのページ上での配置方法（方向、間隔、配置）を制御できます。

カテゴリカードの配置方法を調整するには：

1. サイドバーでカテゴリカードを選択し、設定パネルのレイアウトタブを開きます。
2. 以下のオプションを設定します：

   • 方向

     オプション	効果
     列	カテゴリカードが縦に積み重なり、1つずつ下に並びます。
     行	カテゴリカードが左右に並びます。

• 自動折り返し

  オプション	効果
  オン	1行に収まらないカードは自動的に次の行に移動します。
  オフ	すべてのカードが1つの行または列にとどまり、表示エリアをはみ出してもそのままになります。

• 配置

  オプション	効果
  開始	カードが行または列の開始位置に揃います。
  中央	カードが中央に揃います。
  終了	カードが終了位置に揃います。
  ストレッチ	カードが利用可能なスペースに合わせて伸びます。

• 均等配置

  オプション	効果
  開始	カードがコンテナの開始位置にまとめられ、最後のカードの後に余白ができます。
  中央	カードが中央に配置され、両側に均等な余白があります。
  終了	カードが終了位置にまとめられ、最初のカードの前に余白ができます。

• 間隔

  オプション	効果
  行	カードの行間の垂直ギャップ（ピクセル単位）を設定します。
  列	カードの列間の左右ギャップ（ピクセル単位）を設定します。

カテゴリ画像の構成 

カテゴリ画像の表示方法をカスタマイズするには：

1. カテゴリカードの下で、カテゴリ画像をクリックします。
2. 設定パネルで以下を構成します：
   • カテゴリ画像の比率： 各カテゴリ画像のアスペクト比を選択します — 1:1、4:3、または 2:3。
   • 画像の塗りつぶし方法： 画像を比率に合わせてトリミングするには塗りつぶしを選択し、フレーム内に画像全体を表示するにはフィットを選択します。
   • カテゴリ画像の形状： 正方形または 丸形を選択します。
   • 画像表示エリア： 画像の焦点が固定される位置を選択します — 中央、上、右上、左上、左、右、左下、右下、または 下。
3. 保存をクリックして変更を適用します。

カテゴリ名の表示 

カテゴリ名は各カードの2か所に表示できます：カテゴリ画像の上にオーバーレイとして、またはその下にキャプションとして。どちらの配置も同じ設定を使用します。

カテゴリ名を追加または修正するには： 

1. 商品カテゴリ画像の下で、画像にオーバーレイとして名前を追加するには＋商品カテゴリ名を追加をクリックするか、商品カテゴリ画像の下にある既存の商品カテゴリ名パーツを選択してキャプションバージョンを修正します。
2. 設定パネルで以下を構成します：
   • 商品カテゴリタイトル：商品カテゴリ名として表示するテキストを入力します。

   • テキストラベル：このテキストのSEO見出しタグを設定します（例：H2）。

     注：テキストラベルの設定はSEO目的のみであり、ストアフロント上の商品のカテゴリ名の見た目は変わりません。

• タイポグラフィ：視覚的なフォントスタイルを設定します（例：ボディ3）。
• テキストの配置：テキストを左揃え、中央揃え、または右揃えにします。

3. 保存をクリックして変更を適用します。

カラースキームの設定 

商品カテゴリカードに適用されるカラースキームを変更するには：

1. 商品カテゴリリストをサイドバーで選択します。
2. カラーの下で、別のカラースキームを選択するには変更をクリックし、現在のスキームを修正するには修正をクリックします。
3. 保存をクリックして変更を適用します。

商品カテゴリリストページにマルチレベルフィルタを追加する

ストアに多数の商品カテゴリがある場合に便利な、商品、ブランド、またはサービスの種類で商品カテゴリを絞り込むためのマルチレベルフィルタパーツを任意で追加できます。

マルチレベルフィルタセクションには、見出しとサブ見出し、複数のフィルタドロップダウン、検索ボタン、およびその下に「商品で探す」「ブランドで探す」「サービスの種類で探す」などのクイックアクセスカテゴリリンクの行が表示されます。

マルチレベルフィルタを追加するには：

1. 左のサイドバーで、Templateの下にあるパーツを追加をクリックし、マルチレベルフィルタを選択します。
2. 設定パネルで以下を設定します:
   • 色: カラースキームを選択するか、現在のものを修正するには修正をクリックします。
   • 背景画像: フィルタセクションの背景画像を設定するには＋画像を追加をクリックします。
   • レイヤーマスクの不透明度: スライダーを調整するかパーセンテージを入力して、オーバーレイの背後にある背景画像の見え方を制御します（例：30%）。
   • PC版の高さ: PC版のセクションの固定高さを設定します（例：650px）。
   • モバイルの高さ: モバイルの高さを設定します。コンテンツサイズに合わせて自動調整するにはフィットを選択します。
3. 保存をクリックして変更を申請します。